如何为 WPF 创建矢量图像

How do I create vector images for WPF

提问by PEK

I want to use vector images in my WPF-application (for buttons and menus). How do I do that? Which tools should I use? Can someone show my a complete example?

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

回答by PEK

Tools to create XAML vector images

创建 XAML 矢量图像的工具

Probably the best application to create XAML vector images is Microsoft Expression Design. It's a free tool that could be downloaded from https://www.microsoft.com/en-gb/download/details.aspx?id=36180

创建 XAML 矢量图像的最佳应用程序可能是 Microsoft Expression Design。这是一个免费工具，可以从https://www.microsoft.com/en-gb/download/details.aspx?id=36180下载

When you have installed Expression Design, launch it and select Edit -> Options -> Clipboards (XAML). Change Clipboard formatto XAML WPF Resource Dictionary. Also change Group Byto Document(otherwise each layer will be an image).

安装 Expression Design 后，启动它并选择编辑 -> 选项 -> 剪贴板 (XAML)。将剪贴板格式更改为XAML WPF 资源字典。同时将Group By更改为Document（否则每个图层都将是一个图像）。

Edit your image in Expression Design. When you are done, select everything and open the Editmenu and then Copy XAML. Paste this in appropriate XAML-file. You see in the example below how it should look like. One thing to note is that you need to change DrawingImagetag to DrawingBrush.

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

When you are drawing the image set the document size to the size you want in your WPF-application (like 32x32 pixels). It not necessary but make the work easier. Before copy the image to XAML you probably want to make a transparent rectangle that has the same size as the document (otherwise the margins could be wrong). Or you could add this manually in the drawing group children:

绘制图像时，将文档大小设置为 WPF 应用程序中所需的大小（如 32x32 像素）。它没有必要，但使工作更容易。在将图像复制到 XAML 之前，您可能想要制作一个与文档大小相同的透明矩形（否则边距可能是错误的）。或者您可以在绘图组子项中手动添加：

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

If you are using Inkscape

如果您使用的是 Inkscape

Inkscape has support to generate XAML-files. However - this is probably not the format you want! WPF has two different ways to handle graphics in XAML – shapes and geometries. You can find more details about this here: http://www.intertech.com/Blog/WPF-Shapes-vs-WPF-Geometries/.

Inkscape 支持生成 XAML 文件。但是 - 这可能不是您想要的格式！WPF 有两种不同的方式来处理 XAML 中的图形——形状和几何图形。您可以在此处找到更多详细信息：http: //www.intertech.com/Blog/WPF-Shapes-vs-WPF-Geometries/。

But in short shapes has support for inputs, while geometries is just pure drawing and therefor more lightweight.

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

Inkscape generate files in shape-format, which is good for some cases but not for images that should be used in buttons and similar. So what you want is to get your images into Expression Design. You could do that by saving your image as a PDF-file, change the file extension to AIand then in Expression Design use File, Import Adobe Illustrator File. Using EPSis another option.

Inkscape 生成形状格式的文件，这对某些情况很有用，但不适用于应该在按钮和类似中使用的图像。所以你想要的是让你的图像进入 Expression Design。您可以通过将图像保存为PDF文件来实现，将文件扩展名更改为AI，然后在 Expression Design 中使用File，Import Adob​​e Illustrator File。使用EPS是另一种选择。

Most things could be imported to Expression Design. But it might be some issues with borders for instance. When you have got what you want to Expression Design it's probably better to do all the work in there. If needed you could export your images to SVG which could be used in Inkscape, that normally works without any problems.

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

Example

例子

When you have created XAML-code for the image it's then quite straight forward. Below is an example where a vector image is used on a menu and two button.

当您为图像创建了 XAML 代码后，就很简单了。下面是在菜单和两个按钮上使用矢量图像的示例。

If you want to draw a very thin line (1 pixel), you may want to add RenderOptions.EdgeMode="Aliased"and SnapsToDevicePixels="True"to the attributes to the control that is drawing the image.

如果您想绘制一条非常细的线（1 像素），您可能需要将RenderOptions.EdgeMode="Aliased"和添加SnapsToDevicePixels="True"到正在绘制图像的控件的属性。

Another thing to have in mind is what to do when a button is disabled. In the example below the image looks the same no matter if the button is enabled or not (this is true for ordinary bitmaps too). Changing the opacity to 50% is one approach that looks quite OK. Converting it grey scale is harder but there is solutions for this too.

要记住的另一件事是禁用按钮时该怎么办。在下面的示例中，无论按钮是否启用，图像看起来都一样（对于普通位图也是如此）。将不透明度更改为 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>

回答by kidshaw

If you've got VS2013, you should have Blend. If not, you can add it from Add/Remove Programs, by modifying your Studio installation and checking the box.

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

Once you've got Blend, you can build vector images using the slightly too basic tools it provides; but more useful is its ability to import Adobe Illustrator files. This is still the benchmark vector graphics application to work in. This is great if you have a designer to build the assets, or have the skills to do that yourself.

一旦你有了 Blend，你就可以使用它提供的稍微过于基本的工具来构建矢量图像；但更有用的是它能够导入 Adob​​e Illustrator 文件。这仍然是可以使用的基准矢量图形应用程序。如果您有设计师来构建资产，或者有自己的技能，那么这很棒。

If you need something between the basics of Blend and the all-singing Illustrator, Expression Design is a decent enough option (as already mentioned by @pek).

如果您需要 Blend 的基础知识和全能的 Illustrator 之间的东西，Expression Design 是一个不错的选择（正如@pek 已经提到的）。