Implementation of ListBox in Windows Store App

Introduction

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 :

<Page

    x:Class="Application4.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Application4"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <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" >

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <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>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

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

    </Grid>

 </Page>

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()

        {

            this.InitializeComponent();

        }

       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.