实施例

Question

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

Answer 1

创建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％是一种看起来相当不错的方法。转换灰度比较难，但也有解决方案。

Sample of vector images in a WPF application

<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之间的东西，Expression Design是一个不错的选择（正如@pek已经提到的那样）。

如何为WPF创建矢量图像

2 个答案:

创建XAML矢量图像的工具

如果您使用的是Inkscape

实施例