Windows Phone List Box with Images

Wednesday, October 27, 2010

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 you can apply immediately. Let’s take a simple example like presenting a list of products with images in a list box (Figure 1) in the Windows Phone emulator. This article assumes that you have VS.NET 2010 and the Windows Phone tools installed along with it. The Windows Phone tools must be downloaded separately and installed with VS.NET 2010. You may also download the free VS.NET 2010 Express for Windows Phone developer environment.

Figure 1: Windows Phone List Box With Images

The Product Class
For this example, I will be using a Product class with three properties, and a collection class of Product objects using the Generic List class.

You can create this sample by creating a 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; }
}

Create a collection class that initializes a property called DataCollection with some sample data as shown in the code below:

public class Products : List<Product> {
public Products() {
BuildCollection();
}

public List<Product> DataCollection { get; set; }

List<Product> BuildCollection() {
DataCollection = new List<Product>();

    DataCollection.Add(new Product(
      "Haystack Code Generator for .NET", 799, "Haystack.jpg”));
    DataCollection.Add(new Product(
      "Fundamentals of N-Tier eBook", 19.95, "NTier.jpg"));

// MORE PRODUCTS HERE – REMOVED FOR BREVITY

return DataCollection;
}
}

Value Converter

As you can see in Figure 1, the Price is shown in a currency format. Unfortunately in the Windows Phone version of Silverlight, the StringFormat attribute on the Binding class is absent. So you will need to create a value converter for displaying a value in a currency format. Create the following class that implements the IValueConverter interface. In the Convert method you will then take the “value” parameter passed in, convert it to a decimal value, then return that value as a string formatted with the ”c” option in the ToString() method.

public class PriceConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
decimal price;

price = (decimal)value;

return price.ToString("c");
}

public object ConvertBack(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

Create Classes in XAML

Now that you have the Product class, the Products class and the PriceConverter classes created, you now 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:WPListBoxImage"

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.

<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 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 above XAML. Below is the XAML used for the complete list box. After you look at this XAML you will learn about each of the various pieces that make up the list box.

Let’s now break down each of the areas of the ListBox XAML shown above. First, notice the ItemsSource property is simply setup to reference the static resource you created named “productCollection”. This is the Products collection class. The Path attribute refers to the DataCollection property within the Products collection that was created 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 to foreign to anyone that has done XAML. Each row of the ListBox is defined within the <DataTemplate> area of the ItemsTemplate. In this XAML you will have a <StackPanel> control with its orientation set to “Horizontal”. This is done so the Image can be on the left side and the text for the product name and the price can be on the right side of the row.

Notice in the text block that displays the actual 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 it through the converter. The Convert() method of the PriceConverter class formats the price and returns it as a string to be displayed in the TextBlock.

Summary

That’s all there is to creating a list box that displays some product data in a Windows Phone application. Again, there is not a lot different here as you will just be using Silverlight to develop for the Windows Phone. Of course, there are some considerations you need to think about when developing for the phone. First you need to think about the font size and the spacing between items in a list box. If you are going to have your user select one of your entries, you want to leave plenty of space for their fingers to select the item they want, and not hit one of the surrounding items by mistake. So, download the Windows Phone tools for VS.NET 2010 and start developing phone apps!

NOTE: You can download the complete sample code (in both VB and C#) at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "Windows Phone Image List Box" from the drop-down.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
Visit http://www.pdsa.com/Event/Blog for a free videos on Silverlight entitled Silverlight XAML for the Complete Novice - Part 1.

Windows Phone List Box with Images

Past Blog Content

Blog Archive

2015

2014 (18)

2013 (11)

2012 (19)

2011 (29)

2010 (19)

2009 (28)

2008 (0)

2007 (14)

2006 (6)

1 Comment