05 January 2011

XAML - Convert SVG to XAML and use as a resource on a button

I wanted to use some nice icons in SVG format in Silverlight.
Silverlight doesn't support SVG though.
So I found a tool that can convert them to XAML.
It's a command line tool that can be used as follows:

svg2xaml D:\Projects\ArrowUp.svg

To make it valid I had to tweak the result a bit.
One thing was to remove the PathGeometry's and put their data directly in the Path's.
Then I surrounded it with:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                   xmlns:toolkit="clr-namespace:System.Windows.Controls;
                                  assembly=System.Windows.Controls.Toolkit">
  <Style x:Key="ArrowUp" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <toolkit:Viewbox Stretch="Uniform">
            <!-- The XAML -->
          </toolkit:Viewbox>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

put it's build action to "Content" and included it with:

<this:frmBase.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Images/ArrowDown.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</this:frmBase.Resources>

Then I used the resource as follows:

<Button Style="{StaticResource MenuButton}">
  <Button.Content>
    <Button Style="{StaticResource ArrowDown}" Click="Button_Click" />
  </Button.Content>
</Button>

where "MenuButton" is another global style resource with a custom template containing a ContentPresenter.

No comments:

Post a Comment