XAML Icons - How to use?

Question

I have some vector graphic files in XAML format and I would like to use them as icons/buttons in an Silverlight application. The approach I would have preferred is to use an Image control and set its source property to the .xaml file, much like I can use a regular bitmap image.

But its not that easy and I have tried to include them as ControlTemplates in resource dictionary's and I even tried to create a custom control that would load the Xaml dynamically but I wasn't really pleased with the result, since I needed to wrap them in ViewBox controls to allow dynamic size etc.

So my questions is if any one has any best practice advices how to best use my xaml icons? I could copy-paste the xaml when needed but I really dont like that approach.

Thanks in advance.

Answer 1

JWendel,

You should post some examples of your XAML icons to clarify, but any content control, like Button's and ContentControl's, have both Content, and ContentTemplate properties. A shared ContentTemplate example is shown below:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
>
    <UserControl.Resources>
        <Style x:Key="MyTriangleIcon" TargetType="ContentControl">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Polygon Fill="Black" Stroke="Black">
                                <Polygon.Points>
                                    <Point X="0" Y="100"/>
                                    <Point X="100" Y="0"/>
                                    <Point X="100" Y="100"/>
                                </Polygon.Points>
                            </Polygon>
                            <Polygon Fill="Red" Stroke="Red">
                                <Polygon.Points>
                                    <Point X="100" Y="0"/>
                                    <Point X="0" Y="100"/>
                                    <Point X="0" Y="0"/>
                                </Polygon.Points>
                            </Polygon>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <StackPanel Background="White">
        <Button Width="120" Height="120" Style="{StaticResource MyTriangleIcon}" />
        <Button Width="120" Height="120" Style="{StaticResource MyTriangleIcon}" />
    </StackPanel>

</UserControl>

You can paste the above content into my XamlViewer to quickly see the results.

Good luck,
Jim McCurdy