Working with data

We now know about many controls and containers; now it is time to populate them with some data. As always, there are multiple ways to put dataâ textbox, button, listbox, and so onâbut, following the modern best practices, I will go with data binding. Data binding defines the way the data is linked to the properties of Model and interacts with the user. Using this mechanism, data is separated from the code that manages data. There are a few things that are important to know when starting to work with the data in Windows Phone. We will be dealing with some of them in the following section.

Binding expressions Imagine you have just created a WP8 solution, dragged-and-dropped the TextBlock control into the page, and now you need to tell the textbox what it has to display. As always, there are multiple ways to do that. First is the binding expression that is used in XAML. Binding expressions should be defined between curly braces "{" and "}". To visualize this method, let's define the class Customer , which will be used further in this chapter, and call it Model . public class Customer { public string Name { get; set; } public string Lastname { get; set; } public string Email { get; set; } public DateTime DateOfBirth { get; set; } public bool IsMarried { get; set; } public Country Location { get; set; } } Consider a situation where you want to bind the Customer class property to the TextBlock control that you have already defined. Using simple binding can be done in a few ways, as seen in the following code: <StackPanel> <TextBlock Text="{Binding Path=Lastname}"/> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Country.IsoCode}"/> </StackPanel> The preceding example shows how to link particular properties from Model (the Customer class) with the Text property of the TextBlock control. The first and second code lines have the same meaning; the path keyword can be omitted in simple expressions. The third example is a bit more sophisticated and binds the IsoCode property from an embedded object in the Customer model.

DataContext Most controls have the DataContext property. DataContext is accessible from the code and setting it will tell the XAML object which model it should use. Binding expressions that we have defined previously while resolving the value will look for the data context from leaf to root, meaning from TextBlock to StackPanel and next in any parent container. var customer = new Customer() { Name = "John", Lastname = "Smith", DateOfBirth = newÂ DateTime(1988, 1, 3) }; StckContainer.DataContext = customer; Now, the model is linked to the container but it can be any other parent container or UserControl .

Element-to-element data binding During development, we will often face a situation where one element will depend on another element's property. <StackPanel Name="StckContainer"> <Slider x:Name="SliderSize" Minimum="10" Maximum="72" Value="12" ></Slider> <TextBlock Text="{Binding Path=Lastname}" FontSize="{Binding Value, ElementName=SliderSize}"/> </StackPanel> The preceding example shows a Slider control that manages the font size of TextBlock . Using this type of binding, we have to initialize the ElementName property with a name and path to attribute of dependent control. This is a very simple demonstration; such bindings are used in much more advanced situations such as hiding UI elements or changing the control's content.

Binding mode There are three binding modes that can be defined in the binding expressionas follows: OneTime : This is the default binding mode. It populates a property with data when loading for the first time.

OneWay : This should be used for read-only controls. When the model changes, the control (UI) property will be updated.

TwoWay : This should be used within the editable form, where a user has to input some data. For example, the Name and Lastname textboxes. It updates the model and UI automatically. The OneWay and TwoWay modes need the INotifyPropertyChanged interface to be implemented in a model that is linked to the control.

INotifyPropertyChanged Why do we need the INotifyPropertyChanged interface? It implements events in our model class that will update the UI when the model changes (for example, when the Name property in the Customer class changes). This behavior is really useful when the application updates data in the background; changes will be directly seen in the UI. More about the INotifyPropertyChanged interface implementation and binding to property will be covered in Chapter 3, Building a Windows Phone 8 Application using MVVM.

Value converters Sometimes, developers need to display show data differently from how it is stored in a model or database. If you ever experience this, remember value converters. IValueConverter is an interface that implements the following two methods: Convert : It gets the property and processes and returns the converted values

ConvertBack : It works in the opposite manner to the Convert method A good example of converting the data is the DateTime converter. To define the converter, we have to remember two steps. First, create a class that implements IValueConverter , and then use it in XAML in the control resource. Out of experience, I suggest creating such converters in one location or library to keep our code clear and reuse it them in many projects.