Question

I have successfully managed to bind images stored in Isolated Storage to “Image” elements inside a listbox defined in XAML w/o any problems.

What I did was to use a property that stored the name and location of the image in isolated storage and an IValueConverter to actually open the file and get its stream.

I am surprised to see that I can’t do this in a new XAML with an even easier setup. All I have is this:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.Resources>
            <c:BinaryToImageSRCConverter x:Key="imageConverter" />
        </Grid.Resources>
        <Image Name="TheImage" Source="{Binding PhotoName, Converter={StaticResource imageConverter}}" Width="430" Height="430" VerticalAlignment="Center" Stretch="UniformToFill">
        </Image>
    </Grid>

and this is what I have in the ModelView:

        public string PhotoName { get; set; }
        PhotoName = "Images\\0.jpg";

The path and name of the file is correct thus it is not a problem of “not finding the file”.

My problem is that the Convert method of my IValueConverter never gets called.

As I mentioned before, I am successfully using this converter in another XAML (in the same project) and everything works correctly. The only difference is that I am binding to an image used by a ListBox.

Any ideas or hints as to why the Convert method of my IValueConverter is not called in this scenario ?

Thanks!

Here is what I have tried:

1. Implementing INotifyPropertyChanged:

   public class PhotoNameClass : INotifyPropertyChanged
   {
   public string PhotoNameValue = string.Empty;
   
   public event PropertyChangedEventHandler PropertyChanged;
   
   private void NotifyPropertyChanged(String info)
   {
       if (PropertyChanged != null)
       {
           PropertyChanged(this, new PropertyChangedEventArgs(info));
       }
   }
   
   public string PhotoName
   {
       get
       {
           return this.PhotoNameValue;
       }
       set
       {
           if (value != this.PhotoNameValue)
           {
               this.PhotoNameValue = value;
               NotifyPropertyChanged("PhotoName");
           }
       }
   }
   
   }
   

This is how I assigned to the property:

    public partial class ShowContent : PhoneApplicationPage
{
    PhotoNameClass photoClass = new PhotoNameClass();
}
   protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
      photoClass.PhotoName = "Images\\0.jpg";
      base.OnNavigatedTo(e);
    }

1. Using DependencyProperty

   public partial class ShowContent : PhoneApplicationPage
   

   {
   // PhotoNameClass photoClass = new PhotoNameClass();

   public string PhotoName
   {
       get { return (string)GetValue(PhotoNameProperty); }
       set { SetValue(PhotoNameProperty, value); }
   }
   
   public static readonly DependencyProperty PhotoNameProperty = DependencyProperty.Register("PhotoName", typeof(string), typeof(ShowContent), new PropertyMetadata("")); 
   
   protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
   {
      PhotoName = "Images\\0.jpg";
   }
   

Here are the relevant parts of the XAML:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.Resources>
            <c:BinaryToImageSRCConverter x:Key="imageConverter" />
        </Grid.Resources>
        <Image Name="TheImage" Source="{Binding PhotoName, Converter={StaticResource imageConverter}}" Width="430" Height="430" VerticalAlignment="Center" Stretch="UniformToFill">
        </Image>
    </Grid>

where, c is defined as:

    xmlns:c="clr-namespace:ImageApplication"

Thanks.

UPDATE

I am using the INotifyPropertyChanged implementation to expose my property.

I have changed the XAML code to this:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.Resources>
            <c:PhotoNameClass x:Key="photoClass" />
            <c:BinaryToImageSRCConverter x:Key="imageConverter" />
        </Grid.Resources>
            <Image Source="{Binding PhotoName, Converter={StaticResource imageConverter}}" DataContext="{StaticResource photoClass}" Width="430" Height="430" VerticalAlignment="Center" Stretch="UniformToFill">
            </Image>
    </Grid>
</Grid>

Therefore, I added the “DataContext” attribute of the image element specifying the name of the class that wraps my property. In this scenario, the Convert method of the IValueConverter IS called. However, this is not right as I am getting an error in the XAML when adding DataContext: “Unable to determine application identity of the caller” and of course, stepping into the Convert method, my “value” string is empty therefore, the “right” “PhotoName” is not being populated.

Thanks for any ideas…

P.S. Here’s how I defined my Convert method of the IValueConverter:

namespace ImageApplication
{
  public class BinaryToImageSRCConverter : IValueConverter
  { 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    { // <-- Breakpoint here. Never gets triggered except after I added the "DataContext" attribute to the XAML image element.
      // but in that case, "value" is an empty string.
        if (value != null && value is string)
        {
               ... 

UPDATE FIXED

I have fixed the issue. I have assigned the class name wrapping my property to the DataContext property of the image defined in the XAML code.

Thank you all. I hope this will help somebody out there.

Answer 1

It never gets called because your property does not raise a PropertyChanged notification. You need to either make it a DependencyProperty or implement INotifyPropertyChanged and raise a PropertyChanged event when the property value is set.