如何为WPF创建矢量图像

Question

我想在我的WPF应用程序（用于按钮和菜单）中使用矢量图像。我怎么做？我应该使用哪些工具？有人可以展示我的完整示例吗？

Answer 1

工具来创建XAML矢量图像

也许是最好的应用程序来创建XAML矢量图形是微软Expression设计。这是一个免费的工具，可以从http://www.microsoft.com/expression/eng/

下载当您安装Expression Design时，启动它并选择编辑 - >选项 - >剪贴板（XAML）。更改剪贴板格式至XAML WPF资源字典。也可以通过组改为文档（否则每个图层都是图像）。

在Expression Design中编辑图像。完成后，选择所有内容并打开编辑菜单，然后选择复制XAML。将其粘贴到适当的XAML文件中。你在下面的例子中看到它应该是什么样子。需要注意的一点是，您需要将DrawingImage标记更改为DrawingBrush。

当您绘制图像时，将文档大小设置为您的WPF应用程序所需的大小（如32x32像素）。这不是必要的，而是让工作更轻松。在将图像复制到XAML之前，您可能需要制作一个与文档大小相同的透明矩形（否则边距可能会错误）。如果您正在使用Inkscape中

Inkscape中有支持XAML生成，文件

<GeometryDrawing Brush="#00FFFFFF" Geometry="M 0,0L 32,0L 32,32L 0,32L 0,0 Z " /> 

：或者你也可以手动在绘图一群孩子补充这一点。但是 - 这可能不是你想要的格式！ WPF有两种不同的方式来处理XAML中的图形 - 形状和几何图形。你可以在这里找到更多细节：http://www.intertech.com/Blog/WPF-Shapes-vs-WPF-Geometries/。

但总而言之形状支持输入，而几何图形只是纯粹的绘图，因此更轻量化。

Inkscape以shape-format生成文件，这对于某些情况非常有用，但不适用于按钮和类似应用的图像。所以你想要的是让你的图像进入Expression Design。你可以做到这一点的保存图像作为PDF -file，文件扩展名更改为AI，然后在Expression Design中使用文件，导入Adobe Illustrator文件。使用EPS是另一种选择。

大多数东西都可以导入到Expression Design中。但它可能是一些与边界有关的问题。当你得到你想要的表达设计时，最好在那里做所有的工作。如果需要，你可以将你的图像导出到SVG中，这个SVG可以在Inkscape中使用，通常没有任何问题。

例

当你已经创建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> 

Answer 2

如果你有VS2013，你应该有混合。如果没有，您可以从添加/删除程序中添加它，方法是修改Studio安装并选中该框。

一旦你有Blend，你可以使用它提供的稍微基本的工具来构建矢量图像;但更有用的是它能够导入Adobe Illustrator文件。这仍然是基准矢量图形应用程序的工作。如果您有设计师构建资产或拥有自己的技能，这非常棒。

如果您需要Blend的基础知识和全唱歌Illustrator之间的东西，表达式设计是一个足够体面的选项（正如@pek已经提到）。