Using a XAML file as a vector Image Source Using a XAML file as a vector Image Source wpf wpf

Using a XAML file as a vector Image Source


You can simply reference your vector graphics as StaticResources:

<Image Source="{StaticResource MyImage}" />

Store the images in a ResourceDictionary as DrawImage's. Expression Blend can help you generate this stuff:

<ResourceDictionary   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   <DrawingImage x:Key="MyImage">      <DrawingImage.Drawing>         <DrawingGroup>            <DrawingGroup.Children>               <GeometryDrawing Brush="Black" Geometry="M 333.393,... 100.327 Z "/>               <GeometryDrawing Brush="Black" Geometry="F1 M 202.309,... Z "/>                      :            </DrawingGroup.Children>         </DrawingGroup>     </DrawingImage.Drawing>   </DrawingImage></ResourceDictionary>


1) Add the DrawingImage.xaml to the project and set its properties to 'BuildAction=Content' and 'Copy Always'. Or else you can dynamically load the XAML from outside since the logic I am going to explain will work for loose-xaml also.

2) Write a Converter to convert the XAML uri to UIELement, in your case it will be always DrawingImage

public class FileToUIElementConverter :IValueConverter{    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)    {        FileStream fileStream = new FileStream((string)parameter, FileMode.Open);         return XamlReader.Load(fileStream) as DrawingImage;    }    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)    {        throw new NotImplementedException();    }}

3) Write the XAML as below

<Window.Resources>    <local:FileToUIElementConverter x:Key="uriToUIElementConverter"/></Window.Resources><Grid>    <Image Stretch="Fill" Source="{Binding Converter={StaticResource uriToUIElementConverter},ConverterParameter=ImageDrawing.xaml}"/></Grid>


Embed the XAML resource (DrawingImage) with type 'Resource'. It is then not a separate file and can be directly referenced via a URI, as in your original example -- BUT the URI is non-trivial. You have to figure out Microsoft's "pack" URI syntax and use that.