Question

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：content

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

自定义工具：

自定义工具命名空间：

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

目前，将SVG文件转换为PathIcon的主要问题是在XAML中将PathIcon指定为单个“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数据的三种方法。

方法1：Inkscape

1）在Inkscape中打开或创建SVG

2）文件 - ＆gt;另存为......

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

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

方法2：XPS格式

1）将SVG打印到XPS打印机

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

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

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

5）追捕文件。它可能在Documents＆gt;之下1>页面＆gt; 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 Path Tags转换为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" />
...

Answer 3

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

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

Answer 4

您始终可以将内容放在 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")
            }
        };

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

4 个答案: