WPF如何使用.psd矢量图文件

在做WPF应用程序的时候，我们常常会使用矢量图片，因为如果使用普通图片再不同分辨率显示效果模糊或者变形。

应用的场景：如自定义按钮、自定义控件、图标等等。

WPF不能直接使用那些矢量图片，但是WPF给我们提供的控件 System.Windows.Shapes.Path有一个Data(MSDN解释： 获取或设置用于指定所要绘制的形状的 Geometry)属性可以显示图形，我们的矢量图也是由绘制的路径生成的，那么将矢量图里面路径拿出来赋值给Data属性不就可以使用了么。
我用过的的矢量图文件有PSD格式和SVG格式，本文主要讲如何拿到PSD里面路径。

1. 首先你需要得到一个能使用的psd文件。
   

2. 下载安装Microsoft Expression Design 4，可百度自行下载安装。

3. 安装好后双击打开，你会看到如下界面：

4. 将准备好的psd文件导入或直接拖进去，兼容性图片选项不要勾选，直接确定

5. 导入成功之后选中你需要导出的图片，在菜单编辑中找到复制XAML，这样路径就已经复制到你的剪切板上了!

6. 复制成功的话，新建个文档之类的文件粘贴进去，我这里粘贴到了TXT文件内，找到Path标签，将里面Data值复制到你的Path控件Data属性上就可以使用了。

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="下载" Width="53.3333" Height="53.3333" Canvas.Left="0" Canvas.Top="0">
	<Image x:Name="背景" Source="SKXaml2_files/image0.png" Width="40" Height="40" Canvas.Left="0" Canvas.Top="0">
		<Image.RenderTransform>
			<TransformGroup>
				<MatrixTransform Matrix="1.33333,0,0,1.33333,0,-1.27157e-006"/>
			</TransformGroup>
		</Image.RenderTransform>
	</Image>
	<Path x:Name="形状_5" Width="47.9935" Height="47.9827" Canvas.Left="2.70011" Canvas.Top="2.70171" Stretch="Fill" Fill="#FF0F1011" Data="F1 M 25.6164,36.7848L 14.8051,25.9529C 14.2082,25.355 14.2082,24.3863 14.8051,23.7884C 15.4019,23.1905 16.3692,23.1905 16.966,23.7884L 25.1689,32.007L 25.1689,4.23246C 25.1689,3.38626 25.8523,2.70171 26.697,2.70171C 27.5414,2.70171 28.225,3.38626 28.225,4.23246L 28.225,32.007L 36.4276,23.7884C 37.0245,23.1905 37.9918,23.1905 38.5886,23.7884C 39.1855,24.3863 39.1855,25.355 38.5886,25.9529L 27.7773,36.7848C 27.4907,37.072 27.1028,37.2333 26.697,37.2333C 26.2908,37.2333 25.903,37.072 25.6164,36.7848 Z M 49.1655,31.8488C 50.0102,31.8488 50.6936,32.5333 50.6936,33.3795L 50.6936,46.4748C 50.6936,48.7948 48.8089,50.6844 46.4929,50.6844L 6.90073,50.6844C 4.58481,50.6844 2.70011,48.7948 2.70011,46.4748L 2.70011,33.3795C 2.70011,32.5333 3.38345,31.8488 4.22817,31.8488C 5.07287,31.8488 5.75622,32.5333 5.75622,33.3795L 5.75622,46.4748C 5.75622,47.1085 6.26964,47.6229 6.90073,47.6229L 46.4929,47.6229C 47.124,47.6229 47.6374,47.1085 47.6374,46.4748L 47.6375,33.3795C 47.6375,32.5333 48.3208,31.8488 49.1655,31.8488 Z "/>
</Canvas>

7.复制后就可以再我们项目上直接使用了：

 <Path   Width="9" Height="9" Stretch="Fill" VerticalAlignment="Center"  Margin="0,0,0,0" Fill="Red" Data="F1 M 25.6164,36.7848L 14.8051,25.9529C 14.2082,25.355 14.2082,24.3863 14.8051,23.7884C 15.4019,23.1905 16.3692,23.1905 16.966,23.7884L 25.1689,32.007L 25.1689,4.23246C 25.1689,3.38626 25.8523,2.70171 26.697,2.70171C 27.5414,2.70171 28.225,3.38626 28.225,4.23246L 28.225,32.007L 36.4276,23.7884C 37.0245,23.1905 37.9918,23.1905 38.5886,23.7884C 39.1855,24.3863 39.1855,25.355 38.5886,25.9529L 27.7773,36.7848C 27.4907,37.072 27.1028,37.2333 26.697,37.2333C 26.2908,37.2333 25.903,37.072 25.6164,36.7848 Z M 49.1655,31.8488C 50.0102,31.8488 50.6936,32.5333 50.6936,33.3795L 50.6936,46.4748C 50.6936,48.7948 48.8089,50.6844 46.4929,50.6844L 6.90073,50.6844C 4.58481,50.6844 2.70011,48.7948 2.70011,46.4748L 2.70011,33.3795C 2.70011,32.5333 3.38345,31.8488 4.22817,31.8488C 5.07287,31.8488 5.75622,32.5333 5.75622,33.3795L 5.75622,46.4748C 5.75622,47.1085 6.26964,47.6229 6.90073,47.6229L 46.4929,47.6229C 47.124,47.6229 47.6374,47.1085 47.6374,46.4748L 47.6375,33.3795C 47.6375,32.5333 48.3208,31.8488 49.1655,31.8488 Z"/>

注意：为了显示友好建议设置Stretch=“Fill”