locked
Binding to the Source property of an Image control. RRS feed

  • Question

  • I'm trying to bind the Source property of an Image control to a ViewModel to update the image dynamically.  The images I'm using are all local project resources.  At this point I've tried creating three separate ViewModel properties and binding to each without any luck.  I've created a string property which holds the relative Uri to the image, a Uri property which holds the relative Uri and a BitmapImage property which is loaded with the relative Uri.  I've even added a converter to convert a string or Uri to a BitmapImage and each attempt has failed.  I've verified that all three properties are valid at run time in the debugger and when using the converter I can see that it does, in fact, return a valid BitmapImage.  All other bindings to the ViewModel on the page are working correctly but the Image is always empty.  What am I missing here?

    Tuesday, September 27, 2011 1:29 PM

Answers

  • Dang it all anyway.  I just discovered this has nothing to do with the code.  The issue was the images I'd added were still marked with Build Action = Resource instead of Content.  After all this time the simplest thing like that can still trip me up.  Thanks for the reply anyway.

    Tuesday, September 27, 2011 2:20 PM

All replies

  • Hi,

    Can you show a litle code?

    Tuesday, September 27, 2011 1:45 PM
  • Sure.  I honestly didn't see a lot of value in adding what is pretty vanilla MVVM code.

    Here's the three properties I've tried on the ViewModel:

    public string ImageUriString
    {
        get { return _imageUriString; }
        set
        {
            if (_imageUriString != value)
            {
                _imageUriString = value;
                OnPropertyChanged(ImageUriStringPropertyName);
            }
        }
    }
    private string _imageUriString = null;
    private const string ImageUriStringPropertyName = "ImageUriString";
    
    public Uri ImageUri
    {
        get { return _imageUri; }
        set
        {
            if (_imageUri != value)
            {
                _imageUri = value;
                OnPropertyChanged(ImageUriPropertyName);
            }
        }
    }
    private Uri _imageUri = null;
    private const string ImageUriPropertyName = "ImageUri";
    
    public BitmapImage Image
    {
        get { return _image; }
        set
        {
            if (_image != value)
            {
                _image = value;
                OnPropertyChanged(ImagePropertyName);
            }
        }
    }
    private BitmapImage _image = null;
    private const string ImagePropertyName = "Image";
    

    Here's the different binding phrases I've tried (one at a time) in the xaml:

    <Image Name="imageControl" Source="{Binding Path=ImageUri}" />
    <Image Name="imageControl" Source="{Binding Path=ImageUriString}" />
    <Image Name="imageControl" Source="{Binding Path=Image}" />
    <Image Name="imageControl" Source="{Binding Path=ImageUri, Converter={StaticResource imageSourceConverter}}" />
    <Image Name="imageControl" Source="{Binding Path=ImageUriString, Converter={StaticResource imageSourceConverter}}" />
    

    Here's the ImageSourceConverter's Convert method (which I got from someone else):

    public object Convert(
        object value, 
        Type targetType, 
        object parameter, 
        CultureInfo culture)
    {
        if (targetType == typeof(ImageSource)) 
        {
            if (value is string)
            { 
                string str = (string)value; 
                return new BitmapImage(new Uri(str, UriKind.RelativeOrAbsolute)); 
            }
            else if (value is Uri) 
            { 
                Uri uri = (Uri)value; 
                return new BitmapImage(uri); 
            }
        } 
        return value;
    } 

    As I said I've used the debugger to verify that all three properties, i.e. Image, ImageUri and ImageUriString are being set to valid values (along with all other properties on the ViewModel) and that when the converter is used it is returning a valid BitmapImage.

    Tuesday, September 27, 2011 2:04 PM
  • Do you means you put the image inside xap? Source="{Binding Path=PropertyPath}" this is enought. No need to create other image type.

    ~/images/.jpg

    Tuesday, September 27, 2011 2:19 PM
  • Dang it all anyway.  I just discovered this has nothing to do with the code.  The issue was the images I'd added were still marked with Build Action = Resource instead of Content.  After all this time the simplest thing like that can still trip me up.  Thanks for the reply anyway.

    Tuesday, September 27, 2011 2:20 PM