How To Choose Between ItemsSource and DataContext

2012-02-24
// <![CDATA[
google_ad_client = "ca-pub-5478118713208336"; /* LeadIn */ google_ad_slot = “2638602320”; google_ad_width = 468; google_ad_height = 15;
// ]]>
http://pagead2.googlesyndication.com/pagead/show_ads.js

I usually use ItemsSource property when I need to databind a control in WPF because it’s straightforward and the framework does everything for me.

However, I came accross a situation where I had to do all data formatting and stuff for a DataGrid. In such a case the best method is to use the DataContext property.

The DataContext property is available for pretty much any item you use under the .net framework because it is implemented in the FrameworkElement. What you need to know about FrameworkElement to understand DataContext is that it is one of the very top level classes in the .net framework class hierarchy which is inherited by many classes beneath it.

The ItemsSource property on the other hand is implemented in the ItemsControl class which is located far below in the .net class hierarchy and therefore only inherited by a sub set of controls you use.

What is DataContext

As the name suggests this property sets the data context for an item. In other words it sets the bigger picture (something similar to saying this text box is should be bound to some data element within this particular data table, but you have to tell me what exactly that element is). So when you set the data context property, then you have to specify databindings explicitly.

Data context is usually used to databind controls such as forms which would include sub controls that need to be bound to sub elements of the data context.

For example, a form would include text boxes for First Name and Last Name. Instead of databinding each control you can set the datacontext property of the form so that both FirstName and LastName textboxes would get relevant data automatically.

Following example shows a simple use of DataContext:

First take a note at the two XAML lines for two text boxes which tells the framework what fields of the datacontext each text box should be bound to


Now following code sets the datacontext of the whole window. (Notice this.DataContext)

// create a simple data source
DataTable _dt = new DataTable();
_dt.Columns.Add(new DataColumn("Id", typeof(int)));
_dt.Columns.Add(new DataColumn("FirstName", typeof(string)));
_dt.Columns.Add(new DataColumn("LastName", typeof(string)));

_dt.Rows.Add(1, "Robin", "Hood");
_dt.Rows.Add(2, "Spider", "Man");
_dt.Rows.Add(3, "Knight", "Rider");

this.DataContext = _dt;

Output

How to use datacontext in WPF - sample use of datacontext

// <![CDATA[
google_ad_client = "ca-pub-5478118713208336"; /* BelowPost_BlendIn */ google_ad_slot = “0823141458”; google_ad_width = 468; google_ad_height = 60;
// ]]>
http://pagead2.googlesyndication.com/pagead/show_ads.js

ItemsSource

On the other hand, Items source setting does all the binding work for you so all you have to do is to set the items source property of your control to any collection that implements IEnumerable interface.

Following example shows how you can simply data bind a datagrid using ItemsSource property:


// create a simple data source
DataTable _dt = new DataTable();
_dt.Columns.Add(new DataColumn("Id", typeof(int)));
_dt.Columns.Add(new DataColumn("First Name", typeof(string)));
_dt.Columns.Add(new DataColumn("Last Name", typeof(string)));

_dt.Rows.Add(1, "Robin", "Hood");
_dt.Rows.Add(2, "Spider", "Man");
_dt.Rows.Add(3, "Knight", "Rider");

// DgTestGrid is a dimple datagrid
this.DgTestGrid.ItemsSource = _dt.DefaultView;

Output

How to use itemssource - sample use of itemssource

Note

The data table, _dt is not used straightaway as the items source but its DefaultView is used instead. This is because the DataTable (System.Data.DataTable) class does not implement the IEnumerable interface but its DefaultView (System.Data.Dataview) does.

Was this post helpful to you? How can I improve? – Your comment is highly appreciated!

Cassian Menol Razeek

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 )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: