[英]UWP: icon size in app bar/command bar
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 . 我在“图块和图标资产指南”或“ UWP App视觉资产 ”中找不到任何内容。
Other names: navigation bar (iOS), app bar/action bar (Android), toolbar (Xamarin.Forms) 其他名称:导航栏(iOS),应用栏/操作栏(Android),工具栏(Xamarin.Forms)
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: 应用程序栏图像在100%缩放时的默认图标大小应为20像素,但您还应提供其他图像资源以确保它在所有屏幕上看起来都很好:
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
I have created a simple XAML page with the CommandBar
control and an AppBarButton
with a sample image: 我使用
CommandBar
控件和带有示例图像的AppBarButton
创建了一个简单的XAML页面:
<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
: 我已经运行了带有调试器的应用程序,在Visual Studio的
Live Visual Tree
中找到了BitmapIcon
并打开了其Live Property Explorer
:
As you can see, the height and width of the image is set to 20 device independent pixels. 如您所见,图像的高度和宽度设置为20个与设备无关的像素。 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. 我还确认了该大小与
AppBarButton
控件中内置的基于Segoe UI Symbol字体的图标完全匹配。
I recommend making the icon image without any margin so that its size matches the default image as well as possible 我建议使图标图像没有空白,以使其尺寸尽可能与默认图像匹配
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.