在WPF中使用矢量图像的最佳方法？

Question

我正在寻找一种在XAML中添加矢量文件(EPS或SVG)的好方法.我找到了一个插件,可以将Illustrator中的图像导出到XAML文件中,比方说MyImage.xaml,如果我在我的窗口的XAML文件中复制文件的内容,它就可以正常工作(插件链接:http://www.mikeswanson .com/XAMLExport /).

但是我相信存在更好的方法.例如,可以将MyImage.xaml用作资源或其他东西,并将其导入描述窗口的XAML中吗？

Answer 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}"/>

Answer 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"/>

以下是这三个结果: