WPF在WPF中将SVG文件用作图标的正确方法是什么


WPF What is the correct way of using SVG files as icons in WPF

有人可以描述推荐的逐步操作步骤吗？

编辑：

第1步。 将SVG转换为XAML ...就这么简单

第2步。 怎么办？

相关讨论

您的技术将取决于SVG到XAML转换器生成的XAML对象。它会产生图纸吗？一个图像？网格？画布？路径？几何？在每种情况下，您的技术都会有所不同。

在下面的示例中，我将假定您在按钮上使用图标，这是最常见的情况，但是请注意，对于任何ContentControl，相同的技术都适用。

使用工程图作为图标

若要使用绘图，请使用DrawingBrush绘制适当大小的矩形：

1
2
3
4
5
6
7
8
9
10
11
12
13
<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>

          <Drawing ... /> <!-- Converted from SVG -->

        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Button>

使用图像作为图标

图像可以直接使用：

1
2
3
<Button>
  <Image ... />  <!-- Converted from SVG -->
</Button>

使用网格作为图标

网格可以直接使用：

1
2
3
<Button>
  <Grid ... />  <!-- Converted from SVG -->
</Button>

或者，如果需要控制大小，可以将其包含在"视图"框中：

1
2
3
4
5
<Button>
  <Viewbox ...>
    <Grid ... />  <!-- Converted from SVG -->
  </Viewbox>
</Button>

使用画布作为图标

这就像使用图像或网格一样，但是由于画布没有固定的大小，因此您需要指定高度和宽度(除非这些已由SVG转换器设置)：

1
2
3
4
<Button>
  <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->
  </Canvas>
</Button>

使用路径作为图标

您可以使用路径，但是必须设置笔触或显式填充：

1
2
3
<Button>
  <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

要么

1
2
3
<Button>
  <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

使用几何作为图标

您可以使用路径绘制几何图形。如果应该对其进行笔划，请设置笔划：

1
2
3
4
5
6
7
<Button>
  <Path Stroke="Red" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

或者如果应该填充，请设置填充：

1
2
3
4
5
6
7
<Button>
  <Path Fill="Blue" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

如何进行数据绑定

如果要在代码中执行SVG-> XAML转换，并希望使用数据绑定显示结果XAML，请使用以下方法之一：

绑定工程图：

1
2
3
4
5
6
7
<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

绑定图像：

1
<Button Content="{Binding Image}" />

绑定网格：

1
<Button Content="{Binding Grid}" />

在视图框中绑定网格：

1
2
3
4
5
<Button>
  <Viewbox ...>
    <ContentPresenter Content="{Binding Grid}" />
  </Viewbox>
</Button>

绑定画布：

1
2
3
<Button>
  <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>

绑定路径：

1
<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter -->

绑定几何：

1
2
3
<Button>
  <Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>
相关讨论

安装SharpVectors库

1
Install-Package SharpVectors

在XAML中添加以下内容

1
2
3
<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">
    <svgc:SvgViewbox Source="/Icons/icon.svg"/>
</UserControl>
相关讨论

Windows 10内部版本15063"创建者更新"本地支持针对Windows 10的UWP / UAP应用程序的SVG图像(尽管有些陷阱)。

如果您的应用程序是WPF应用程序，而不是UWP / UAP，则仍然可以使用此API(在经历了很多麻烦之后)：Windows 10 build 17763" October 2018 Update"引入了XAML孤岛的概念(作为"预览"技术，但我相信应用商店中允许；在所有情况下，Windows 10 build 18362" May 2019 Update" XAML岛不再是预览功能，并且受到完全支持)，允许您在WPF中使用UWP API和控件应用程序。

您需要首先添加对WinRT API的引用，并使用与用户数据或系统进行交互的某些Windows 10 API(例如，从Windows 10 UWP Webview中的磁盘加载映像，或使用Toast通知API来显示Toast)，您还需要将WPF应用程序与程序包身份相关联，如此处所示(在Visual Studio 2019中非常容易)。但是，使用Windows.UI.Xaml.Media.Imaging.SvgImageSource类不是必需的。

用法(如果您使用的是UWP或已按照上述说明进行操作，并在WPF下添加了XAML岛支持)，就像将Source设置为SVG路径的一样简单。这等效于使用SvgImageSource，如下所示：

1
2
3
4
5
<Image>
    <Image.Source>
        <SvgImageSource UriSource="Assets/svg/icon.svg" />
    </Image.Source>
</Image>

但是，以这种方式(通过XAML)加载的SVG图像可能会加载锯齿/锯齿。一种解决方法是指定RasterizePixelHeight或RasterizePixelWidth值，该值是实际高度/宽度的两倍+：

1
<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->

通过在ImageOpened事件中为基础映像创建一个新的SvgImageSource，可以动态地解决此问题：

1
2
3
4
5
6
7
8
9
var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon));
PrayerIcon.ImageOpened += (s, e) =>
{
    var newSource = new SvgImageSource(svgSource.UriSource);
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2;
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2;
    PrayerIcon2.Source = newSource;
};
PrayerIcon.Source = svgSource;

在非高dpi的屏幕上，混叠可能很难看到，但这是为了说明这一点。

这是上面的代码的结果：一个使用初始SvgImageSource的Image，下面的第二个Image使用在ImageOpened事件中创建的SvgImageSource：

enter image description here

这是顶部图像的放大视图：

enter image description here

而这是底部(抗锯齿，正确)图像的放大视图：

enter image description here

(您需要在新标签页中打开图像并以完整尺寸查看，以体会其中的不同之处)

相关讨论

您可以将SVG中生成的xaml用作矩形上的绘图笔刷。像这样：

1
2
3
4
5
<Rectangle>
   <Rectangle.Fill>
      --- insert the converted xaml's geometry here ---
   </Rectangle.Fill>
</Rectangle>
相关讨论

使用SvgImage或SvgImageConverter扩展，SvgImageConverter支持绑定。
请参阅以下链接，以获取展示这两个扩展的示例。

https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf

我们可以直接使用SVG代码中的路径代码：

1
2
3
    <Path>
        <Path.Data>
            <PathGeometry Figures="M52.8,105l-1.9,4.1c ...