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