Windows Store Application ListBox Control in Visual Studio 2012

Introduction

Here I am talking about the ListBox control in Visual Studio 2012 in Metro Style Applications. We are creating this ListBox control in a Metro Style Application. We are going to implement a color ListBox control, which will be applied to ListBox items. The ListBox will look like this on the Main window. The Metro Style application works on Windows 8. There is a ListBox control which is a very useful control. This article shows how the ListBox control is created. When we run the code in XAML then the ListBox control will move. And there are two Buttons which work at run time. In the following we are providing the whole code of the XAML file.


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

•   Open Visual Studio 2012
•   File -> New -> Project
•   Choose Template -> Visual C# -> Metro Style Application
•   Rename the application

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

Step 3 : The MainPage.xaml file is as in the following code. When we create the ListBox control its code in XAML will look like this:

<ListBox HorizontalAlignment="Left" Height="280" VerticalAlignment="Top"
 Width="100" Margin="5,0,0,0">
<ListBox\>

XAML Code

<Page x:Class="App5.MainPage" IsTabStop="false"    
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App5" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
 mc:Ignorable="d" Width="1365" Background="#FFE89898">
<Page.BottomAppBar>
<AppBar/>
</Page.BottomAppBar>    <Grid Background="#CCB26A6A"
   Margin="0,0,0,325" RenderTransformOrigin="0.565999984741211,0.763000011444092">
<ListBox HorizontalAlignment="Left" Height="280" VerticalAlignment="Top"
   Width="100" Margin="5,0,0,0">
 <ListBoxItem Content="MCA"/>
<ListBoxItem Content="M.tech"/>
<ListBoxItem Content="BCA"/>
<ListBoxItem Content="MBA"/>
<ListBoxItem Content="B.tech"/>
<ListBoxItem Content="MSC(cs)"/>
<ListBoxItem Content="MSC(IT)"/>
</ListBox>
</Grid>
</Page>

The output for above code will look like this: