ObservableCollection example

ObservableCollection:

You have a collection object that holds the collection of data that needs to be displayed on UI. Whenever  you add /remove  data on the collection object, that needs to be updated to the UI immediately. The collection should implment the interface INotifyCollectionChanged to achive this. The interface exposes the CollectionChanged event which should be raised whenever the collection changes. WPF provides the ObservableCollection class, which is the built in implmentation of the data collection that implments INotifyCollectionChanged interface.

Usage:

Bind the instance of ObservableCollection to the DataContext of the UI element(eg Listbox). When you add/remove objects to the instance, the data gets immediately updated on the UI.

Code Example:

Create wpf application on the Visual studio 2008. Open the main form(window1 ) on desing mode and add DataGrid. Add one button at the bottom of the window. Open the Mainwindow in code view. Create a Class called User which looks like bellow.

Domain object

		public class User : INotifyPropertyChanged

{

private string _userName;

public User()

{

UserName = "New user";

}

public string UserName

{

get { return _userName; }

set

{

_userName = value;

FirePropertyChangedEvent("UserName");

}
}

private string _firstName;

public string FirstName

{

get { return _firstName; }

set

{

_firstName = value;

FirePropertyChangedEvent("FirstName");

}

}

public event PropertyChangedEventHandler PropertyChanged;

private void FirePropertyChangedEvent(string propertyName)

{

if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

} 

At the top inside the Window1 Class create a instance of ObjservableCollection. In the construction of Window1 set the DataContext of datagrid instance to the collection object.

Window class

		public partial class Window1 : Window

{

private  users = new ObservableCollection();

public Window1()

{

InitializeComponent();

dataGrid1.DataContext = users;

users.Add(new User(){UserName = "Prem",FirstName = "Prem Bdr"});
}

private void button1_Click(object sender, RoutedEventArgs e)

{

users.Add(new User());

}

} 

Now open the  main window(where the datagrid is placed) in xaml view. Add columns to the datagrid and set binding data as below.

Xaml code

		<my:datagrid autogeneratecolumns="False" itemssource="{Binding}" margin="12,12,12,41" name="dataGrid1">
<my:datagrid.columns>
<my:datagridtextcolumn binding="{Binding UserName}" header="User name">
<my:datagridtextcolumn binding="{Binding FirstName}" header="First Name">
</my:datagridtextcolumn></my:datagridtextcolumn></my:datagrid.columns><my:datagridtextcolumn binding="{Binding UserName}" header="User name">
</my:datagridtextcolumn></my:datagrid> 

Run the example and see the effect. When you click Add button you can see new row added automatically on the DataGrid. Add more codes to edit/remove the collection object to see the output.

Something about InotifyPropertyChangedEvent

In the example you can see A User class is implmenting InotifyPropertyChangedEvent and fire PropertyChanged event whenever the property is set. This Interface triggers the UI components to update data whenever object is changed. InotifyCollectionChanged only notifies when the collection is modified(Added/Deleted data from the collection).


Like us

See also

log4net: dynamic log path

Dynamically determine where to output logs at run-time.

observable collection

Observable collection built into the wpf application can help minimize your code by automatically update your list controls. Refreshes list faster when the items are added or modified.

Dictionary settings provider

Store dictionary data on config file at runtime as binary data.