Binding List Box and List Of Strings in Windows Phone 8

Introduction

In this article we will learn how to bind a list of strings with a List Box in Windows Phone 8. It's a great way of adding and removing the items from the List Box at run time. In this method we just add an empty List Box to our application and will populate it programmatically using data binding. So let's start.

Binding The List and List Box

In this article I'll focus only on the list of strings only. We want to bind the list of strings with the List Box. Binding means whenever you change the list, the List Box content will also change.

The following simple steps will help you in binding your List Box and list:

1. Add a List Box to your application page.
2. Provide it a name, such as itemList.
3. Set the item source in XAML equal to binding.
4. Create a list in code behind.
5. Set the item source of the List Box equal to the Step 4 list.

The following code implements the preceding steps.

XAML

<phone:PhoneApplicationPage

    x:Class="Demo.MainPage"

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

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

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

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

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

    mc:Ignorable="d"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

            <TextBlock Text="Binding-1" Margin="9,-7,0,0" FontSize="40"/>

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Button Name="pushBtn" Content="Add" Click="addClick" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="225"/>

            <Button Name="popBtn" Content="Remove" Click="popClick" HorizontalAlignment="Left" Margin="225,10,0,0" VerticalAlignment="Top" Width="221"/>

            <ListBox Name="itemList" ItemsSource="{Binding}" Margin="0,87,0,10"></ListBox>

        </Grid>

    </Grid>

 

</phone:PhoneApplicationPage>

C# Code Behind
 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

using Demo.Resources;

using System.Threading;

using Nokia.Music.Types;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private static int i = 0;

        public static List<string> list = new List<string>();

        private void popClick(object sender, RoutedEventArgs e)

        {

            if (i>0)

            {

                list.RemoveAt(i-1);

                itemList.ItemsSource = null;

                itemList.ItemsSource = list;

                i--;

            }

 

        }

 

        private void addClick(object sender, RoutedEventArgs e)

        {

                list.Add("item " + ++i);

                itemList.ItemsSource = null;

                itemList.ItemsSource = list;

        }

    }

}

 

In the code above I'm resetting the item source each time to reflect the changes. It's not a preferred way of doing this but it's good for beginners. The best way to reflect the changes is to use INotify property Change or adding individual items using the add method of list items.

 

 

 

 

 

Summary

That's all for this article. I hope you have found it useful. In case of any doubt feel free to comment below. In my next article we will cover how to bind a dictionary with the List Box.