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