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

【问题标题】：how to set AppBarButton Icon using svg file resource in UWP/C#如何在 UWP/C# 中使用 svg 文件资源设置 AppBarButton 图标
【发布时间】：2018-10-31 15:47:30
【问题描述】：

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

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

<AppBarButton Label="BitmapIcon">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Svg/MyButton.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

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

BuildAction：内容

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

自定义工具：

自定义工具命名空间：

【问题讨论】：

标签： c# xaml uwp

【解决方案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

【讨论】：

谢谢。顺便说一下，appbarbutton和navigationviewitem.icon在转换此类文件时需要png文件的像素尺寸是多少？
@BillMoore 图标像素更多地取决于您的应用设计。但是 AppBarButton 图标的默认字体大小是 20px。

【解决方案2】：

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

不过，话虽如此，SVG 很容易翻译或转换为 XAML，因为它以 XML 格式指定：

<ResourceDictionary>
    <Canvas 
           x:Key="appbar_icon1" 
           Width="76" Height="76" 
           ...>
        <Path ... />
        <Path ... />
        <Path ... />
        ...
    </Canvas>
</ResourceDictionary>

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

方法一：Inkscape

1) 在 Inkscape 中打开或创建 SVG

2) 文件 -> 另存为...

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

4) 在窗口中，您可以选择兼容 Silverlight。我会选择它，因为它会生成更清晰的 XML

方法二：XPS格式

1) 将 SVG 打印到 XPS 打印机

2) XPS 打印机会要求您输入文件名。保存在某处

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

4) 解压压缩包中的所有文件。它会创建一堆文件和文件夹

5) 查找文件。它可能在 Documents > 1 > Pages > 1.fpage 下

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

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

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

<g
       transform="translate(0,0)"
       id="layer1">
    <path
        id="path3388"
        d="m 15.6,5 c 0,40 0,40 0,40"
        .../>
    <path
        id="path3390"
        d="m 35,5 c 0,40 0,40 0,40"
        .../>
    ...
</g>

2) 手动将 XML 路径标签转换为 XAML 路径标签：

XAML：

<Path Data="F1 m 15.6,5 c 0,40 0,40 0,40" 
      Stroke="Black" 
      StrokeThickness="1" />
<Path Data="F1 m 35,5 c 0,40 0,40 0,40" 
      Stroke="Black" 
      StrokeThickness="1" />
...

【讨论】：

无需导出到文件即可访问和复制 SVG 数据。 You just have to open Inkscape XML editor 来自 Inkscape 工具栏。当您选择树中的节点时，它们也会在设计器区域中被选中，反之亦然。

【解决方案3】：

如果你需要一个AppBarButton或Navigationviewitem.Icon的矢量化图标，而微软提供的标准图标还不够用，那么寻找Icon最好的方法就是在网上找一个免费的“Icon font”并加载到您的应用程序作为资源，然后使用 FontIcon 设置图标。（见https://www.webpagefx.com/blog/web-design/free-icon-fonts）。

另一种选择是创建自己的字体并使用字体创建软件，例如“FontBird”(https://birdfont.org/)。

【讨论】：

【解决方案4】：

您始终可以将 content 放在 AppBarButton 元素上。因此，使用 Image 和 SvgImageSource 作为图标放在 AppBarButton 内容上。这里我使用了 16p x 16px SVG 图片。

原始 SVG：

带标签的AppBarButton：

这是剩下的代码

this.MyAppBarButton.Content = new Image()
        {
            Source = new SvgImageSource()
            {
                UriSource = new Uri("ms-appx:///Assets/logo.svg")
            }
        };

【讨论】：