Using Shapes as a Resource in WPF

This post covers how to re-use a collection of WPF shapes by combining them into a resource.

Start by creating the drawing using Expression Blend. This example using a combination of Ellipses, Rectangles and Paths to create the rounded triangle:

When finished, group all the shapes into a Canvas and copy the resulting XAML into a WPF project. Wrap the Canvas with a Viewbox, assign it a unique key and add it to the Window’s resources collection. Ensure the Canvas has the ideal width and height set.

Note: To make the image available to the whole application, add it to the App.xaml’s resources instead.

<Window.Resources>
    <Viewbox x:Key="VectorImage">
        <Canvas Height="50" Width="50" Background="Transparent">
            <Canvas.Children>
                <Ellipse Fill="#FFF0F0F0" Height="6.166" Stroke="#FFAAAAAA" Canvas.Left="22.999" Width="6.167"/>
                <Ellipse Fill="#FFF0F0F0" Height="6.166" Width="6.167" Stroke="#FFAAAAAA" Canvas.Top="42.333"/>
                <Ellipse Fill="#FFF0F0F0" Height="6.166" Width="6.167" Stroke="#FFAAAAAA" Canvas.Left="44.999" Canvas.Top="42.333"/>
                <Path Data="M231.81312,199.57089 L226.34383,199.60188 203.3884,240.01154 206.0133,244.59208 251.19006,244.5922 253.72181,239.8861" Fill="#FFF0F0F0" Stretch="Fill" Height="46.844" Canvas.Left="0.39" Canvas.Top="1.661" Width="50.328"/>
                <Rectangle Fill="#FFAAAAAA" Height="18" Canvas.Left="23.374" Canvas.Top="14.208" Width="4.75"/>
                <Ellipse Fill="#FFAAAAAA" Height="4.75" Canvas.Left="23.374" Canvas.Top="35.13" Width="4.75"/>
                <Path Data="M0.24272339,42.808476 L24.321594,1.4051173" Fill="#FFCECECE" Stretch="Fill" Width="24.031" Stroke="#FFAAAAAA" Height="43.391" Canvas.Left="0.249" Canvas.Top="1.411"/>
                <Path Data="M27.873623,1.3958768 L49.874253,41.754795" Fill="#FFCECECE" Stretch="Fill" Stroke="#FFAAAAAA" Width="23" Height="43.36" Canvas.Left="27.874" Canvas.Top="1.395"/>
                <Path Data="M2.4528667,46 L47.758322,46" Fill="#FFCECECE" Height="1.014" Stretch="Fill" Stroke="#FFAAAAAA" Canvas.Left="2.452" Canvas.Top="47.489" Width="46.306"/>
            </Canvas.Children>
        </Canvas>
    </Viewbox>
</Window.Resources>

Create a Grid for each instance of the drawing (the Grid size dictates the drawing size) and set the Background property to a VisualBrush. Assign the drawing to the Visual property of the VisualBrush:

<Grid Width="32" Height="32">
    <Grid.Background>
        <VisualBrush Visual="{StaticResource VectorImage}" Stretch="UniformToFill" />
    </Grid.Background>
</Grid>

The drawing can now be re-used many times within the same window (or application), at varying sizes.

Advertisements
This entry was posted in Tips and Tricks and tagged , , . Bookmark the permalink.

One Response to Using Shapes as a Resource in WPF

  1. Anas says:

    thanks 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s