Using XAML vector graphics in WPF application

Question

I have a vector image that I've defined in XAML. What is the proper way to use this resource in a WPF application?

I want to have the vector image in its own XAML file, and then add the image to other UserControls in my application. What should be the top-level element in my XAML vector image? How do I refer to that image in other UserControls?

Answer 1

http://learnwpf.com/post/2006/06/04/How-do-I-Include-Vector-Based-Image-Resources-in-my-WPF-Application.aspx explains how to do it.

<ContentControl Template="{StaticResource Credit-Card}" />

Answer 2

It is extremely difficult to use vector graphics in a reusable way in WPF and Silverlight.

These two StackOverflow questions discuss some of the options available:

XAML Icons - How to use?

WPF What is the correct way of using SVG files as icons in WPF

After reading through these questions and answers, I think the best solution is to stick with with a bitmap/raster format like PNG until Microsoft decides to support SVG.

Answer 3

Here's how to do it in a reusable style-able way:

https://github.com/alansingfield/VectorIcon/blob/master/README.md

 <Style x:Key="CarIcon" 
        TargetType="local:VectorIcon">
    <Style.Setters>
      <Setter Property="Geometry">
        <Setter.Value>
          <PathGeometry Figures="M18,18H6V6H18M18,4H6A2,2 0 0,0 4,6V18A2,2 0 0,0 6,20H18A2,2 0 0,0 20,18V6C20,4.89 19.1,4 18,4Z" />
        </Setter.Value>
      </Setter>
    </Style.Setters>
  </Style>


<local:VectorIcon Style="{StaticResource CarIcon}" Foreground="Green"/>