Implementation of ListBox in Windows Store App


In this article we will use a List Box, one of the controls in XAML pages. With the help of this control we will implement a list of player information. This list contain multiple player information like Player Name, and their country.

To implement it we will use a List Box to show the information and bind the data on it from the code behind file on a button click. The data will be stored on a List object which contains a class of one type of object and this object has the three fields player name, player number, and team name.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

  • Open Visual Studio 2011
  • File -> New -> Project
  • Choose Template -> Visual C# -> Metro Style Application
  • Rename this Application


Step 2 : In the Solution Explorer there are two files that we will primarily work with; BlankPage.xaml and BlankPage.xaml.cs files.


Step 3 : The BlankPage.xaml file is as in the following code:

Code :










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

        <TextBlock Text="         Player Information List" FontSize="20"></TextBlock>

        <ListBox x:Name="personListBox" Height="300" HorizontalAlignment="Left" Margin="42,24,0,0"  VerticalAlignment="Top" Width="280" >



                    <StackPanel  >

                        <TextBlock FontFamily="Verdana" Text="{Binding Player_No}" Margin="0,0,5,0" Foreground="Red"></TextBlock>

                        <TextBlock FontFamily="Verdana" Text="{Binding Player_Name}" Margin="0,0,5,0" Foreground="Blue"></TextBlock>

                        <TextBlock FontFamily="Verdana" Text="{Binding Team_name}" Margin="0,0,5,0" Foreground="Yellow"></TextBlock>

                        <TextBlock Text="-------------------------------------------" Margin="0,0,5,0" Foreground="Gray"></TextBlock>





        <Button Height="50" Width="200" Content="Show List" Click="Button_Click_1" Background="Red"></Button>



Step 4 : Add a class to the project; the Class1 code for the class is given below:

Code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;


namespace Application4


    class Class1


        public int Player_No { get; set; }

        public string Player_Name { get; set; }

        public string Team_name { get; set; }



Step 5 :
The BlankPage.xaml.cs file is as in the following code:

Code :

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;


namespace Application4


    public sealed partial class BlankPage : Page


        Class1 _cbj1;

        public BlankPage()




       protected override void OnNavigatedTo(NavigationEventArgs e)



       private void Button_Click_1(object sender, RoutedEventArgs e)


            List<Class1> personList = new List<Class1>() {

                                                            new Class1{  Player_No = 1, Player_Name="Sachin", Team_name="India"},

                                                            new Class1{  Player_No = 2, Player_Name="Michal Clark", Team_name="Austrailia"},

                                                            new Class1{  Player_No = 3, Player_Name="Kumar Sangkara", Team_name="Srilanka"},

                                                            new Class1{  Player_No = 4, Player_Name="MS Dhoni", Team_name="India"},

                                                            new Class1{  Player_No = 5, Player_Name="Chris Gayle", Team_name="Westindies"},

                                                            new Class1{  Player_No = 6, Player_Name="Pollard", Team_name="Westindies"}};

            personListBox.ItemsSource = personList;



Step 6 :
After running this code the output will look like this:


Click on the Show List button; the content will be shown in the List Box.


Similar Articles