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

时间:2012-11-08 15:33:31

标签: wpf xaml vector

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

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

3 个答案:

答案 0 :(得分:11)

就个人而言,如果您正在谈论在多个地方使用它,而不必每次都重复使用/重新绘制您的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}"/>

答案 1 :(得分:10)

使用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"/>

这是所有三个结果:

enter image description here

答案 2 :(得分:2)

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

编辑:我可能没有理解你的问题,你可能会更好地与Chris W.回答;)