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

<ListBox.ItemTemplate>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

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

img2.1.gif

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