How to use Canvas as StaticResource all over the app?

Question

I have a bunch of icons that should be used at many different places in different sizes across a Windows Phone 8 app. Using plain graphics I would have to create each icon in each size for each supported resolution. This can become a lot of files...

Thus I would like to use vector graphics instead. Since I have all icons as PDFs / Illustrator .ai this not a problem. I used Blend to import these files and it created XAML automatically:

<Canvas x:Name="TestIcon" Height="27.985" Canvas.Left="5.506" Canvas.Top="2.007" Width="20.988">
    <Path Data="F1M26.992,... Fill="#FF376EB5" Height="27.977" Canvas.Left="0" Stretch="None" Canvas.Top="0" Width="27.993">
        <Path.Clip>
            <RectangleGeometry Rect="0,-0.001,27.992,27.977"/>
         </Path.Clip>
    </Path>
</Canvas>

The Problem: How can I use this canvas all over the app?

I added the Canvas to the Application.Resources and tried to reference it:

<!-- Version 1 -->
<Button Content="{StaticResource TestIcon} .../>

<!-- Version 2 -->
<Button ...>
    <ContentPresenter Content="{StaticResource TestIcon}" .../>
</Button>

<!-- Version 3 -->
<Button ...>
    <Canvas ..>
        <Path Data="F1M26.992,... ...>
            <Path.Clip>
                ...
             </Path.Clip>
        </Path>
    </Canvas>
</Button>

When using Version 1 or 2 everything works fine in the Designer. As soon as I run the app it crashen with an System.Windows.Markup.XamlParseException:

Failed to assign to property 'System.Windows.Controls.ContentPresenter.Content'.

Version 3 works fine both in Designer and at runtime. But of course this solution does not use any reference to the VectorGraphic but includes the Canvas directly.

Any idea how to solve this?

Answer 1

You should probably just create ControlTemplate for each of your shapes in Resources and then reuse this template anywhere in your app:

<ControlTemplate x:Key="MyIcon">
    <Canvas x:Name="TestIcon" Height="27.985" Canvas.Left="5.506" Canvas.Top="2.007" Width="20.988">
        <Path Data="F1M26.992,... Fill="#FF376EB5" Height="27.977" Canvas.Left="0" Stretch="None" Canvas.Top="0" Width="27.993">
            <Path.Clip>
                <RectangleGeometry Rect="0,-0.001,27.992,27.977"/>
             </Path.Clip>
        </Path>
    </Canvas>
</ControlTemplate>

on another place, where you want to show  it:
<ContentControl Template="{StaticResource MyIcon}"/>