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?

See also: http://stackoverflow.com/questions/1107334/using-a-xaml-file-as-a-vector-image-source — Roman Starkov, Mar 26 '12 at 21:57

Lars Truijens · Accepted Answer · 2011-02-18T23:53:32.970

8

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

edited Feb 18 '11 at 23:53

answered Jun 17 '09 at 14:54

Lars Truijens

42,837
6
126
143

1

No explanation here (which is supposed to be an answer site), and several links in the link are dead. Downvote, sorry. – DefenestrationDay Mar 10 '21 at 13:28

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

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.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 18 '11 at 20:08

dthrasher

40,656
34
113
139

1

What do you mean by "extremely difficult to use vector graphics in a reusable way"? – sourcenouveau Feb 21 '11 at 03:19
1

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. – dthrasher Feb 22 '11 at 01:18
3

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. – Lars Truijens Mar 01 '11 at 13:19
1

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.) – dthrasher Mar 01 '11 at 22:15
@dthrasher "Working with vector graphics in XAML..." is odd to say the least considering that WPF/Silverlight is based on XAML. – Jacques Apr 25 '14 at 09:39
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. – Tim Feb 16 '17 at 18:42

score 1 · Answer 3 · answered Mar 03 '20 at 11:41

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

Using XAML vector graphics in WPF application

3 Answers3