Question

I have a bound list which would show different image at each item.
I know we could change the png image color by doing:

<Rectangle Height="100" Width="100" Fill="{StaticResource PhoneForegroundBrush}">
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="/Images/folder.png" Stretch="None"/>
    </Rectangle.OpacityMask>
</Rectangle>

But this is for a specified image, what I want to do is to apply the same effect on a data bound image. like:

<Image Height="100" Width="100" Source="{Binding IconSource}" Stretch="None"/>

Is there anyone can help me?

Answer 1

Right, so since you can’t bind to a ImageBrush, here’s a workaround:

<Rectangle Width="100"
           Height="100"
           Fill="{StaticResource PhoneForegroundBrush}"
           OpacityMask="{Binding IconSource, Converter={StaticResource ImageToOpacityMaskValueConverter}}" />

Using following converter:

public class ImageToOpacityMaskValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is Uri)
        {
            var image = new BitmapImage((Uri)value);
            if (image != null)
            {
                var imageBrush = new ImageBrush()
                {
                    ImageSource = image
                };

                return imageBrush;
            }
        }

        return value;
    }

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

That said, I would recommend using vector graphics (ie. a drawing) instead of a image.