Data binding is one of the most important development techniques that is used to provide user with visual representation of the data. It connects the underlying data source with the user interface and enables data manipulation and navigation. In this article I am going to explain how to implement simple data binding in Windows Phone 7 application. We will create a simple application with two input controls bound to the simple data source with controls for creating, deleting and navigating data in a data source. This example uses a book list paradigm to create an application for storing books which we have red.

Start by creating a new Windows Phone Application and name it something like BookList. When project is created and opened you can start the debugger with F5. Windows Phone emulator will start and after short period of time application will start running inside emulator. Do not close the emulator because it takes some time to start it again. Instead, you can press the back button and the debugger will be paused. When you run application next time it will start almost immediately. You are now ready to do some actual work. Look at solution explorer and open a file MainPage.xaml. This is the starting page of the application and it is shown when your application is started. When you open XAML part of the Page you should see a mobile phone screen:

Open the toolbox and drop some controls to your ContentPanel. Here is what we need:

• two textblock controls to serve as labels. Naming is not important.
• two textbox controls for data input. Name first one txtName and second txtAuthor.
• two buttons for adding and deleting records. Name first one btnAdd and second btnDelete.
• two buttons for navigation. Name first one btnPrevious and second btnNext.
• one more textblock control for data counter and name it lblCounter.

Arrange the controls like this:

Experienced developers will probably prefer to add controls by editing code in the XAML file. It’s the simple XML syntax and with the help of Visual Studio Intellisense it can be faster to edit various properties. On the other hand, arranging controls is much easier to do using the familiar drag and drop interface.

Now, when all controls are set and named, we can continue with the coding part of the project. We will need an object to bind controls to, so add a new class to the project and name it Book.cs. Open it and add two properties like this:

This class will be used to create book objects which will hold the basic information such as name and author we wish to show to the user. However, there is one more thing we need to do before we implement the complete logic.

First we must set BindingContext on ContentPanel. Open XAML file and find ContentPanel grid control, and set BindingContext property like this:

This enables all controls inside our ContentPanel to bind to properties of the object defined by the BindingContext.

Then we have to take care of our first textbox. Add or edit the text property like this:

We have just connected the Text property of the txtName control with the Name property of the Book class.  We can do the same the same with the txtAuthor control: 

Finally, we need some event handlers for all buttons. Double click at each of the buttons and event handlers will be created in the MainPage.xaml.cs file. You can see the event handler definition in your xaml file:

Open MainPage.xaml.cs file and add one private integer field and one property like on this image:

Field _currentItemIndex will be used as an index field for the currently selected book. "Books" property is a simple list which will hold all books we add.

Now add one more property named CurrentItem. This property will implement our entire selection logic so when a book object is set it will be selected as current. This simplifies code for list navigation and returns a book object from the list based on the _currentItemIndex property. If index is –1 it returns null. Its setter is a little more complex and implements the actual binding to ContentPanel grid object. When CurrentItem property is being set with the book object, DataContext property of the ContentPanel grid is set to the same object which automatically binds to two textbox controls we have previously set.

 

Make sure that the Books list object exists. You can add instantiation in the constructor.

Add a method for updating the navigation label. This method is executed after CurrentItem Property is being set.

Now we can write the event handler code to respond to user’s action.

Event handler which responds to the click on the add button is simple. First we create a new book object with some default text, add it to the list and set it as the current item. Property setter will do all the work with binding and updating current position in navigator.

Delete event handler is triggered when user wants to delete the current record. First there is a check if record exists in the first place. If it does, object is fetched from list with _currentItemIndex removed from the list and then destroyed. Finally, if other records exists in the list, last one will be set as current.

Move previous and next event handlers are just calculating which book is next or previous (if there is one) and by setting it as CurrentItem it will be selected on the interface.

Now you can run the application in the emulator and test if everything works. You should be able to add a new book, edit name and author fields, delete it and if you have more than one book you can navigate through the list using next and previous buttons.

Where to go from here?

You can extend Book class with new properties and bind its fields to new controls. This example does not implement saving and retrieving of the book list so every time you start the application the list will be empty. This feature will be one of the topics for my future posts.