Binding Data and Images to ListBox in Windows Phone 7

Introduction

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.

Code:

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

     {

          get;

          set;

     }

     public string MyI_Uri

     {

          get;

          set;

     }

  }

  public partial class MainPage : PhoneApplicationPage

  {     

     public MainPage()

     {

         InitializeComponent();

         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.

Code:

<phone:PhoneApplicationPage

    x:Class="Myapp.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    shell:SystemTray.IsVisible="True">

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

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

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--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">

              <TextBlock.Foreground>

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

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

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

                </LinearGradientBrush>

              </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>

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

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

            <StackPanel.Background>

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

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

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

                </LinearGradientBrush>

            </StackPanel.Background>

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

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

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

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

                  </LinearGradientBrush>

               </TextBlock.Foreground>

            </TextBlock>

            <ListBox x:Name="Mylist">

                           <ListBox.ItemTemplate>

                                 <DataTemplate>

                                        <StackPanel Margin="5">

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

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

                                        </StackPanel>

                                 </DataTemplate>

                           </ListBox.ItemTemplate>

                    </ListBox>

             </StackPanel>

    </Grid> 

</phone:PhoneApplicationPage>

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