Creating vector grafics to use in XAML

Creating vector grafics to use in XAML

Scalable Vector Grafics (SVG) have a huge benefic over images and icons. As their name implies they scale depending on their size without loosing quality. You know the nice pixel images that you usually get if you scale an image. Creating and using SVGs is quite easy but you cannot use them directly within WPF. But you can create and transform SVGs with Microsofts free tool Expression Designand save it directly as XAML.

  1. When you have created you grafic you can us the Export command to save the grafic into a XAML WPF Resource Dictionary. You should use group by Document and Rasterize all.
    Export

    But often you just want to copy it via clip board. Adjust the clipboard option to make it more convenient:

    • Open the clipboard options Edit->Options->Clipboard
    • Set the format and setting as before when using the export command: Options
    • Then you can use Ctrl + Shift + C to copy the ResourceDictionary into the clipboard. Clipboard
  2. Then add the Resource Dictionary into a XAML file of you project and adjust the x:Key

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <DrawingBrush x:Key="Checked" Stretch="Uniform">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#FFC8E6C9" Geometry="F1 M 25,5.33334C 35.9536,5.33334 44.8333,14.1384 44.8333,25C 44.8333,35.8616 35.9536,44.6667 25,44.6667C 14.0464,44.6667 5.16667,35.8616 5.16667,25C 5.16667,14.1384 14.0464,5.33334 25,5.33334 Z "/>
                        <GeometryDrawing Brush="#FF4CAF50" Geometry="M 35.8776,15.4082L 38.8264,18.5053L 21.3991,35.098L 21.3823,35.0803L 21.3676,35.0943L 12.8647,26.1637L 15.9618,23.2149L 21.5327,29.0661L 35.8776,15.4082 Z "/>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </ResourceDictionary>
    
  3. Now you can use it in your XAML views. Therefor you have to add the ResourceDictionary to the resouces of the control e.g. the UserControl:

    <UserControl.Resources>
        <ResourceDictionary Source="/ResourceDictionaries/Images.xaml"/>
    </UserControl.Resources>
    

    In this case I saved the ResouceDictionary into the file Images.xaml in the folder ResouceDictionaries.

    If you want to add multiple ResouceDictionaries you have to suround them with a <MergeDictionary> tag.

  4. Now you can use your vector image e.g within a Rectangle:

    <Rectangle Width="12" Height="12" Margin="0,0,5,0" Fill="{StaticResource Checked}" />
    

Cover photo by Zack D. Smith / CC (BY)