Professional, Software

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.

About these ads
Standard

7 thoughts on “Binding to Image source

  1. Kiril says:

    Hello Mr. Dalvi,
    I have a question concerning binding a MediaElement.
    I decided to take your approach for binding an Image and apply it to MediaElement.
    This is what my VideoUriConverter class looks like:
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    MediaElement me = new MediaElement();
    Uri source = new Uri((string)value, UriKind.RelativeOrAbsolute);
    me.Source = source;
    return me;
    }
    Then I bind it the following way
    :

    When I run the project it produces the following error – [http://img291.imageshack.us/img291/1707/29982351hj7.jpg]
    Any idea whether your approach is also applicable for MediaElements ?
    Any help would be greatly appreciated.
    Kiril

  2. Kiril says:

    Ops, forgot about the brackets: so here is how I bind it in my XAML
    MediaElement Source=”{TemplateBinding MediaSource, Converter={StaticResource converter}}”

  3. Few things here…
    Video elements source property is of type URI so you dont need to use value converters at all. you should be able to just data bind to them

    Value converter that you have built actually return media element that means it can be used if you have data that is in URI but some property that is of type of Media element, you could use this value converter to use databinding in that scenario

    You are also using Template binding, that should be only used when defining templates for your custom control.

  4. Ratnesh Kumar says:

    I initially bound the image to the image control using stringbuilder .But after formatting the system it doesn’t work…….although it shows the correct path and file name in response.write()
    code is …….

    Public Function ShowImage() As String

    Dim url As String
    url = DC.ShowImage(Label1.Text)
    ExpertImg.ImageUrl = url
    ExpertImg.DataBind()
    Response.Write(url)
    Return url

    End Function

  5. I am sorry but i cant really make out what you are trying to do here. What is the type of ExpertImg? What does DataBind do? Is this running on server side?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s