Vector image as reusable XAML fragment

Question

I want to reuse some XAML fragment as image in some WPF application/library.

The background of the problem is following:

It\'s easy to reuse a bitmap image i

Answer 1

You can add the x:Shared attribute to the Path Resource and use it as a StaticResource. This will work if "MyVectorImage" changes to something else

Update
Probably better to use a ContentControl or similar to be able to add Properties, such as Margin etc.

<Window.Resources>
    <Path x:Key="MyVectorImage"
          x:Shared="False"
          Stroke="DarkGoldenRod"
          StrokeThickness="3"
          Data="M 10,20 C 10,25 40,35 40,17 H 28"
          Stretch="Fill"
          Width="100"
          Height="40"/>
</Window.Resources>
<StackPanel>
    <ContentControl Margin="10" Content="{StaticResource MyVectorImage}"/>
    <ContentControl Margin="10" Content="{StaticResource MyVectorImage}"/>
</StackPanel>

Example. You replace "MyVectorImage" with a StackPanel containing two Paths.

<Window.Resources>
    <StackPanel x:Key="MyVectorImage"
                x:Shared="False">
        <Path Stroke="DarkGoldenRod"
              StrokeThickness="3"
              Data="M 10,20 C 10,25 40,35 40,17 H 28"
              Stretch="Fill"
              Width="100"
              Height="40"/>
        <Path Stroke="DarkGoldenRod"
              StrokeThickness="3"
              Data="M 10,20 C 10,25 40,35 40,17 H 28"
              Stretch="Fill"
              Width="100"
              Height="40"/>
    </StackPanel>
</Window.Resources>

Answer 2

After some research, there is one more option: using a DrawingImage as Source for an image. The customary image source is a BitmapSource, however it can be "vector graphics" as well.

Here is an example:

<Image>
  <Image.Source>
    <DrawingImage PresentationOptions:Freeze="True">
      <DrawingImage.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
              <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Brush>
            <LinearGradientBrush>
              <GradientStop Offset="0.0" Color="Blue" />
              <GradientStop Offset="1.0" Color="#CCCCFF" />
            </LinearGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Pen>
            <Pen Thickness="10" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

produces such a nice vector image:

Yet another option might be using a DrawingBrush, like in this SO question: How to store and retrieve multiple shapes in XAML/WPF?.

Answer 3

You can store the path in a resource dictionary and set x:Shared to false:

<Path x:Key="CrossPath"
      x:Shared="false"
      ...
      />

This will tell WPF to create a new instance every time it is requested. http://msdn.microsoft.com/en-us/library/aa970778.aspx