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?

Briannabrianne

See also: #1107834 – Prognostication

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}" />

Cloud

No explanation here (which is supposed to be an answer site), and several links in the link are dead. Downvote, sorry. – Footworn

Answer 2

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"/>

Brune

Answer 3

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.

Pudendas

What do you mean by "extremely difficult to use vector graphics in a reusable way"? – Briannabrianne

If you want to re-use the icon in several places within your application, you'll need to create a user control to encapsulate the canvas or the drawing or the path vectors. If you ever need to change the icon, you'll need to modify this control. By comparison, it's much easier to reference a PNG or BMP image file and update it as needed. – Pudendas

Replace a xaml file or replace a bmp file. I don't see much difference there. But you are right if you say there are more and possible better bmp editors as there are xaml editors. – Cloud

Perhaps "reusable" was not a good choice of words. Working with vector graphics in XAML requires several more steps than are needed when working with raster images. Unless smooth scaling is a core requirement, I don't feel it's worthwhile trade-off. (But this may change as the tools improve.) – Pudendas

@Pudendas "Working with vector graphics in XAML..." is odd to say the least considering that WPF/Silverlight is based on XAML. – Azoth

The links provided are the correct answer, but in terms of usability and difficulty, a bitmap file and a vector image file are interchangeable. There's nothing forcing you to embed vector xaml in your Window xaml. – Ashleighashlen