Dynamic Update of ListBox in Windows Store App

Introduction

In this article we will use a List Box control and two buttons to implement dynamicly update a data list from the front end. In this application we can add content to the list by entering the content in a TextBox and with the help of an Add button. There is no limit to how many items that can be added. In the reverse process we also delete the items from the list. To delete the item from list box, first of all we will select the item that we want to delete and click on the Delete button.

In the following we are putting the entire code of the XAML file and code behind file to create this mini application.

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 2011
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 BlankPage.xaml and BlankPage.xaml.cs files.

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

Code :

<Page

x:Class="Application8.BlankPage"

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

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

xmlns:local="using:Application8"

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

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

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

mc:Ignorable="d">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox x:Name="txt1" Background="Yellow" Grid.Column="0" Grid.Row="1" Height="50" Width="300"

HorizontalAlignment="Center" VerticalAlignment="Top">

</TextBox>

<Button Content="ADD" Background="Red" Grid.Column="1" Grid.Row="1" Height="50" Width="200"

Margin="0,0,0,0" VerticalAlignment="Top" Click="Button_Click_1">

</Button>

<Button Content="DELETE" Background="Green" Grid.Column="1" Grid.Row="1" Height="50" Width="200"

Margin="0,50,0,0" VerticalAlignment="Top" Click="Button_Click_2">

</Button>

<ListBox x:Name="listb1" Grid.Column="0" Grid.Row="2" Height="300" Width="300"

Background="LightCyan" VerticalAlignment="Top" HorizontalAlignment="Center" FontWeight="Bold" Foreground="Black" FontSize="25">

</ListBox>

</Grid>

</Page>

Step 4 : 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 Application8

{

public sealed partial class BlankPage : Page

{

public BlankPage()

{

this.InitializeComponent();

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

listb1.Items.Add(txt1.Text);

}

private void Button_Click_2(object sender, RoutedEventArgs e)

{

listb1.Items.RemoveAt

(listb1.Items.IndexOf(listb1.SelectedItem));

}

Step 5 : After running this code the output looks like this:

To add data to the list box enter the value into the text box and click on the add button.

As simply you can add many items as you want.

In the reverse process delete the items from list box, select the item and click on the delete button.

You will find that the selected item has been removed from the list.