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; }
            set
            {
                _name = value;
                RaisePropertyChanged();
            }
        }

        private string _title;
        public string Title
        {
            get { return _title; }
            set
            {
                _title = value;
                RaisePropertyChanged();
            }
        }

        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,

 

<ComboBox
    x:Name="ComboBox1"
    ItemsSource="{Binding}"
    Foreground="Black"
    FontSize="30"
    Height="50"
    Width="550">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel
        Orientation="Horizontal"
        Margin="2">
                <TextBlock
            Text="Name:"
            Margin="2" />
                <TextBlock
            Text="{Binding Name}"
            Margin="2" />
                <TextBlock
            Text="Title:"
            Margin="10,2,0,2" />
                <TextBlock
            Text="{Binding Title}"
            Margin="2" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

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();
}

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Data, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

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

  1. Pham Le says:

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

  2. Pete says:

    Clear & simple refresher thanks!

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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>