Data Binding Images in Windows Phone

published on: 8/25/2011 | Views: N/A | Tags: Images Binding

by WindowsPhoneGeek

In this post I am going to demonstrate two ways in which you can data bind Images in Windows Phone, i.e. data bind a property of your business/data class to an Image Control. Displaying Images in a Windows Phone application is a common scenario, however most developers ask how to do this when having a data bound control.

The questions are pretty simple?

Question1: Lets say that we want to display images in a data bound ListBox/ ItemsControl/ListPicker/ ExpanderView (or whatever control that can be data bound) , so what  is the best way of implementing this?

Question2: I want to bind a Image control to the property of my data class, so of what type my property should be?

Why binding to an Image control is confusing?

Binding to an Image control is confusing because:

• 1. The actual binding is done through the Source property of the Image control which is of type ImageSource but it in not usual to store object of type ImageSource.
• 2. It is not clear how to convert your pictures(.png, .jpg) into ImageSource.
• 3. It is not clear how the binding works and what should be the type of the property:  <Image Source="{Binding MyProperty}"/>?
• 4. It is not clear whether or not you will need a Converter.

Answers

Option1: Property of type string

The easiest way is to use a property of type string that will represent the path to the actual picture in your application.

Example:

Data Source

NOTE: We will add two images with build action Content. Take a look at this post for more info: WP7 working with Images: Content vs Resource build action

public MainPage()
{
    InitializeComponent();
    List<ImageData> dataSource = new List<ImageData>() 
    { 
    new ImageData(){Name = "User1:", ImagePath="/Images/user1.png"},
    new ImageData(){Name = "User2:", ImagePath="/Images/user2.png"}
    };

    this.list.ItemsSource = dataSource;
}

public class ImageData
{
    public string ImagePath
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }
}

Data Binding

<ListBox x:Name="list">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
                <Image Source="{Binding ImagePath}" Stretch="None"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Option2: Property of type Uri

Another option is to use a property of type Uri.

Example:

Data Source

public MainPage()
    {
        InitializeComponent();
       
        List<ImageData1> dataSource1 = new List<ImageData1>() 
        { 
        new ImageData1(){Name = "User1:", ImagePath= new Uri("/Images/user1.png",UriKind.RelativeOrAbsolute)},
        new ImageData1(){Name = "User2:", ImagePath= new Uri("/Images/user2.png",UriKind.RelativeOrAbsolute)}
        };

        this.list1.ItemsSource = dataSource1;
    }

    public class ImageData1
    {
        public Uri ImagePath
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }
    }
}

Data Binding

<ListBox x:Name="list1">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
                <Image Source="{Binding ImagePath}"  Stretch="None"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

NOTE: You can simply use :<Image Source="{Binding ImagePath}" Stretch="None"/> . There is no need to add any additional BitmapImage or Converters!

Here is the full source code:

I hope that the post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Data Binding Images in Windows Phone'

Title Your Name

Comment