Desperately Seeking Love of Sophie

Binding to Image source

with 9 comments

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

Written by Vivek

March 30, 2008 at 2:52 am

Posted in Professional, Software

Tagged with

9 Responses

Subscribe to comments with RSS.

  1. 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

    Kiril

    March 30, 2008 at 9:53 pm

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

    Kiril

    March 30, 2008 at 9:55 pm

  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.

    vivekdalvi

    March 31, 2008 at 4:35 pm

  4. Thank you! After an hour of banging my head, the ImageUriConverter worked it’s magic.

    Mark Ingram

    July 10, 2008 at 8:32 am

  5. 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

    Ratnesh Kumar

    July 28, 2008 at 10:33 pm

  6. 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?

    Vivek

    August 1, 2008 at 11:46 pm

  7. Diese Website ist wirklich ein Spaziergang – über für alle Informationen wünschte über dies und wusste nicht, wen Sie fragen. Glimpse right here, und auch Sie ‘ll definitiv entdecken es.

    tierapotheke

    July 22, 2011 at 7:01 am

  8. hi, the link to the source code is broken, can you provide a new one?

    Thanks

    talal

    November 29, 2011 at 2:28 am


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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: