Binding Image Dynamically in Metro App

Question

I have an ImageSource inside ImageBrush which would be changed dynamically depends on my data.

The problem is, I can't directly access the Name of the ImageBrush because it's inside DataTemplate. I know this is bad idea, because storing data inside UI is such a bad habit.

If anyone know how to solve this using data binding on Image, i would really appreciate that. Thanks!!

<DataTemplate>
  <StackPanel Width="250" Height="180" VerticalAlignment="Bottom">
    <StackPanel.Background>
       <ImageBrush ImageSource="{Binding ???}"/>
    </StackPanel.Background>
    ........
  </StackPanel>
</DataTemplate>

Answer 1

You can create a converter that converts the path to an image:

public sealed class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            return new BitmapImage(new Uri((string)value));
        }
        catch 
        {
            return new BitmapImage();
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

and then in the XAML:

< Image Source="{Binding Path=ImagePath, Converter={StaticResource ImageConverter}}" />