UWP：应用栏/命令栏中的图标大小 [英] UWP: icon size in app bar/command bar

问题描述

我应该为

如您所见，图像的高度和宽度为设置为20个设备独立像素。对于不同的显示缩放，它是相同的，但在屏幕上使用适当的倍数进行渲染。

我还确认此大小与Segoe UI Symbol基于字体完全匹配内置于 AppBarButton 控件中的图标。

我建议制作没有任何边距的图标图像，以便它的大小与默认图像以及可能的

相匹配

What icon sizes should I use for the app bar/command bar?

I couldn't find something in Guidelines for tile and icon assets or in UWP App Visual Assets.

_{Other names: navigation bar (iOS), app bar/action bar (Android), toolbar (Xamarin.Forms)}

解决方案

Image size

The default icon size should be 20 pixels for app bar image at 100% scaling, but you should also provide additional image assets to ensure it looks great on all screens:

appbaricon.scale-100.png - 20 px
appbaricon.scale-125.png - 25 px
appbaricon.scale-150.png - 30 px
appbaricon.scale-200.png - 40 px
appbaricon.scale-400.png - 80 px

Source

I have created a simple XAML page with the CommandBar control and an AppBarButton with a sample image:

 <CommandBar>
     <AppBarButton>
         <AppBarButton.Icon>
             <BitmapIcon UriSource="/Assets/Sample.png" />
         </AppBarButton.Icon>
     </AppBarButton>
 </CommandBar>

I have run the app with debugger attached, found the BitmapIcon in the Live Visual Tree in Visual Studio and opened its Live Property Explorer:

As you can see, the height and width of the image is set to 20 device independent pixels. For different display scaling it is the same, but rendered with the appropriate multiple on the screen.

I have also confirmed that this size exactly matches the Segoe UI Symbol font-based icons that are built-in into the AppBarButton control.

I recommend making the icon image without any margin so that its size matches the default image as well as possible

这篇关于UWP：应用栏/命令栏中的图标大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！