WP7 ImageBrush Binding problem: workaround

by WindowsPhoneGeek

Lets say that you have a ListBox and want to set some opacity or another visual effect to its DataTemplate dynamically using ImageBrush. If you try to Bind the ImageSource property of the ImageBrush you will get an error. Then if you try to edit the ControlTemplate and TemplateBind the ImageSource you will again get an error.

Here is why:

The ImageBrush doesn't inherit from FrameworkElement so it can't be TemplateBound or Data Bound!

The good news is that you can get around this problem by rewriting your code a little and adding  Converter. 

Workaround

1. We will create the Converter. The code is as follows:

public class ImageBrushConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        BitmapImage image = (BitmapImage)value;
        ImageBrush imageBrush = new ImageBrush();
        if (image != null)
        {
            imageBrush.ImageSource = image;
        }
        return imageBrush;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
    #endregion
}

2. Now we will create a sample DataSource for our ListBox. Like for example:

public class MyCollection
{ 
    public ImageSource MyImage
    {
        get;
        set;
    }
    public string Text
    {
        get;
        set;
    }
}
    
// Constructor
public MainPage()
{
    InitializeComponent();
    List<MyCollection> data = new List<MyCollection>()
    { new MyCollection(){Text = "First Item", MyImage = new BitmapImage(new Uri("/WP7SampleProject2;component/appbar.feature.email.rest.png", UriKind.Relative))},
      new MyCollection(){Text = "Second Item", MyImage = new BitmapImage(new Uri("/WP7SampleProject2;component/appbar.feature.email.rest.png", UriKind.Relative))}
    };

    this.listBox.ItemsSource = data;
}

3. We will add some elements and Bindings to the DataTemplate of our ListBox:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.Resources>
        <local:ImageBrushConverter x:Key="myConverter"/>
    </Grid.Resources>
    <ListBox x:Name="listBox">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border Background="{Binding MyImage,Converter={StaticResource myConverter}}" Height="100" Width="100">
                    <TextBlock Text="{Binding Text}"/>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

That`s it. Now we have the desired ImageBrush set as a Background of the Border.

You can get the source here.

You can also follow us on Twitter @winphonegeek

Comments

<FrameworkElement.Resources>
    <ResourceDictionary>
        <bindings:ImageBrushConverter x:Key="myConverter" />
    </ResourceDictionary>
</FrameworkElement.Resources>