Binding Data to WP7 Pages

When you are building apps, have you thought about how much time you spend populating fields and lists? You would probably be surprised if you were to keep track of the amount of time you spend performing this seemingly simple task. Unfortunately, most of the time we are used to this repetitive task that we perform over and over as many frameworks do not provide a real solution. Since Windows Phone 7 (WP7) applications are created using Silverlight it actually provides a quite elegant solution. As you are probably aware eXtensible Application Markup Language (XAML) provides a flexible and structured method for building screens. Included within XAML is a very powerful method of data binding, which drastically reduces the manual work you need to perform.

The first thing to understand about WP7/XAML data binding is DataContext. The DataContext essentially provides the root object, which is used to pull data from. Specifically, this object specified will be used as a place to pull property values. Thus if you were to specify an object with a PageName property you would be able to use that property value to set the text value of a TextBlock for instance. To see how this plays out we can create a simple PageName property as shown below:

public string PageName 
return "Page Title 1"; 

Next we need to bind a Text Block as defined in XAML to this property as shown below:

<TextBlock x:Name="PageTitle" Text="{Binding PageName}" />

As you can see, the simple code {Binding Page Name} within the Text parameter is all you need to parameter PageName. If you were to go ahead and execute this you would find out that the TextBlock would show blank. The reason this would not automatically populate is that we have not specified a DataContext for the PageTitle TextBlock. We can set the DataContext using the following code snippet.

PageTitle.DataContext = this;

Provided the PageName property exists on the object referred to by "this" you can execute this code and see the PageTitle TextBlock shows the value specified by the PageName property. While this does work it is not terribly efficient as you do not want to specify the DataContext for each and every field. In fact, the DataContext also works by pulling it from its parent. Thus if you were to place the TextBlock inside a StackPanel called you could use the following state to specify DataContext.

TitlePanel.DataContext = this;

Since the PageTitle TextBlock is located within the TitlePanel it is able to pull the DataContext from its parent object. This concept becomes even more important when you want to bind to a list. Ideally, you would want to be able to specify the source of the list items as the DataContext on the List and have the List items bind automatically to each item. In fact, that is exactly how it works when you are binding to lists. The following XAML snippet demonstrates a simple list that binds the ItemsSource to a property called Items.

<ListBox x:Name="MainListBox" ItemsSource="{Binding Items}"> 
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" /> 
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" /> 

As you can see, this XAML snippet uses a ListBox ItemTemplate that contains the DataTemplate used to describe the items within the list. The DataTemplate contains two TextBlocks, which bind to properties LineOne and LineTwo. Explaining how this works is very simple; the ListBox is bound to an Items property that returns an ObservableCollection, which contains items that implement the INotifyPropertyChanged interface as well as the two properties LineOne and LineTwo. Like the examples above, the ListBox will need to be provided with DataContext and be able to get access to the Items property. But why an ObservableCollection instead of a standard List? The ObservableCollection is one of the better aspects of the XAML data binding. The ObservableCollection allows XAML to automatically monitor the collection for changes. Thus if you add/remove items within the collection, the ListBox bound to it will update to reflect the changes. The ObservableCollection itself will only XAML to monitor inserts/deletes from the collections. To monitor properties of items within the ObservableCollection, those items need to implement the interface INotifyPropertyChanged. This interface allows XAML to catch properties as they change. Thus if you were to change the LineOne property of one of the items, the ListBox would be updated to reflect the changes.


As you can see with the above examples, data binding to simple TextBlocks is quite simple. If you set up your code correctly you should be able to drastically reduce the manual coding necessary for updating onscreen fields. The real bonus data binding comes in when you are working with lists where updates to the underlying data are automatically reflected on the screen. If you start your project using the Windows Phone Data Bound Application template you can start your project off on the right foot and see further examples of how to implement data binding.

About the Author

Chris Bennett

Chris Bennett is a Manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at

Related Articles


  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • On-demand Event Event Date: October 29, 2014 It's well understood how critical version control is for code. However, its importance to DevOps isn't always recognized. The 2014 DevOps Survey of Practice shows that one of the key predictors of DevOps success is putting all production environment artifacts into version control. In this webcast, Gene Kim discusses these survey findings and shares woeful tales of artifact management gone wrong! Gene also shares examples of how high-performing DevOps …

Most Popular Programming Stories

More for Developers

RSS Feeds