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

Question

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

6

微软文档指出，您可以使用SVG矢量图标文件来设置图标：https://learn.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

Copy to Output Directory: Do not copy

Custom Tool:

Custom Tool Namespace:

- Bimo

4个回答

1

目前将SVG文件转换为PathIcon的主要问题在于，PathIcon在XAML中被指定为单个“Path” XAML语句。因此，SVG文件中的每个路径都需要被压缩到同一个“path”语句中，以与指定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）文件 -> 另存为...

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

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

方法2：XPS格式

1）将您的SVG打印到XPS打印机

2）XPS打印机会要求您提供文件名。将其保存在某个地方

3）将文件扩展名更改为.ZIP

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

5）查找文件。它可能在文档 > 1 > 页面 > 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" />
...

- Bimo

不需要导出文件来访问和复制SVG数据。您只需从Inkscape工具栏中打开Inkscape XML编辑器即可。当您选择树中的节点时，它们也会在设计区域中被选中，反之亦然。 - mins

0

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

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

- Bimo

0

你可以在你的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")
            }
        };

- Zunayed Hassan

这对我不起作用。 - Zodman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Breeze Liu - MSFT · Accepted Answer

您不能直接使用 .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