WPF ObservableCollection tutorial

WPF ObservableCollection

Introduction

An ObservableCollection is a dynamic collection of objects of a given type. Object 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 CollectionChanged event handler to the ObservableCollecion's.

ObservableCollection class is exists in System.Collections.ObjectModel namespace.

Objective

Using Code

I will demonstrate how this works in a simple example:

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

UI

Code File

Here a Person class having 2 properties Name and Address.  One observableCollection object is created with Person type and bind to the ListView. 

lstNames.ItemsSource = person; 

By doing so, we can dynamically insert, update and remove item from ListView.

person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });

    public partial class MainWindow : Window
    {
        private ObservableCollection<Person> person;
        public MainWindow()
        {
            InitializeComponent();
            person = new ObservableCollection<Person>()
            {
                new Person(){Name="Prabhat",Address="India"},
                new Person(){Name="Smith",Address="US"}
            };
            lstNames.ItemsSource = person;
        }
        private void btnNames_Click(object sender, RoutedEventArgs e)
        {
            person.Add(new Person() { Name = txtName.Text, Address = txtAddress.Text });
            txtName.Text = string.Empty;
            txtAddress.Text = string.Empty;
        }
    }
    public class Person
    {
        public string Name { get; set; }
        public string Address { get; set; }
    }

XAML File

<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5">
            <TextBlock x:Name="lblName" Text="Name"></TextBlock>
            <TextBox x:Name="txtName"></TextBox>
            <TextBlock x:Name="lblAddress" Text="Address"></TextBlock>
            <TextBox x:Name="txtAddress"></TextBox>
            <Button Grid.Column="0" Width="100" Height="20" Margin="5,5,5,5" x:Name="btnNames" Click="btnNames_Click" Content="Add"></Button>
        </StackPanel>

        <ListView x:Name="lstNames" Margin="5,5,5,5" Grid.Column="1" Grid.Row="0">
            <ListView.View>
                <GridView x:Name="grdNames">
                    <GridViewColumn Header="Name"  DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="Address"  DisplayMemberBinding="{Binding Address}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>

Points of Interest

Binding is a powerful markup extension in WPF. In the above example you can bind listview with textbox. When you select listview row then data of the selected row will display in the textbox.

<TextBox x:Name="txtName Text="{Binding ElementName= lstNames, Path=SelectedItem.Name}"></TextBox>