How to use vector XAML files?

Question

I have 93 SVG files which I converted to XAML using XamlTune and following these instructions. The resulting files place the vector information into a Canvas.

I know need to how to use these files in my application. Do I need to put these into a ResourceDictionary, or can I access them directly from the app package?

An example XAML file:

<Canvas Name="Layer_1" Width="20" Height="20" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"><Canvas><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M4.3,0.025C3.776,0.025,3.35,0.451,3.35,0.975L3.35,4.775C3.35,5.299 3.776,5.725 4.3,5.725 4.824,5.725 5.25,5.299 5.25,4.775L5.25,0.975C5.25,0.451,4.824,0.025,4.3,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M15.7,0.025C15.176,0.025,14.75,0.451,14.75,0.975L14.75,4.775C14.75,5.299 15.176,5.725 15.7,5.725 16.224,5.725 16.65,5.299 16.65,4.775L16.65,0.975C16.65,0.451,16.224,0.025,15.7,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M18.55,3.35L17.6,3.35 17.6,4.775C17.6,5.82 16.745,6.675 15.7,6.675 14.655,6.675 13.8,5.82 13.8,4.775L13.8,3.35 6.2,3.35 6.2,4.775C6.2,5.82 5.345,6.675 4.3,6.675 3.255,6.675 2.4,5.82 2.4,4.775L2.4,3.35 1.45,3.35C0.926,3.35,0.5,3.776,0.5,4.3L0.5,7.15 0.5,8.575 1.925,8.575 18.075,8.575 19.5,8.575 19.5,7.15 19.5,4.3C19.5,3.776,19.074,3.35,18.55,3.35z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M0.5,9.525L0.5,19.025C0.5,19.549,0.926,19.975,1.45,19.975L18.55,19.975C19.074,19.975,19.5,19.549,19.5,19.025L19.5,9.525 0.5,9.525z M17.6,18.075L2.4,18.075 2.4,11.425 17.6,11.425 17.6,18.075z" /></Path.Data></Path></Canvas></Canvas>

Answer 1

I suppose I understand what you are asking. Let's start that using them in a ResourceDictionary is perfectly fine, and might be ideal. The second, most obvious use, would be to put them in a UserControl. Both options would allow you to reuse them however you want.

Let's pretend I had a Canvas and I wanted to do just that.

<Canvas Height="100" Width="100" Background="Blue" />

Now, to use a ResourceDictionary, I would do this:

<Grid>
    <Grid.Resources>
        <DataTemplate x:Name="MyShape">
            <Canvas Height="100" Width="100" Background="Red" />
        </DataTemplate>
    </Grid.Resources>
    <ContentPresenter Content="{x:Null}" ContentTemplate="{StaticResource MyShape}" />
</Grid>

Note you can remove this from Resources and move it to a file if you like.

And, if you want a user control which gives you advantage of code-behind, you can do that, too.

Best of luck.