Working With ListBox in Windows Store App

Introduction

In this article we define a ListBox, like ItemTemplates, ItemPanels and Binding. Here we can customize the layout and behavior of existing controls without the control exposes. Making a ListBox into a horizontal one can easily be done by changing the Itemspanel property. When we create a StackPanel with horizontal orientation, we get a horizontal ListBox.

So,  in this section we will discuss how to define the ListBox in a Metro Style Application and later we will bind it through XAML code which is simple and easy to learn. First of all we will see how to start to build the Metro Style Application. For building that type of application you have to install the Windows 8 operating system and then install Visual Studio 2011. Let us see the steps given below of how to start building your application.

Step 1 : First of all you have to 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

• Select Metro Style Application in C# language

• Click OK

Step 2: In the Solution Explorer we have to see the Mainpage.XAML file and open this file.

Step 3 : The XAML code looks like this. I have added a ItemContainerStyle, ListBox and a bit of padding.

Code :

<UserControl x:Class="Application13.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
      <Grid x:Name="LayoutRoot" Background="Sienna">
        <ListBox Height="96" HorizontalAlignment="Left" Margin="10,10,0,0" Name="listbox2" VerticalAlignment="Top" Width="470">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />                                    
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                    <Setter Property="Padding" Value="30 0 30 0 " />
                </Style>
        </ListBox.ItemContainerStyle>
            <ListBoxItem Content="Vertical Item 1" Background="AliceBlue" />
            <ListBoxItem Content="Vertical Item 2" Background="SeaGreen" />
            <ListBoxItem Content="Vertical Item 3" Background="BlanchedAlmond" />
            <ListBoxItem Content="Vertical Item 4" Background="Chocolate"/>
            <ListBoxItem Content="Vertical Item 5" Background="CornflowerBlue"/>
        </ListBox>
    </Grid>  
</UserControl>

Step 4 : After running this application the output will look like as below:

In the blue print we have to select this item.

Here, we have to select  these items in horizontal form.