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]

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, Essentials, Mini-Tutorial, Windows 8 and tagged . Bookmark the permalink.

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

  1. allamiro says:

    excellent post Can you please write a tutorial on how to bind a windows 8 app to a word press website or mysql database I m still researching on this I couldnt find a lot thanks any way

  2. Pingback: Introduction to Windows 8 data binding | fincooper

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

  4. Mike Ward says:

    It’s been a while since I’ve done WPF but didn’t public properties have to support the INotifyPropertyChange interface at one time to participate in data binding?

  5. Pinal Bhatt says:

    Gr8 article to start with, waiting for rest of the parts.

  6. sunil says:

    Great simple example! I am getting into windows 8/xaml stuff, these type of no fuss examples help clarify core concepts.

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>