Bind xaml vector images dynamically

Question

I'm looking for a way to bind xaml images dynamically in code.

There are lots of examples online to show how to bind png or xaml images in the window's xaml, or to load png files in code.

But I have found no examples for xaml files with build action=page. XmlReader can't handle them since they are compiled to baml.

LoadComponent(new Uri("...filename.baml") will apparently load the baml but what kind of image class do I load this into? BitmapImage(new Uri("...filename.baml") does not seem to work, probably because it's not a bitmap.

Thanks in advance.

Carl · Answer 1 · 2011-03-17T11:16:24.263

Additionally, if your image is stored in a Xaml vector file in this kind of format:

You can load the individual xaml vector images in the following way (it is probably best to prevent the dictionary being added multiple times, if like me, you are loading it via an OpenFileDialog):

C#:

string fullPathAndFileName = "C:\Image_Name.xaml"; ResourceDictionary dict = new ResourceDictionary(); dict.Source = new Uri(fullPathAndFileName); Application.Current.Resources.MergedDictionaries.Add(dict);

DrawingImage image = dict[dict.Keys.Cast().ToList()[0]] as DrawingImage; myImage.Source = image;

Xml:

Image Height="200" Width="200" x:Name="myImage"

score 0 · Answer 2 · edited May 23 '17 at 12:22

After much trial and error and searching, the following article helped me on my way: Access ResourceDictionary items programmatically

If each Xaml vector image is contained inside a ResourceDictionary with a key (see my 2nd post below for the format)...

If your Xaml vector image files are all stored in your project (build action: page), you can load them in the following way:

//Get the ResourceDictionary using the xaml filename:
ResourceDictionary dict = System.Windows.Application.LoadComponent(new Uri("/yourprojectname;component/youriconfolder/youriconfilename.xaml", System.UriKind.Relative)) as ResourceDictionary;

//Get the xaml as a DrawingImage out the ResourceDictionary 
DrawingImage image = dict[dict.Keys.Cast<object>().ToList()[0]] as DrawingImage;

I could return the image and bind it to the viewmodel property, which returns the iconfilename.xaml. Then I use a converter with the above code to lookup the icon and return it as a DrawingImage. Or you can assign it as the source of an Image (see my 2nd post below).

UPDATE: 2015.10.08 - It seems Carl didn't get around to the "XAML format example" part of his post. The XAML would look something like this:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DrawingImage x:Key="SomeUniqueKey">
    <DrawingImage.Drawing>
        <DrawingGroup>
            ...
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>
</ResourceDictionary>

Then you could do:

DrawingImage image = dict["SomeUniqueKey"] as DrawingImage;

Or, if you prefer using the Image directly,

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image x:Key="SomeUniqueImage">
    <Image.Source>
        <DrawingImage>
            ...
        </DrawingImage>
    </Image.Source>
</Image>
</ResourceDictionary>

And:

Image someImage = dict["SomeUniqueImage"] as Image;

Bind xaml vector images dynamically

2 Answers2