在 WPF 中使用矢量图像的最佳方法是什么？答案

【问题标题】：Best way to use a vector image in WPF?在 WPF 中使用矢量图像的最佳方法是什么？
【发布时间】：2012-11-08 15:33:30
【问题描述】：

我正在寻找一种在 XAML 中处理矢量文件（EPS 或 SVG）的好方法。我找到了一个插件，可以将图像从 Illustrator 导出到 XAML ，如果我将文件的内容复制到我的窗口，它会很好地工作。

但是，是否可以将 xaml 输出用作资源或其他东西，并从给定的 XAML 窗口示例中导入/转换它？

我正在使用的工具：Adobe Illustrator to Xaml。

【问题讨论】：

你看过XamlReader吗？
了解如何处理XAML Resources。

标签： wpf xaml vector

【解决方案1】：

就个人而言，如果您要在多个地方使用它，而不必每次都重复使用/重新绘制您的 xaml 路径。然后我只是将它们放入 ContentControl 中；

<!-- Plop this in your resource dictionary or your resource declaration -->
    <Style x:Key="TheAwesomeXAMLimage" TargetType="ContentControl">
            <!-- Add additional Setters Here -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">

                                <!-- Just Paste your XAML here -->

                </ControlTemplate>
            </Setter.Value>
        </Setter>                      
    </Style>

<!-- Now actually place it on your view -->
    <ContentControl Style="{StaticResource TheAwesomeXAMLimage}"/>

【讨论】：

不错！但是为什么你使用 ContentControl 而不是简单的 Control 呢？
解释一下。不知道你的意思。
那么您不使用 Content 属性对吗？那么，当您仅使用 ControlTemplate 时， Control 还不够吗？ :)
ContentControl 实际上是从 Control 继承而来的，它只是添加了一个与任何类型的 CLR 对象兼容的内容属性。只要它不会导致重新绘制形状并在没有其他要求的情况下执行相同的目的，那么 Control 也可以正常工作。
完美运行，正是我想要的。谢谢！

【解决方案2】：

使用DrawingImage，作为您的容器，它被设计成这样的包装器：

<MyWindow.Resources>
     <DrawingImage x:Key="diUndo">
         <DrawingImage.Drawing>
             <DrawingGroup>
                 <GeometryDrawing Brush="#FF22BAFD" Geometry="..."/>
             </DrawingGroup>
         </DrawingImage.Drawing>
     </DrawingImage> 
</MyWindow.Resources>

然后像这样重用它：

<Image Source="{DynamicResource diUndo}" />

但它永远是那个颜色.....

或指定颜色

将矢量设为样式，然后在目标处动态更改（它是矢量而不是静态图像对吗？），然后在使用时指定填充颜色：

 <MyWindow.Resources>
        <Path x:Key="vRedo"
              Data="F1M14.4401,25.5039C15.5755,22.9375 17.1667,20.5703 19.2162,18.5239 23.5781,14.1587 29.3828,11.7539 35.5573,11.7539 41.7344,11.7539 47.5365,14.1587 51.8984,18.5239 56.263,22.8879 58.6667,28.6899 58.6667,34.8645 58.6667,41.0391 56.263,46.8411 51.8984,51.2056 51.2031,51.8997 50.2917,52.2461 49.3828,52.2461 48.474,52.2461 47.5599,51.8997 46.8646,51.2056 45.4818,49.8164 45.4818,47.5664 46.8698,46.177 49.8932,43.1563 51.5573,39.1392 51.5573,34.8645 51.5573,30.5911 49.8932,26.5728 46.8646,23.552 43.849,20.5273 39.8307,18.8645 35.5573,18.8645 31.2813,18.8645 27.2656,20.5273 24.2448,23.552 22.0052,25.7915 20.5182,28.5845 19.8932,31.6184L27.5573,40.1992 5.33334,40.1992 7.10938,17.2969 14.4401,25.5039z" />
        <Style x:Key="ModifiablePathStyle"
               TargetType="{x:Type Path}">
            <Setter Property="Stretch"
                    Value="Uniform" />
            <Setter Property="Data"
                    Value="{Binding Data, Source={StaticResource vRedo}}" />
        </Style>
 </MyWindow.Resources>

这是它的用法：

<Path Style="{StaticResource ModifiablePathStyle}" Fill="Blue"/>
<Path Style="{StaticResource ModifiablePathStyle}" Fill="Red"/>
<Path Style="{StaticResource ModifiablePathStyle}" Fill="Green"/>

这是所有三个的结果：

我发现一个很好的矢量图标来源（带有 Xaml 剪切/粘贴版本可供下载）可以在 Material Design Icons

找到

【讨论】：

这个答案太好了，它重塑了我的应用程序。

【解决方案3】：

如果您不反对使用第 3 方工具，请考虑查看 SharpVectors。它在 SVG 方面做得很好：解析、XAML 转换、显示等。

编辑：我可能不明白你的问题，你可能会更好地回答 Chris W. ;)

【讨论】：