Windows 8 & Data Binding. Part 5–Binding to Lists

In Part 4 of this mini-series on data binding we looked at Data Conversion. ComboBox Today we look at binding a UI Element to a list of objects.

The trick in binding to a list, is to teach the control how to display the bound data. It needs to know how to display each object in the list – what properties of the object should be displayed and how should they appear?

You do this most often with a DataTemplate – a template that will be reproduced for each member of the collection. In the next example we create an Employee class. Each Employee has two properties, Name and Title. We also give the class a static method that returns a list of Employees – simulating retrieving data from a web service or other data source

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace DataBindingLists
    class Employee : INotifyPropertyChanged
        private string _name;
        public string Name
            get { return _name; }
                _name = value;

        private string _title;
        public string Title
            get { return _title; }
                _title = value;

        private void RaisePropertyChanged(
            [CallerMemberName] string caller = "")
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(caller));

        public event PropertyChangedEventHandler PropertyChanged;

        public static ObservableCollection<Employee> GetEmployees()
            var employees = new ObservableCollection<Employee>();
            employees.Add(new Employee() { Name = "Washington", Title = "President 1" });
            employees.Add(new Employee() { Name = "Adams", Title = "President 2" });
            employees.Add(new Employee() { Name = "Jefferson", Title = "President 3" });
            employees.Add(new Employee() { Name = "Madison", Title = "President 4" });
            employees.Add(new Employee() { Name = "Monroe", Title = "President 5" });
            return employees;


Notice that the collection type we use for Employee is an ObservableCollection. This type implements INotifyPropertyChanged and INotifyCollectionChanged, and so will inform the UI if anything in the collection is changed.

Note that to ensure notification if an individual element in the collection is changed (e.g. an employee’s name changes) you must also notify INotifyPropertyChanged on the element type itself.

All we need now is to bind this to a control that handles collections of data, such as a ComboBox. The ComboBox has no way of knowing, however, how to display an Employee. Left to its own devices, it will just display whatever ToString resolves to. We could override ToString, but it is much more efficient and flexible to teach the ComboBox how to display the Employee exactly as we want, and we do that with a DataTemplate,


            Margin="2" />
            Text="{Binding Name}"
            Margin="2" />
            Margin="10,2,0,2" />
            Text="{Binding Title}"
            Margin="2" />

The ItemTemplate says “this is how you display each item” and the DataTemplate lays out how the data is displayed. In this case, we are displaying the data by laying out four TextBlocks horizontally so that each Employee appears on a single line in the ComboBox. Notice that we bind to the ItemsSource property with the keyword binding but we don’t specify what we’re binding to. That is done by setting the DataContext in the code-behind,

protected override void OnNavigatedTo(NavigationEventArgs e)
    ComboBox1.ItemsSource = Employee.GetEmployees();

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Data, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

4 Responses to Windows 8 & Data Binding. Part 5–Binding to Lists

  1. Richa Pathak says:

    Hi Jesse,
    I have been trying to bind the return type of the function with prototype to a listview in windows 8 app:
    public static async Task<List> PopulateListItems().
    where ListClass is the name of my class. However I get an error of
    Cannot implicitly convert type ‘System.Threading.Tasks.Task<System.Collections.Generic.List>’ to ‘System.Collections.Generic.List.
    Your guidance would be much appreciated.

  2. Pham Le says:

    Thanks so much for your tutorials. Really easy to understand.

  3. Pete says:

    Clear & simple refresher thanks!

  4. Pingback: Windows 8 Developer Links – 2012-08-22Dan Rigby | Dan Rigby

Comments are closed.