Reader Level:
ARTICLE

Working With ListBox in Windows Phone 7

Posted by Amit Maheshwari Articles | Windows Phone April 11, 2012
In this article we are going to explore how to work with ListBox in Windows Phone 7.
  • 0
  • 0
  • 24628

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_1_1fig.jpg

Step_1_2fig.jpg

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.

 

design11.jpg

 

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

 

Output 1:


111.jpg

 

Output 2:


output11.jpg


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

COMMENT USING

Trending up