Posted by: Zeeshan Amjad | August 31, 2009

Data binding of ListBox in WPF


Listbox is used to display multiple items and its usage is very simple. In first step lets going to make one simple list box control with XAML. Here is a code for this.

  1: <Window x:Class="WpfListBox.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="List Box Sample" Height="300" Width="400" Loaded="Window_Loaded">
  5:     <ListBox Name="lst" Margin="5">
  6:         
  7:     </ListBox>
  8: </Window>
  9: 

Here is a simple code to insert data in the list box.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Windows;
  4: 
  5: namespace WpfListBox
  6: {
  7:     /// <summary>
  8:     /// Interaction logic for Window1.xaml
  9:     /// </summary>
 10:     public partial class Window1 : Window
 11:     {
 12:         public Window1()
 13:         {
 14:             InitializeComponent();
 15:         }
 16: 
 17:         private void Window_Loaded(object sender, RoutedEventArgs e)
 18:         {
 19:             List<string> states = new List<string>();
 20: 
 21:             states.Add("Maryland");
 22:             states.Add("California");
 23:             states.Add("Washington");
 24:             states.Add("Taxes");
 25:             states.Add("New York");
 26: 
 27:             lst.ItemsSource = states;
 28:         }
 29:     }
 30: }
 31: 

Here is the output of the program.

ListBox_01

But if you want to display more information rather than just the name of the sate, such as its capital, big city, nick name etc then how can you do it. Let’s first make a class to store all this information.

Here is a class to store the state information.

  1:     public class StateInfo
  2:     {
  3:         public StateInfo(string name, string capital, string bigcity, string nickname)
  4:         {
  5:             Name = name;
  6:             Capital = capital;
  7:             BigCity = bigcity;
  8:             NickName = nickname;
  9:         }
 10: 
 11:         public string Name
 12:         { get; set; }
 13: 
 14:         public string Capital
 15:         { get; set; }
 16: 
 17:         public string BigCity
 18:         { get; set; }
 19: 
 20:         public string NickName
 21:         { get; set; }
 22:     }
 23: 
 24: 

And here is the C# code to insert information about each state when window load.

  1:         private void Window_Loaded(object sender, RoutedEventArgs e)
  2:         {
  3:             List<StateInfo> states = new List<StateInfo>();
  4: 
  5:             states.Add(new StateInfo("Maryland", "Annapolis", "Baltimore", "Old Line State"));
  6:             states.Add(new StateInfo("California", "Sacramento", "Los Angeles", "Golden State"));
  7:             states.Add(new StateInfo("Washington", "Olympia", "Seattle", "The Evergreen State"));
  8:             states.Add(new StateInfo("Taxes", "Austin", "Houston", "Lone Star State"));            
  9:             states.Add(new StateInfo("New York", "Albany", "New York City", "Empire State"));
 10: 
 11:             lst.ItemsSource = states;
 12:         }
 13:     }

Now come the fun part how can we do the binding of this with list box. List box display only one item, but here we have more than one item for each state. We can use the data template of the list box to display more than one items.

Here is a simple XAML code for this.

  1: <Window x:Class="WpfListBox.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="List Box Sample" Height="400" Width="400" Loaded="Window_Loaded">
  5:     <ListBox Name="lst" Margin="5" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
  6:         <ListBox.ItemTemplate>
  7:             <DataTemplate>
  8:                 <Border Margin="5" Background="Wheat" BorderThickness="5" BorderBrush="Brown">
  9:                     <StackPanel>
 10:                         <TextBlock Margin="5" FontSize="16" FontWeight="Bold" Text="{Binding Path=Name}"/>
 11:                         <TextBlock Margin="5, 0"  Foreground="Blue" Text="{Binding Path=Capital}"/>
 12:                         <TextBlock Margin="5, 0"  Text="{Binding Path=BigCity}"/>
 13:                         <TextBlock Margin="5, 0" Text="{Binding Path=NickName}"/>
 14:                     </StackPanel>
 15:                 </Border>
 16:             </DataTemplate>
 17:         </ListBox.ItemTemplate>         
 18:     </ListBox>
 19: </Window>
 20: 

Here is the output of this program.

ListBox_02

Advertisements

Responses

  1. […] Data Template conditionally We have studied how can we apply data template. Now we are going to see how can we apply data template conditionally. In other words apply […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: