Question

我正在开发Windows 8.1商店应用。我有一个CommandBar控件，里面有几个AppBarButtons。使用标准图标很简单，我只需将icon属性设置为适当的字符串，如下所示：

<AppBarButton Icon="Download" Label="Download Files"/>

我想使用来自非常好的免费收藏集Modern UI Icons的几个自定义图标。理想情况下，我希望能够以相同的方式设置图标属性：

<AppBarButton Icon="transit.distance.to" Label="Distance to destination"/>

这会引用此图标：PNG / XAML

这可能吗？

如果没有，有哪些替代方案？

Tim Heuer proposes使用字体文件，虽然目前字体文件available here仅涵盖图标的子集，而且此代码也非常难以理解：

<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&#xe045;" FontSize="37.333" />

您是否相信会显示推特图标？！

Tim Heuer还建议使用矢量数据，其中一个评论者explains how可以将矢量数据转换为样式。我可以这样做，但是我必须复制并粘贴我想要包含的每个图标的路径数据？

我是否应该使用PNG文件，如this question中所述？这看起来也很混乱。

多么噩梦！

Answer 1

我不确定噩梦部分是什么 - 你想使用200多种默认设置中不存在的自定义图标。你有选择：

使用SymbolIcon并提供您自己的字体。您注意到您不喜欢代码感觉不可读。 Unicode范围通常用于符号字体，我同意Unicode不是人类可读的，但简单的代码注释会有所帮助;-)字体为您提供最大的便利性和灵活性，因为它们也是矢量。
1. PathIcon。您将图像转换为我们可以渲染的矢量几何。这将是第二好的，但也需要对矢量进行一些微调以使其正确。对于不熟悉几何形状的人来说，这一开始可能很烦人。 Blend和Inkscape是这里的有用工具。
2. BitmapIcon。这将允许您使用PNG，但是您现在必须为不同的比例和状态提供多个PNG。这是我最不喜欢的选项，因为它需要大部分工作，但有些可能是最简单的。现在您遇到的问题是BitmapIcon存在非矩形形状的问题（看起来像您的图标）。由于光栅化中存在错误，因此无法获得保真度。
3. 联系metroicon作者，看看他是否可以将其放入字体文件中，以便您可以使用选项＃1： - ）

也许这就是你要找的东西：

<AppBarButton Label="Transit">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 3.912,17.38C 4.89067,17.38 5.688,18.2653 5.688,19.3586C 5.688,20.448 4.89067,21.3333 3.912,21.3333C 2.92667,21.3333 2.136,20.448 2.136,19.3586C 2.136,18.2653 2.92667,17.38 3.912,17.38 Z M 16,17.38C 16.984,17.38 17.776,18.2653 17.776,19.3586C 17.776,20.448 16.984,21.3333 16,21.3333C 15.016,21.3333 14.224,20.448 14.224,19.3586C 14.224,18.2653 15.016,17.38 16,17.38 Z M 21.3333,18.9626L 18.464,18.9626C 18.292,17.62 17.2547,16.5933 16,16.5933C 14.7453,16.5933 13.708,17.62 13.536,18.9626L 6.37467,18.9626C 6.20267,17.62 5.16667,16.5933 3.912,16.5933C 2.656,16.5933 1.62,17.62 1.448,18.9626L 0,18.9626L 0,10.2706C 0,9.396 0.636,8.69196 1.42133,8.69196L 19.5573,8.69196C 20.3387,8.69196 20.9787,9.396 20.9787,10.2706M 20.4427,10.2706L 19.1973,10.2706L 19.1973,15.8013L 20.62,15.8013M 17.776,13.432L 17.776,10.2706L 14.224,10.2706L 14.224,13.432M 13.5107,10.2706L 9.95333,10.2706L 9.95333,13.432L 13.5107,13.432M 9.24533,10.2706L 5.688,10.2706L 5.688,13.432L 9.24533,13.432M 4.97867,10.2706L 1.42133,10.2706L 1.42133,13.432L 4.97867,13.432M 14.5787,2.36932L 12.4427,0L 15.2867,0L 17.776,2.45862L 17.776,0L 19.1973,0L 19.1973,6.31732L 17.776,6.31732L 17.776,3.85864L 15.2867,6.31732L 12.4427,6.31732L 14.5787,3.948L 7.73467,3.948C 7.41733,5.31195 6.30267,6.31732 4.97867,6.31732C 3.40667,6.31732 2.136,4.90533 2.136,3.16132C 2.136,1.41064 3.40667,0 4.97867,0C 6.30267,0 7.41733,1.00531 7.73467,2.36932L 14.5787,2.36932 Z " HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </AppBarButton.Icon>
</AppBarButton>

希望这有帮助！

如何在AppBarButton中使用现代UI图标

1 个答案: