Working With ListBox in Windows Phone 7

Introduction

In this article we are going to explore how to work with a ListBox in Windows Phone 7. Further we will discuss it in details how it is possible to work with ListBox in Windows Phone 7. In this demonstration we will make some properties and add these properties values to the List<> which is a type of datasource and the information regarding the items bound to it which is shown in the output. Let's see how we will work with it; to do this you should follow the steps given below.

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

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

Step 2: 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;

namespace Myapp

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            List<MyData> L1 = new List<MyData>();

            L1.Add(new MyData() { F_Name = "Amit", L_Name="Kumar", Address="ALigarh", Salary = 10000 ,});

            L1.Add(new MyData() { F_Name = "Raj", L_Name="Kumar" ,Address="Delhi", Salary = 12000 });

            L1.Add(new MyData() { F_Name = "Deepak", L_Name="Kumar", Address="Noida",Salary = 12500 });

            L1.Add(new MyData() { F_Name = "Arjun", L_Name = "Kumar", Address = "Gr. Noida", Salary = 15000 });

            this.listBox.ItemsSource = L1;

        }

        private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            MyData data = (sender as ListBox).SelectedItem as MyData;

            ListBoxItem selectedItem = this.listBox.ItemContainerGenerator.ContainerFromItem(data) as ListBoxItem;

        }

    }

    public class MyData

    {

        public string F_Name { get; set; }

        public string L_Name { get; set; }

        public string Address { get; set; }

        public int Salary { get; set; }

    }

}
 

Step 3:  In this step  we 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"

    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>

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

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

        </StackPanel>

        <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="#FFACD3CA" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

            <ListBox x:Name="listBox" FontSize="26" SelectionChanged="listBox_SelectionChanged" >

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <TextBlock Text="{Binding F_Name}" Width="100"/>

                            <TextBlock Text="{Binding L_Name}" Width="100"/>

                            <TextBlock Text="{Binding Address}" Width="100"/>

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

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

            <Button Content="Click to display Selected Item" x:Name="button1" Click="button1_Click" FontFamily="Comic Sans MS" FontSize="26">

                <Button.Background>

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

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

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

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <TextBlock x:Name="txtDay"/>

            <TextBlock x:Name="txtTemp"/>

        </StackPanel>

    </Grid>

</phone:PhoneApplicationPage>

 

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

 

 

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

 

Output 1:

 

Output 2:

Here are some other resources which may help you.
 

Select ListBox Item on the Hold Event in Windows Phone
How to Work with Items Controls in Windows Phone 7
Working With Various Phone Tasks in Windows Phone 7
Tiles in Windows Phone 7
Getting Started With Local Database Operations in Windows Phone 7