Naveen's Weblog

Bridge to future

Refresh UI elements on collection changed using ObservableCollection in WPF

Posted by codingsense on November 16, 2009


Hi,

In windows application when we would bind a list with any UI control, on changing of the list we should have refreshed the UI element or reload the list into the UI element. Imagine how tiresome it was if the list was referenced in many UI elements.
In WPF if we are implementing the same structure then we can use INotifyPropertyChanged or INotifyCollectionChanged to minimize our work.
If we are working on a list then we can inherit the list from ObservableCollection which in turn implements the 2 interface mentioned above. By using ObservableCollection we can notify the controls that the list to which they are bound has been changed and ask them to refresh their selves. This will minimize the work to maximum extent and the same time can be utilized for better activities.

In this post let me demonstrate you on how ObservableCollection can be implemented and how the changes to list can automatically refresh the UI element.

Download Source Code (11 KB)

Let me brief on the key things
Bind Textbox to a property of another UI element (Listbox) that returns Object in SelectedItem:
The text box is bound to ListBox.SelectedItem but the selected item will return a object of type PersonName. That is to be split into FirstName and LastName and shown in txtFirstName and txtLastName respectively. Here you have a good option while binding the textbox and the engine will take care of the splitting you can just bind as follows
For txtFirstName I have used binding as

Text="{Binding Path=SelectedItem.FirstName, ElementName=MyListBox, Mode=TwoWay, UpdateSourceTrigger=Explicit}"

As you can see i have specified SelectedItem.FirstName and at runtime the selectedItem will change to the object that is focused. Similarly we can bind to txtLastName.


UpdateSourceTrigger:

In UpdateSourceTrigger you have 3 options PropertyChanged, LostFocus, Explicity. I have used Explicity to handle our own customizations before updating the actual source and the customization can be handled in the save event.

NameList nameList = MyGrid.GetValue(Grid.DataContextProperty) as NameList;
PersonName currentPersonName = MyListBox.GetValue(ListBox.SelectedItemProperty) as PersonName;
PersonName NewPersonName = new PersonName(txtFirstName.Text, txtLastName.Text );
int IndexOfOriginal = nameList.IndexOf(currentPersonName);
nameList[IndexOfOriginal] = NewPersonName;

By just changing the List the newer values are reflected in the UI elements those are bound to the list.
For any clarifcation please feel free to comment.

References: http://msdn.microsoft.com/en-us/library/ms668604.aspx

Happy Learning :)
Codingsense

About these ads

2 Responses to “Refresh UI elements on collection changed using ObservableCollection in WPF”

  1. Eliezer Reis said

    Great post guy, It is too helpful for me. Thanks a lot for you time.

  2. bahar said

    but i couldnt understand it
    u know i have an gridview and a treeview and i bind each one of them to an observablecollection and want that, when i add one record to the gridview ,we should see the changes in treeview and i want to use oncollectionchanged event to do that and nothing
    tnx

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

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: