Posted by: Zeeshan Amjad | December 24, 2009

Using ObservableCollection class Revisited


ObservableCollection class implements the INotifyCollectionChanged interface. This interface notify the control when its data changes. Here is a class diagram of ObservableCollection class.

ObservableCollection

Here we are going to implement a simple program to use ObservableCollection class with our StateInfo class.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: using System.Collections.ObjectModel;
 15: 
 16: namespace WpfNotifyCollection
 17: {
 18:     /// <summary>
 19:     /// Interaction logic for Window1.xaml
 20:     /// </summary>
 21:     public partial class Window1 : Window
 22:     {
 23:         private StateList stateList;
 24: 
 25:         public Window1()
 26:         {
 27:             stateList = new StateList();
 28:             InitializeComponent();
 29: 
 30:             list.ItemsSource = stateList;
 31:         }
 32: 
 33:         private void add_Click(object sender, RoutedEventArgs e)
 34:         {
 35:             StateInfo stateInfo = new StateInfo();
 36:             stateInfo.State = stateName.Text;
 37:             stateInfo.City = cityName.Text;
 38:             stateList.Add(stateInfo);
 39:         }
 40:     }
 41: 
 42:     public class StateInfo
 43:     {
 44:         public String State
 45:         { get; set; }
 46: 
 47:         public String City
 48:         { get; set; }
 49:     }
 50: 
 51:     public class StateList : ObservableCollection<StateInfo>
 52:     {
 53:     }
 54: }
 55: 

This is simple XAML file to display this information in List Box

  1: <Window x:Class="WpfNotifyCollection.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="INotifyCollectionChanged" Height="400" Width="400">
  5:     <Grid Background="AliceBlue">
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:             <RowDefinition Height="4*"/>
 10:             <RowDefinition/>
 11:         </Grid.RowDefinitions>
 12:         <Grid.ColumnDefinitions>
 13:             <ColumnDefinition/>
 14:             <ColumnDefinition Width="3*"/>
 15:         </Grid.ColumnDefinitions>
 16:         
 17:         <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" Margin="5">State Name</TextBlock>
 18:         <TextBox Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="5" Name="stateName"/>
 19:         <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Margin="5">City Name</TextBlock>
 20:         <TextBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" Margin="5" Name="cityName"/>
 21:         <ListBox Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" 
 22:                  Margin="5" Name="list" HorizontalContentAlignment="Stretch">
 23:             <ListBox.ItemTemplate>
 24:                 <DataTemplate>
 25:                     <Border Margin="3" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
 26:                         <StackPanel Margin="2">
 27:                             <TextBlock Margin="2" Text="{Binding State}"/>
 28:                             <TextBlock Margin="2" Text="{Binding City}"/>
 29:                         </StackPanel>
 30:                     </Border>
 31:                 </DataTemplate>
 32:             </ListBox.ItemTemplate>
 33:         </ListBox>
 34:         <Button Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Name="add" Width="75" Height="35" Click="add_Click">
 35:             Add
 36:         </Button>
 37:     </Grid>
 38: </Window>
 39: 

This is the output of the program after inserting some data into list box.

ObservableCollectionOutput_02

Advertisements

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: