如何在UWP / C中使用svg文件资源设置AppBarButton图标＃

Microsoft文档声明您可以使用SVG矢量图形文件设置图标： https ： //docs.microsoft.com/en-us/windows/uwp/design/style/icons

但是，当我尝试使用svg文件设置图标时，它只显示空白：

这是我将Svg文件添加到我的项目的方式：在项目下我创建了一个目录“Svg”，在Svg文件夹中我添加了文件“MyButton.svg”。 该svg资源文件的属性设置为：

BuildAction：内容

复制到输出目录：不要复制

自定义工具：

自定义工具命名空间：

Answer 1

您不能直接将.svg文件用作AppBarButton图标。 要将SVG图标文件加载到AppBarButton.Icon中，您可以将其转换为PNG，字体或路径，然后使用FontIcon ， BitmapIcon和PathIcon来显示它。 更多细节，你可以看看这个类似的线程：

https://social.msdn.microsoft.com/Forums/en-US/1d32a8b5-a4e1-472b-acce-85c92380b799/uwp-how-to-load-svg-icon-into-appbarbuttonicon?forum=wpdevelop

Answer 2

如果您需要AppBarButton或Navigationviewitem.Icon的矢量化图标，并且Microsoft提供的标准图标不够，那么找到图标的最佳方法是在线查找免费的“图标字体”并将其加载到您的应用程序中一个资源，然后使用FontIcon设置图标。 （参见https://www.webpagefx.com/blog/web-design/free-icon-fonts ）。

另一种方法是创建自己的字体并使用字体创建软件，如“FontBird”（ https://birdfont.org/ ）。

Answer 3

目前，将SVG文件转换为PathIcon的主要问题是在XAML中将PathIcon指定为单个“Path”XAML语句。 因此，需要将SVG文件中的每个路径都粉碎到相同的“路径”语句中，以便与用于指定PathIcon的单路径XAML格式兼容。 这更符合指定字体的方式。

但是，据说，SVG很容易翻译或转换成XAML，因为它以XML格式指定：

      ...   

从SVG文件中获取此XAML PATH数据的三种方法。

方法1：Inkscape

1）在Inkscape中打开或创建SVG

2）文件 – >另存为…

3）在文件类型中，选择Microsoft XAML（靠近底部）

4）在窗口中，您可以选择兼容Silverlight。 我选择它会生成更干净的XML

方法2：XPS格式

1）将SVG打印到XPS打印机

2）XPS打印机将询问您文件名。 把它保存在某个地方

3）将文件扩展名重命名为.ZIP

4）提取拉链中的所有文件。 它将创建一堆文件和文件夹

5）追捕文件。 它可能位于Documents> 1> Pages> 1.fpage下

方法3：剪切并粘贴SVG文件XML

SVG是XML文件格式。 您可以在自己喜欢的文本编辑器中打开它。 如果您要打开文件并向下滚动，请查看以下内容。

1）在编辑器中打开SVG文件：

    ...  

2）手动将XML路径标记转换为XAML路径标记：

XAML：

   ...