WPF中使用SVG文件作为图标的正确方法是什么？

有人可以描述一个推荐的分步程序吗？

编辑：

步骤1。 转换SVG到XAML …这很容易

第2步。 怎么办？

Answer 1

您的技术将取决于XAML将您的SVGreflection到XAML转换器所产生的对象。 它会产生一个绘图？ 一个图像？ 一个网格？ canvas？ 一条path？ 几何？ 在每种情况下，你的技术将会不同。

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

使用graphics作为图标

要使用绘图，请使用DrawingBrush绘制一个大小合适的矩形：

<Button> <Rectangle Width="100" Height="100"> <Rectangle.Fill> <DrawingBrush> <DrawingBrush.Drawing> <Drawing ... /> <!-- Converted from SVG --> </DrawingBrush.Drawing> </DrawingBrush> </Rectangle.Fill> </Rectangle> </Button> 

使用图像作为图标

一个图像可以直接使用：

 <Button> <Image ... /> <!-- Converted from SVG --> </Button> 

使用网格作为图标

网格可以直接使用：

 <Button> <Grid ... /> <!-- Converted from SVG --> </Button> 

或者，如果您需要控制尺寸，则可以将其包含在视图框中：

 <Button> <Viewbox ...> <Grid ... /> <!-- Converted from SVG --> </Viewbox> </Button> 

使用canvas作为图标

这就像使用图像或网格一样，但由于canvas没有固定的大小，所以需要指定高度和宽度（除非已经由SVG转换器设置）：

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

使用path作为图标

您可以使用path，但必须明确设置描边或填充：

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

要么

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

使用几何作为图标

您可以使用“path”来绘制几何graphics。 如果它应该被抚摸，设置描边：

 <Button> <Path Stroke="Red" Width="100" Height="100"> <Path.Data> <Geometry ... /> <!-- Converted from SVG --> </Path.Data> </Path> </Button> 

或者是否应该填充，请设置填充：

 <Button> <Path Fill="Blue" Width="100" Height="100"> <Path.Data> <Geometry ... /> <!-- Converted from SVG --> </Path.Data> </Path> </Button> 

如何进行数据绑定

如果您正在代码中执行SVG – > XAML转换，并希望生成的XAML使用数据绑定显示，请使用以下选项之一：

绑定绘图：

 <Button> <Rectangle Width="100" Height="100"> <Rectangle.Fill> <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" /> </Rectangle.Fill> </Rectangle> </Button> 

绑定图像：

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

绑定网格：

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

在Viewbox中绑定网格：

 <Button> <Viewbox ...> <ContentPresenter Content="{Binding Grid}" /> </Viewbox> </Button> 

绑定canvas：

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

绑定path：

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

绑定几何：

 <Button> <Path Width="100" Height="100" Data="{Binding Geometry}" /> </Button> 

Answer 2

我find了最好的方式来使用WPF中的SVG图标。 我使用sharpvector框架：

 Install-Package SharpVectors 

所以我的XAML如下所示：

 <UserControl ... xmlns:svgc="http://sharpvectors.codeplex.com/svgc/" ...> ... <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/View/Resources/Icons/Connection.Closed.Black.svg"/> ... </UserControl> 

Answer 3

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

 <Rectangle> <Rectangle.Fill> --- insert the converted xaml's geometry here --- </Rectangle.Fill> </Rectangle> 

Answer 4

Windows 10创作者更新（15063）本地支持SVG图像，但有一些问题。

用法与将<Image />的Source设置为SVGpath一样简单。 这相当于使用SvgImageSource ，如下所示：

 <Image> <Image.Source> <SvgImageSource UriSource="Assets/svg/icon.svg" /> </Image.Source> </Image> 

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

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

这可以dynamic地通过在SvgImageSource事件中为基本图像创build一个新的SvgImageSource来解决：

 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; 

在非高分辨率的屏幕上可能很难看到别名，但这里试图说明这一点。

这是上面代码的结果：使用初始SvgImageSource Image以及使用在ImageOpened事件中创build的SvgImageSource的第二个Image 。

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

而这是底部（反锯齿，正确）图像的放大视图：

（您需要在新标签页中打开图片并查看全尺寸以了解其差异）