Binding to Image source

For the live search sample, I needed to databind Image element to Uri of an image returned by live search. When I databind Image element’s source property to Uri source, it does not work because Data binding does not converter the type Uri into ImageSource. so here is the work around I ended up using. This is just a small sample that I created so that I use this functionality in larger app so it is not fully functional but still proves the point.

I ended up using IValueConverter to convert the Uri into BitmapImage (child of ImageSource). Below is the source code but in short steps are…

1. Create a class that implements IValueConverter
2. Instantiate a instance of converter using Resources and give it a key
3. In the Binding part, point binding to converter class using key.

 

<UserControl x:Class="ImageBind.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:control="clr-namespace:ImageBind;assembly=ImageBind" 
    Width="400" Height="300">
    <UserControl.Resources>
        <control:ImageUriConverter x:Key="converter"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Image Source="{Binding url, Converter={StaticResource converter}}"/>
    </Grid>
</UserControl>

using System;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Data;

namespaceImageBind
{
    public classsource
   {
        publicUriurl
        {
            get{ return newUri(http://www.shinyshiny.tv/microsoft_silverlight.jpg,
UriKind.Absolute); }
        }
    }
    public partial classPage: UserControl
   {
        publicPage()
        {
            InitializeComponent();
            sources = newsource();
            this.DataContext = s;
        }
    }

    public classImageUriConverter : IValueConverter
   {
        publicImageUriConverter()
        {
        }

        public objectConvert(objectvalue, TypetargetType, objectparameter,
System.Globalization.CultureInfo culture)
        {
           Urisource = (Uri)value;
            return newBitmapImage(source);
        }

        public objectConvertBack(objectvalue, TypetargetType, objectparameter,
System.Globalization.CultureInfo culture)
        {
            throw newNotImplementedException();
        }

    }
}

here is the small project if you need.