binding an image source in XAML

Question

I am trying to bind an image source to my XAML through c#

this works

<Image Source="images/man.jpg"></Image>

this does not work

<Image Source="images/{Binding imagesource}"></Image>

where imagesource is a string variable in the c# file of this xaml and is being set equal to "man.jpg"

score 3 · Answer 1 · edited Sep 28 '11 at 00:26

3

You can't stick a binding mid-way through the value like that. It's either a binding, or it's not. Assuming imagesource is publicly accessible via your DataContext, you could do this:

<Image Source="{Binding imagesource}"/>

However, if it's been set to "man.jpg" then it won't find the image. Either set imagesource to the full path ("images/man.jpg") or use a converter:

<Image Source="{Binding imagesource, Converter={StaticResource RelativePathConverter}}"/>

The converter would prepend "images/" onto its value. However, it may be necessary for the converter to return an ImageSource rather than a string.

edited Sep 28 '11 at 00:26

answered Jul 29 '10 at 19:31

Kent Boogaart

175,602
35
392
393

I changed imagesource to the full path "images/man.jpg" it is still not working. What do you mean it should be publicly accessible in the DataContext? I changed its access modifier to public and made get function for it as well, still doesnt work. – nooob Jul 29 '10 at 19:45
What is your DataContext? Have you set it? Look for binding errors in Visual Studio's output window. – Kent Boogaart Jul 29 '10 at 21:22
Image.Source property is not a string, so this will not work. – Ahmad Mushtaq Apr 12 '11 at 21:41
@digitalSurgeon: hence, the last sentence in my answer. – Kent Boogaart Apr 13 '11 at 07:44

score 3 · Answer 2 · answered May 12 '11 at 09:11

here is a way how to do it in XAML:

add this to the namespace:

xmlns:System="clr-namespace:System;assembly=mscorlib"

then add your images paths

<System:String x:Key="ImageRefresh">/Theme;component/Images/icon_refresh.png</System:String>
<System:String x:Key="ImageSearch">/Theme;component/Images/icon_search.png</System:String>

This is how you use it

<Image Height="16" Source="{StaticResource ImageSearch}" Stretch="Uniform" Width="16"/>

This works ok, but if you load your xaml style in Blend it will go bogus..

An object of type "System.String" cannot be applied to a property that expects the type "System.Windows.Media.ImageSource".

I haven't figured out yet, how to replace System:String with that Media.ImageSource... but hey.. it works for me in Visual Studio.

ImageSource as a static resource works in Visual Studio 2012. — ljubomir, Jun 20 '13 at 08:23

score 1 · Answer 3 · answered Jan 05 '12 at 03:51

Images have bitten me in the past. There is a certain lookup order involved.

When you use "image/man.jpg" it could refer to a file inside your silverlight xap, or relative to the location of XAP file. For example, it could be in YourProject.Web/ClientBin/image/man.jpg.

You should troubleshoot by using full URLs first and find out if this works.

score 0 · Answer 4 · answered Jul 29 '10 at 19:24

0

imagesource needs to be an actual Image object, not a string.

Here is a method that will create a new Image object given a path:

public BitmapImage Load(string path)
{
    var uri = new Uri(path);
    return new BitmapImage(uri);
}

answered Jul 29 '10 at 19:24

devuxer

41,681
47
180
292

this does not work for some reason. My app refuses to load it just gets stuck at 100% – nooob Jul 29 '10 at 19:48
Did you try the full path or the relative path? Should be full path. Also, I know my method works in WPF...perhaps it doesn't work in Silverlight for some reason. – devuxer Jul 29 '10 at 21:01

binding an image source in XAML

4 Answers4