Windows 8 Primer–Data Binding (Part 1)

Data-binding is often thought of as an advanced topic, but there really is no reason for that. data-binding is

  • Critical to writing XAML applications
  • Not very difficult to learn
  • A very powerful technique

Note to Silverlight, WPF and Windows Phone Programmers: Nothing Here Is New.  Data-binding in Windows 8 works exactly as you expect.

The basic idea behind data-binding couldn’t be simpler: we are going to provide values to UIElements based on the values of objects or of other UIElements.  In this first tutorial, we’ll keep it simple and bind the value of POCO (Plain Old CLR Objects) to UI elements.

For example, if I have an object that represents an Employee, and that Employee object has two public properties, Name and Title, I may want to bind those properties to TextBlocks so that I can display them easily without hard-coding the values. In that case, the Employee(POCO object) is the source and the TextBlocks (UIElements) are the targets of the binding.

We begin by creating a new Windows 8 project. Within that project, we create a new class Employee.cs

 class Employee
 {
     public string Name { get; set; }
     public string Title { get; set; }

     public Employee( string name, string title )
     {
         Name = name;
         Title = title;
     }

     public static Employee GetEmployee()
     {
         var emp = new Employee( "Tom", "Developer" );
         return emp;
     }

 }

The Employee class has two public properties, Name and Title.  We always bind to public properties.  This class also has a static method, GetEmployee, which generates a new Employee instance.  This substitutes for retrieving an Employee object from, e.g., a database.

Here is how we bind to these two properties in the XAML,

<StackPanel
    Name="xDisplay">
    <StackPanel
        Orientation="Horizontal">
        <TextBlock
            Text="Name:" />
        <TextBlock
            Margin="5,0,0,0"
            Text="{Binding Name}" />
    </StackPanel>
    <StackPanel
        Orientation="Horizontal">
        <TextBlock
            Text="Title:" />
        <TextBlock
            Margin="5,0,0,0"
            Text="{Binding Title}" />
    </StackPanel>
</StackPanel>

We bind to the Name and Title properties, but of which object? It may be that there are many Employee objects around at any given moment. The answer is found in the DataContext. This can be set in the XAML or in the code; here we set it in code behind file, MainPage.xaml.cs,

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    xDisplay.DataContext = Employee.GetEmployee();
}

The DataContext of the StackPanel is set to the result of calling the static method GetEmployee.  The method returns a single Employee object whose properties we can now use to bind to the TextBlocks.  Notice that the TextBlocks “inherit” the DataContext of any object higher in the visual tree, unless they override it with their own DataContext.

Next up, Two-Way Binding.

[This article is based in part on material from my forthcoming book XAML For Windows 8: Read Me First]

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 online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and 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 Microsoft MVP.
This entry was posted in Data, Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

4 Responses to Windows 8 Primer–Data Binding (Part 1)

Comments are closed.