Binding Data and Images to ListBox in Windows Phone 7


In this article we are going to explore how to bind images to a listbox in Windows Phone 7. We will also discuss in details how it is possible to bind a collection of images through the ListBox in Windows Phone 7. To do that we ask what's the simplest way to bind images to a ListBox in Windows Phone 7. In this article we are going to make a class in which we will define some properties named MyText and MyI_Uri for which we can bind these images as a collection to the ListBox. Before starting we will talk about a collection named ObservableCollection<T> used to represent a dynamic data collection that provides notifications when items are added, removed, or when the whole list is refreshed. Now to that you should follow the steps given below.

Step 1: In this step first of all we have to create a Windows Phone application let see how you will open it.

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named Silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   



Step 2: In this step you will add some images to the images folder; let's see how it looks like as shown below.


Step 3: So to use it you have to download the Silverlight toolkit for Windows Phone 7.

Step 4: In this step we will see the code for the MainPage.xaml.cs file which is shown below.


using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Collections.ObjectModel;

using System.Windows.Media.Imaging;

namespace Myapp


  public class MyImageData


     public string MyText





     public string MyI_Uri






  public partial class MainPage : PhoneApplicationPage


     public MainPage()



         ObservableCollection<MyImageData> ds = new ObservableCollection<MyImageData>();

            ds.Add(new MyImageData() { MyI_Uri = "Images/20120413051922814_easyicon_cn_64.png", MyText = "CLose" });

            ds.Add(new MyImageData() { MyI_Uri = "Images/delete.png", MyText = "Erase" });

            ds.Add(new MyImageData() { MyI_Uri = "Images/images1.jpg", MyText = "MyLogo" });

            ds.Add(new MyImageData() { MyI_Uri = "Images/folder-open-26.png", MyText = "Open" });

            ds.Add(new MyImageData() { MyI_Uri = "Images/350606300.png", MyText = "MyFolder" });

          this.Mylist.ItemsSource = ds;   

Step 5: In this step you will see the code for the MainPage.xaml file which is shown below.










    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"



    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">


            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>


        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My Images" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="56">


                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                  <GradientStop Color="Black" Offset="0" />

                  <GradientStop Color="#FFC6A9BD" Offset="1" />





        <!--ContentPanel - place additional content here-->

        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">


                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFB4B78A" Offset="1" />



            <TextBlock Text="Image Bound toListBox" FontFamily="Comic Sans MS" FontSize="26">

                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFF4FFDD" Offset="1" />




            <ListBox x:Name="Mylist">



                                        <StackPanel Margin="5">

                                               <Image Source="{Binding MyI_Uri}" Stretch="None"/>

                                               <TextBlock Text="{Binding MyText}"/>








Step 6: In this step we will see the design of the MainPage.xaml file which is shown below.


Step 7: In this step we are going to run the application by pressing F5 and the output is shown below.

Output 1: It's the default output as shown below.


Output 2: In this output you will see that the data and images are both bound with the ListBox.


Here are some other useful resources which may help you.

Windows Phone 7 Data Binding using WCF Service
Data Bindings in Silverlight for Windows Phone 7
Owner Draw ListBox Control with Images
Select ListBox Item on the Hold Event in Windows Phone
Adding Xml Data source in Wpf Application using Expression Blend