Working with Windows Phone User Interfaces, Part 1
Developing for Windows Phone is easy if you have been doing any XAML at all. That’s because you use Silverlight for Windows Phone development. This is a great thing because everything you already know can be applied immediately. This is not to say that there are no new things that you will have to learn. In fact, with the reduced screen size, the ability to change the orientation of the phone and some of the new types of pages, there are actually quite a few things you will need to learn. This article and the next one is your introduction to some of these new UI techniques. This article assumes that you have Visual Studio 2010 and the Windows Phone tools installed along with it. The Windows Phone tools must be downloaded separately and installed with VS 2010. You may also download the free Visual Studio 2010 Express for Windows Phone developer environment. Working with the List Box Control To start out, you will first build a list box that displays a list of products as shown in Figure 1. This is just a standard Windows Phone Page onto which you drag a ListBox control and bind the ItemsSource property of the list box to a collection class of Product objects. You then create a DataTemplate for each ListBoxItem to display the product name and price. 
Figure 1: Windows Phone list box with images.Build the Product Class In order to get the list box populated with products, you will need two classes: a Product class with three properties, and a collection class of Product objects. The Product class contains the ProductName, Price and ImageUri properties. For this first sample you will not use the ImageUri, but that property will be used in the next sample. Create the Product class as shown in the following code: public class Product {
public Product() { }
public Product(string name, decimal price,
string imageUri)
{
this.ProductName = name;
this.Price = price;
this.ImageUri = imageUri;
}
public string ProductName { get; set; }
public decimal Price { get; set; }
public string ImageUri { get; set; }
}
The Products class contains an ObservableCollection of Product objects in a property named DataCollection. The constructor of the Products class calls a method named BuildCollection to populate the DataCollection with some sample data as shown in Listing 1. Value Converter As you can see in Figure 1, Price is shown in a currency format. Unfortunately, in the current version of Silverlight for Windows Phone, the StringFormat attribute on the Binding class is absent. Therefore, you need to create a value converter for displaying a value in currency format. Create the PriceConverter class shown in Listing 2 that implements the IValueConverter interface. In the Convert method, you take the “value” parameter passed in and convert it to a decimal value. You then return that value as a string formatted with the “c” option in the ToString() method. Create Classes in XAML Now that you have the Product class, the Products class and the PriceConverter classes created, you need to create an instance of the Products collection class and the PriceConverter class in your XAML. In your MainPage.xaml, add an xml namespace to the name of your project as shown here: xmlns:data="clr-namespace:WPListBox"
Next, you create an instance of the Products and PriceConverter class in XAML. The constructor for the Products class will create the initial collection of product objects and load the DataCollection property. <phone:PhoneApplicationPage.Resources>
<data:Products x:Key="productCollection" />
<data:PriceConverter x:Key="priceConvert" />
</phone:PhoneApplicationPage.Resources>
These two classes may now be used within the rest of your XAML by referencing them by their x:Key name. Create List Box Now it is time to create the List Box and connect it to the static resource you created in the XAML above. Listing 3 shows the XAML you use to build the list box for this sample. Let’s break down each of the areas of the ListBox XAML shown in Listing 3. The ItemsSource property references the static resource you created named “productCollection”. This is an instance of the Products class. The Path attribute refers to the DataCollection property that was populated by the BuildCollection method that is called in the constructor of the Products class. Next, you have the definition for each row in the list box defined in the ItemsTemplate. The ItemsTemplate should not be too foreign to anyone that has done XAML. Each row of the ListBox is defined within the <DataTemplate> area of the ItemsTemplate. The DataTemplate contains a <StackPanel> control with two TextBlock controls within it. This allows the two TextBlock controls to be displayed one on top of the other. Notice in the text block that displays the Price the use of the value converter class you created earlier. You bind to the Price property using the Path attribute of the Binding class. However, before the Binding class displays the Price, it passes the value to the converter. The Convert() method of the PriceConverter class formats the price and returns it as a string to be displayed in the TextBlock. |