WPF ObservableCollection

An ObservableCollection is a dynamic collection of objects of a given type. Objects can be added, removed or be updated with an automatic notification of actions. When an object is added to or removed from an observable collection, the UI is automatically updated. This happens because, when binding to an observable collection, WPF automatically adds a CollectionChanged event handler to the ObservableCollecion's events.

The ObservableCollection class exists in the System.Collections.ObjectModel namespace.

I will demonstrate how this works in a simple example:

I have a window with a Button, two TextBoxes and a ListView and each time you click the Button the text of the TextBox is added to the collection and the ListView is updated automatically.

UI

ObservableCollection-in-SQL-Server.jpg

Code File
  1. public partial class MainWindow : Window
  2. {
  3. private ObservableCollection<Person> person;
  4. public MainWindow()
  5. {
  6. InitializeComponent();
  7. person = new ObservableCollection<Person>()
  8. {
  9. new Person(){Name="Prabhat",Address="India"},
  11. new Person(){Name="Smith",Address="US"}
  12. };
  13. lstNames.ItemsSource = person;
  14. }
  15. private void btnNames_Click(object sender, RoutedEventArgs e)
  16. {
  17. person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });
  18. txtName.Text = string.Empty;
  19. txtAddress.Text = string.Empty;
  20. }
  21. }
  23. public class Person
  24. {
  25. public string Name { get; set; }
  26. public string Address { get; set; }
  27. }
Here a Person class has the 2 properties Name and Address. One observableCollection object is created with a Person type and bound to the ListView. See:

lstNames.ItemsSource = person;

By doing so, we can dynamically insert, update and remove items from the ListView, as in:

  1. person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });
XAML File
  1. <Grid>
  2. <Grid.ColumnDefinitions>
  3. <ColumnDefinition/>
  4. <ColumnDefinition Width="*"/>
  5. </Grid.ColumnDefinitions>
  6. <Grid.RowDefinitions>
  7. <RowDefinition Height="*"></RowDefinition>
  8. </Grid.RowDefinitions>
  9. <StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5">
  10. <TextBlock x:Name="lblName" Text="Name"></TextBlock>
  11. <TextBox x:Name="txtName"></TextBox>
  12. <TextBlock x:Name="lblAddress" Text="Address"></TextBlock>
  13. <TextBox x:Name="txtAddress"></TextBox>
  14. <Button Grid.Column="0" Width="100" Height="20" Margin="5,5,5,5" x:Name="btnNames" Click="btnNames_Click" Content="Add"></Button>
  15. </StackPanel>
  16. <ListView x:Name="lstNames" Margin="5,5,5,5" Grid.Column="1" Grid.Row="0">
  17. <ListView.View>
  18. <GridView x:Name="grdNames">
  19. <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
  20. <GridViewColumn Header="Address" DisplayMemberBinding="{Binding Address}"/>
  21. </GridView>
  22. </ListView.View>
  23. </ListView>
  24. </Grid>
The ObservableCollection is already bound to the Listview. So all we need to do in the XAML file is to specify the binding member for each column. We can do that by the "DisplayMemberBinding" attribute and "Binding" markup extension. See:
  1. <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>