UWP：应用程序中的图标大小 bar/command 栏

Question

我应该为 app bar/command bar 使用什么图标尺寸？

我在 Guidelines for tile and icon assets or in UWP App Visual Assets 中找不到内容。

_{其他名称：导航栏(iOS)、应用bar/action栏(Android)、工具栏(Xamarin.Forms)}

Answer 1

图片大小

应用栏图像在 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

来源

我创建了一个带有 CommandBar 控件的简单 XAML 页面和一个带有示例图像的 AppBarButton：

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

我有运行附加调试器的应用程序，在 Visual Studio 的 Live Visual Tree 中找到 BitmapIcon 并打开它的 Live Property Explorer:

如您所见，图像的高度和宽度设置为 20 个与设备无关的像素。对于不同的显示缩放，它是相同的，但在屏幕上以适当的倍数呈现。

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

我建议使图标图像没有任何边距，以便其大小尽可能与默认图像匹配

UWP：应用程序中的图标大小 bar/command 栏

UWP: icon size in app bar/command bar

icons

win-universal-app

windows-10-mobile

uwp

图片大小

来源