Book Image

Windows Phone 8 Application Development Essentials

By : Tomasz Szostak
Book Image

Windows Phone 8 Application Development Essentials

By: Tomasz Szostak

Overview of this book

<p>Windows Phone 8 replaces Windows Phone 7 devices with the Windows NT kernel found on many Windows 8 components. Windows 8 will give you more options to develop better and more visually appealing PC and Tablet applications.</p> <p>A practical guide that will show you how you how to create testable MVVM applications keeping in mind the best UI practices. You will learn how to integrate peripheral sensors and social portals like Facebook and Twitter into your applications. This book shows the advantages of using modern patterns instead of the traditional way of programming.</p> <p>Starting with a Windows Phone UI description, the guide then takes you through the world of fast and fluid design guidelines. After that, you will be shown the beauty of C# and MVVM advantages, finishing with clear descriptions of mobile-application integration with peripherals and social media. Clear and well-described examples throughout will help you become a WP8 developer.</p> <p>You will also learn how to test your applications using Unit Test cut dependencies in your methods using Mocks, and use the newest features of C# such as asynchronous methods. If you are more of a designer than a developer, then there is also an explanation on how to create a consistent look and feel for Windows Phone applications.</p>
Table of Contents (12 chapters)

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.

List binding

Another very important topic is binding a list. It is hard to even imagine an application without lists. Lists or collections, which are pretty much the same, can be linked to list control using a binding mechanism. It is very easy to implement in a markup definition.

<ListBox Name="ListCustomers" ItemsSource="{Binding}" DisplayMemberPath="Name">
</ListBox>

The trickiest part goes in code. Remember when we were talking about INotifyPropertyChanged? We can create a list of any objects, bind it to the list, and the list will automatically handle updating of the UI. ObservableCollection is a generic collection that provides notification when the items get removed, or added, or when refreshed. Look at the following code and see how simply I did that!

ObservableCollection<Customer> customers = new ObservableCollection<Customer>();
ListCustomers.DataContext = customers;
customers.Add(customer);

In this example, the collection was created, linked to the ListBox control, and one object was added to the collection in code. Because of the features of the observable collection, the UI gets updated because of implicit binding.