WPF在WPF中将SVG文件用作图标的正确方法是什么 [英] WPF What is the correct way of using SVG files as icons in WPF
问题描述
有人可以描述推荐的逐步操作步骤吗?
Can someone describe a recommended Step by Step procedure for doing this?
步骤1.将SVG转换为XAML ...那很容易
Step1. Convert SVG to XAML... thats easy
步骤2.现在呢?
推荐答案
您的技术将取决于SVG到XAML转换器生成的XAML对象.它会产生图纸吗?一个图像?网格?画布?路径?几何?在每种情况下,您的技术都会有所不同.
Your technique will depend on what XAML object your SVG to XAML converter produces. Does it produce a Drawing? An Image? A Grid? A Canvas? A Path? A Geometry? In each case your technique will be different.
在下面的示例中,我假设您在按钮上使用图标,这是最常见的情况,但是请注意,相同的技术也适用于任何ContentControl.
In the examples below I will assume you are using your icon on a button, which is the most common scenario, but note that the same techniques will work for any ContentControl.
使用工程图作为图标
要使用绘图,请使用DrawingBrush绘制适当大小的矩形:
To use a Drawing, paint an approriately-sized rectangle with a 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>
或者,如果您需要控制尺寸,则可以将其包含在视图"框中:
Or you can include it in a Viewbox if you need to control the size:
<Button>
<Viewbox ...>
<Grid ... /> <!-- Converted from SVG -->
</Viewbox>
</Button>
使用画布作为图标
这就像使用图像或网格一样,但是由于画布没有固定的大小,因此您需要指定高度和宽度(除非SVG转换器已经设置了高度和宽度):
This is like using an image or grid, but since a canvas has no fixed size you need to specify the height and width (unless these are already set by the SVG converter):
<Button>
<Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions -->
</Canvas>
</Button>
使用路径作为图标
您可以使用路径,但是必须设置笔触或显式填充:
You can use a Path, but you must set the stroke or fill explicitly:
<Button>
<Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
或
<Button>
<Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
使用几何图形作为图标
您可以使用路径绘制几何图形.如果应该对其进行描边,请设置描边:
You can use a Path to draw your geometry. If it should be stroked, set the Stroke:
<Button>
<Path Stroke="Red" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
或者如果应该填充,请设置填充:
or if it should be filled, set the Fill:
<Button>
<Path Fill="Blue" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
如何绑定数据
如果您正在代码中进行SVG-> XAML转换,并希望通过数据绑定显示结果XAML,请使用以下一种方法:
If you're doing the SVG -> XAML conversion in code and want the resulting XAML to appear using data binding, use one of the following:
绑定图形:
<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}" />
在视图框中绑定网格:
<Button>
<Viewbox ...>
<ContentPresenter Content="{Binding Grid}" />
</Viewbox>
</Button>
绑定画布:
<Button>
<ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>
绑定路径:
<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>
这篇关于WPF在WPF中将SVG文件用作图标的正确方法是什么的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!