如何为WPF创建矢量图像
我想在我的WPF应用程序中使用矢量图像（用于按钮和菜单）。我怎么做？我应该使用哪些工具？有人可以展示我的完整例子吗？
2 个答案:
答案 0 :(得分：29)
创建XAML矢量图像的工具
创建XAML矢量图像的最佳应用程序可能是Microsoft Expression Design。这是一个可以从https://www.microsoft.com/en-gb/download/details.aspx?id=36180
下载的免费工具安装Expression Design后，启动它并选择编辑 - ＆gt;选项 - ＆gt;剪贴板（XAML）。将剪贴板格式更改为 XAML WPF资源字典。同时将分组依据更改为文档（否则每个图层都是图像）。
在Expression Design中编辑图像。完成后，选择所有内容并打开修改菜单，然后打开复制XAML 。将其粘贴到适当的XAML文件中。您在下面的示例中看到它应该是什么样子。需要注意的一点是，您需要将 DrawingImage 标记更改为 DrawingBrush 。
在绘制图像时，将文档大小设置为WPF应用程序中所需的大小（如32x32像素）。没有必要，但使工作更容易。在将图像复制到XAML之前，您可能想要制作一个与文档大小相同的透明矩形（否则边距可能是错误的）。或者您可以在绘图组子项中手动添加：
<GeometryDrawing Brush="#00FFFFFF" Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " />
如果您使用的是Inkscape
Inkscape支持生成XAML文件。但是 - 这可能不是你想要的格式！ WPF有两种不同的方式来处理XAML中的图形 - 形状和几何。您可以在此处找到有关此内容的更多详细信息：http://www.intertech.com/Blog/WPF-Shapes-vs-WPF-Geometries/。
但是短形状支持输入，而几何形状只是纯粹的绘图，因此更轻巧。
Inkscape以shape-format格式生成文件，这对某些情况很有用，但对于按钮和类似应该使用的图像则不行。所以你想要的是将你的图像带入Expression Design。您可以将图像保存为 PDF 文件，将文件扩展名更改为 AI ，然后在Expression Design中使用文件，< strong>导入Adobe Illustrator文件。使用 EPS 是另一种选择。
大部分内容都可以导入Expression Design。但例如，边界可能存在一些问题。当你得到了你想要的表达设计时，最好在那里做所有的工作。如果需要，您可以将图像导出到可以在Inkscape中使用的SVG，这通常可以毫无问题地工作。
实施例
当您为图像创建XAML代码时，它非常直接。下面是一个示例，其中矢量图像用于菜单和两个按钮。
如果要绘制非常细的线条（1个像素），您可能需要将RenderOptions.EdgeMode="Aliased"和SnapsToDevicePixels="True"添加到绘制图像的控件的属性中。
要记住的另一件事是禁用按钮时该怎么做。在下面的示例中，无论按钮是否启用，图像看起来都是相同的（对于普通的位图也是如此）。将不透明度更改为50％是一种看起来相当不错的方法。转换灰度比较难，但也有解决方案。
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
x:Class="VectorGraphicsDemo.MainWindow"
Title="MainWindow"
Height="350"
Width="616">
<Window.Resources>
<!-- Note: When Expression Designed generated the code it was generated
as DrawingBrush. Remember to change this to DrawingImage. -->
<DrawingImage x:Key="TestImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#00FFFFFF"
Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " />
<GeometryDrawing Brush="#FFFF0000"
Geometry="F1 M 6.25,3.97918L 23.125,3.97918L 23.125,16.1458L 6.25,16.1458L 6.25,3.97918 Z ">
<GeometryDrawing.Pen>
<Pen LineJoin="Round"
Brush="#FF000000" />
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#FF00C800"
Geometry="F1 M 21.8542,11.0625C 26.399,11.0625 30.0833,14.7468 30.0833,19.2917C 30.0833,23.8365 26.399,27.5208 21.8542,27.5208C 17.3093,27.5208 13.625,23.8365 13.625,19.2917C 13.625,14.7468 17.3093,11.0625 21.8542,11.0625 Z ">
<GeometryDrawing.Pen>
<Pen LineJoin="Round"
Brush="#FF000000" />
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Brush="#FFFFFF00"
Geometry="F1 M 16.8731,14.9035L 11.9668,16.2498L 8.58953,12.5761L 8.25831,17.6042L 3.62852,19.7405L 8.33013,21.5017L 8.84603,26.4958L 12.083,22.5562L 17.0316,23.5064L 14.3306,19.3103L 16.8731,14.9035 Z ">
<GeometryDrawing.Pen>
<Pen LineJoin="Round"
Brush="#FF000000" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="TestThinLineImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#00FFFFFF"
Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " />
<GeometryDrawing Geometry="F1 M 2,2L 30,2L 30,30L 2,30L 2,2 Z ">
<GeometryDrawing.Pen>
<Pen LineJoin="Round"
Brush="#FF000000" />
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Geometry="F1 M 7,8L 25,8L 25,24L 7,24L 7,8 Z ">
<GeometryDrawing.Pen>
<Pen LineJoin="Round"
Brush="#FFFF0000" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>
<Grid>
<!-- Menu with image -->
<Menu HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<MenuItem Header="Hello">
<MenuItem Header="World">
<MenuItem.Icon>
<Image Source="{StaticResource TestImage}" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<!-- Small standard image -->
<Button HorizontalAlignment="Left"
Margin="12,66,0,0"
VerticalAlignment="Top"
Width="142"
Height="43">
<StackPanel Orientation="Horizontal">
<Image x:Name="imageSmall"
Source="{StaticResource TestImage}"
Height="32"
Width="32" />
<Label VerticalAlignment="Center"
Content="Small image" />
</StackPanel>
</Button>
<!-- Large standard image -->
<Button HorizontalAlignment="Left"
Margin="12,149,0,0"
VerticalAlignment="Top"
Width="142"
Height="75">
<StackPanel Orientation="Horizontal">
<Image x:Name="imageLarge"
Source="{StaticResource TestImage}"
Height="64"
Width="64">
</Image>
<Label VerticalAlignment="Center"
Content="Large image" />
</StackPanel>
</Button>
<!-- Small image with thin line with antialising enabled - looks bad! -->
<Button HorizontalAlignment="Left"
Margin="180,67,0,0"
VerticalAlignment="Top"
Width="177"
Height="43">
<StackPanel Orientation="Horizontal">
<Image x:Name="imageSmall1"
Source="{StaticResource TestThinLineImage}"
Height="32"
Width="32" />
<Label VerticalAlignment="Center"
Content="Small thin anti alias" />
</StackPanel>
</Button>
<!-- Large image with thin line with antialising enabled - looks bad! -->
<Button HorizontalAlignment="Left"
Margin="180,149,0,0"
VerticalAlignment="Top"
Width="177"
Height="75">
<StackPanel Orientation="Horizontal">
<Image Source="{StaticResource TestThinLineImage}"
Height="64"
Width="64">
</Image>
<Label VerticalAlignment="Center"
Content="Large thin anti alias" />
</StackPanel>
</Button>
<!-- Small image with thin line with antialising disabled - looks OK! -->
<Button HorizontalAlignment="Left"
Margin="391,67,0,0"
VerticalAlignment="Top"
Width="177"
Height="43">
<StackPanel Orientation="Horizontal">
<Image SnapsToDevicePixels="True"
RenderOptions.EdgeMode="Aliased"
Source="{StaticResource TestThinLineImage}"
Height="32"
Width="32" />
<Label VerticalAlignment="Center"
Content="Small thin alias" />
</StackPanel>
</Button>
<!-- Large image with thin line with antialising disabled - looks OK! -->
<Button HorizontalAlignment="Left"
SnapsToDevicePixels="True"
RenderOptions.EdgeMode="Aliased"
Margin="391,149,0,0"
VerticalAlignment="Top"
Width="177"
Height="75">
<StackPanel Orientation="Horizontal">
<Image Source="{StaticResource TestThinLineImage}"
Height="64"
Width="64" />
<Label VerticalAlignment="Center"
Content="Large thin alias" />
</StackPanel>
</Button>
</Grid>
答案 1 :(得分：2)
如果你有VS2013，你应该有混合。如果没有，您可以通过修改Studio安装并选中复选框，从添加/删除程序添加它。
一旦你有Blend，你可以使用它提供的稍微过于基本的工具来构建矢量图像;但更有用的是它能够导入Adobe Illustrator文件。这仍然是基准的矢量图形应用程序。如果你有一个设计师来构建资产，或者有自己的技能，那就太棒了。
如果你需要Blend的基础知识和全能的Illustrator之间的东西，Expression Design是一个不错的选择（正如@pek已经提到的那样）。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？