Binding image source through property in wpf

Question

I am trying to display an icon using an image source(.jpg). I create a Icon property in view model and try to assign it the path of the image but I do not see any image in the view. I tried converting the path to Bitmap image but doesn't work. Is there anything I am missing here?

<StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Path=Name}"/>
                                <Image Source="{Binding Path=Icon}"></Image>
                            </StackPanel>




BitmapImage img = new BitmapImage();
                    img.BeginInit();
                    img.CacheOption = BitmapCacheOption.OnLoad;
                    img.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
                    img.UriSource = new Uri("C:\\Users\\Public\\Pictures\\Sample Pictures\\Chrysanthemum.jpg", UriKind.Absolute);
                    img.EndInit();
                    Icon = img;

Have you got an example of the Uri you should have in the Icon property? Is the image an embedded resource, or a loose file, or on the web? — slugster, Jan 16 '13 at 12:33
Its just a .jpg image created by me. The image is stored on my desktop. And I am trying to bind it to Icon property. — Virus, Jan 16 '13 at 12:41
If it's a valid absolute path it should work out of the box. Anyway, i'd suggest to follow the solution given by Deruijter in his answer. — Clemens, Jan 16 '13 at 13:01

score 21 · Accepted Answer · answered Jan 16 '13 at 12:46

21

I ran into this myself once and, though maybe not the best solution, the following worked for me.

1. Add the images to your project, for example:

Create a folder images/icons to your project and add the images there.
Set build action of images to Content (copy if newer)

2. Create an ImageSource property:

    public ImageSource YourImage
    {
        get { return _yourImage; }
        set 
        { 
            _yourImage = value;
            NotifyOfPropertyChange(() => YourImage);
        }
    }

(Note: I use caliburn micro to assist in binding)

3. Update the the ImageSource like this:

            if(!string.IsNullOrEmpty("TheImageYouWantToShow"))
            {
                var yourImage = new BitmapImage(new Uri(String.Format("Images/Icons/{0}.jpg", TheImageYouWantToShow), UriKind.Relative));
                yourImage.Freeze(); // -> to prevent error: "Must create DependencySource on same Thread as the DependencyObject"
                YourImage = yourImage;
            }
            else
            {
                YourImage = null;   
            }

4. Bind source attribute to YourImage property:

(you already did this)

answered Jan 16 '13 at 12:46

Deruijter

2,077
16
27

1

You could also consider using a converter to create the ImageSource from a path. – slugster Jan 16 '13 at 12:48
Is it mandatory that we have to add this image to the solution? and I am trying to do this from viewmodel, is that ok? – Virus Jan 16 '13 at 12:51
1

@slugster indeed but it will add some extra overhead. It's a good alternative but I'm personally not very fond of converters. – Deruijter Jan 16 '13 at 12:55
@Virus No, you can basically retrieve images however you like. Try to play around with the new Uri method and see what it can do for you. You could also take it a little further create an ImageHandler class that does these sorts of things for you. Then to update your `ImageSource` you could, for example, just say `YourImage = ImageHandler.Get("icon", "TheImageYouWantToShow");` – Deruijter Jan 16 '13 at 12:58
I am following this thing, but I still cannot see the image in my view. Also, the Icon return type is ImageSource in my code and the metadata shows "not supported" exception. – Virus Jan 16 '13 at 13:09
Strange, does the image work when putting the absolute path to it directly in the source attribute? Could you otherwise post some additional code from your viewmodel? EDIT: You could also try to set the property of YourImage to `BitmapImage` instead of `ImageSource`. I'm not exactly sure what could be the issue so I'm just throwing some suggestions out there :) – Deruijter Jan 16 '13 at 13:44
You can also use a debug converter to check what the value of the bound image source is: http://www.codeproject.com/Articles/244107/Debugging-WPF-data-bindings – Deruijter Jan 16 '13 at 14:12
Works on runtime. Unfortunately does not shows up in designer. – C4d Jul 07 '16 at 13:57

Binding image source through property in wpf

1 Answers1

Linked