22

I am looking for a good method to handle a vector files (EPS or SVG) in a XAML. I found a plugin that exports an image from Illustrator to a XAML , and it works well if I copy the content of the file to my window.

But, is it possible to use the xaml output instead as a resource or something, and import/convert it from the given XAML window example?

Tool I am using: Adobe Illustrator to Xaml.

ΩmegaMan
  • 29,542
  • 12
  • 100
  • 122
  • Have you looked at [XamlReader](http://msdn.microsoft.com/en-us/library/system.windows.markup.xamlreader.aspx)? – Clemens Nov 08 '12 at 15:43
  • And read about how to handle [XAML Resources](http://msdn.microsoft.com/en-us/library/ms750613.aspx). – Clemens Nov 08 '12 at 15:46

3 Answers3

16

Use a DrawingImage, as your container which is designed to be such a wrapper:

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

Then reuse it as such:

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

but it will always be that color.....

Or Specify a Color

Make the vector a style and then change it up dynamically at the target (its a vector and not a static image right?), Then specify a fill color when used:

 <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>

Here is its usage:

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

Here is the result of all three:

enter image description here

I have found that a good source of vector icons (with a Xaml cut/paste versions to download) can be found at Material Design Icons

ΩmegaMan
  • 29,542
  • 12
  • 100
  • 122
15

Personally, if you're talking about using it in multiple places without having to re-use / re-draw your xaml paths each time. Then I just plop them in a ContentControl like;

<!-- 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}"/>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • Nice ! but why do you use a ContentControl instead of a simple Control ? – Sisyphe Nov 08 '12 at 16:27
  • Explain. Not sure what you mean. – Chris W. Nov 08 '12 at 16:38
  • Well you don't use the Content property right ? So wouldnt a Control be enough as you just use the ControlTemplate ? :) – Sisyphe Nov 08 '12 at 16:41
  • ContentControl actually inherits from Control it just adds a content property with compatibility for any type of CLR object. As long its not causing the re-drawing of shapes and performing the same purpose without other requirements then Control works just as well. – Chris W. Nov 08 '12 at 16:53
2

If you are not against the use of 3rd party tools, considere having a look at SharpVectors. It's doing a great job with SVG : Parsing, XAML conversion, displaying, etc.

Edit : I may have not understood your question, you may be better with Chris W. answer ;)

Sisyphe
  • 4,626
  • 1
  • 25
  • 39