Windows Phone From Scratch #5 – Data Binding

Databinding is a somewhat advanced topic, typically covered in the second or even the final third of most Silverlight books.  We’re going to tackle it in the next couple mini-tutorials because

• It isn’t difficult to understand
• It isn’t difficult to implement
• It is critical both to most applications and to the principal design pattern used with Windows Phone: MVVM

To cover this well, we’ll create the form shown in the illustration and we’ll populate that form by binding to an objects; specifically a person.  We’ll do this in four mini-tutorials. 

1. Create the Person class

2. Create the User Interface with layout controls and input controls

3. Bind properties on the Person class to controls

4. Advanced Binding, including binding from one UI element to another, and Binding conversions.

Create the Person class

To get started, create a new Windows Phone application in Visual Studio, and name it DataBinding.  Right click on the project and select Add->New->Class and name the class Person.cs. 

The class consists of an enumeration and a set of automatic properties,

public class Person
{
   public enum Sex
   {
      Male,
      Female,
   }
   public string Name { get; set; }
   public bool Moustache { get; set; }
   public bool Goatee { get; set; }
   public bool Beard { get; set; }
   public Sex WhichSex { get; set; }
   public double Height { get; set; }
   public DateTime BirthDate { get; set; }
   public bool Favorite { get; set; }

}

You can see pretty quickly how these properties will map to the various input controls shown in the illustration at the top.  The booleans can be either CheckBoxes or RadioButtons (depending on whether they are mutually exclusive or not). 

We are using a couple input controls you may not have seen yet, however.  We’re using a DatePicker for the birth date and a slider (with a TextBlock) for the height. More on these in the next tutorial. 

Before reading the next mini-tutorial you might want to try creating a first iteration of the UI yourself, based on what you already know, the illustration and the class definition.