The ComboBox is Dead, Long Live the ListPicker

Introduction

In this article, I am going to write about the ListPicker control.

Background

The other day, I went and wrote a small app for WP7 (Windows Phone 7). The app wasn't very impressive so I won't be writing about that app.

What I wanted to write was about something that surprised me. I am pretty new to all this WP7 development, so I was kind of stumped when I found out that the phone does not have a ComboBox.

I found this to be rather odd, but could on the other hand understand that a ComboBox is probably not a control that is very well suited for a device like a phone. The OS itself seems to be using a list picker thingy instead, but that control seems to have stayed in Microsoft’s own control library and is not available. Is that so?

Using the Code

Actually WP7 has a ComboBox control. Although this control is not directly available from the Visual Studio toolbox (or the Expression Blend 4 for Windows Phone 7 toolbox for that matter), you can add it directly via XAML. It doesn’t look too appealing, especially if you use other Metro-styled controls in your application.

As you can see in the images above, the ComboBox doesn't look as you expect it to be.

In order to add it, you just use the following code:

<ComboBox Width="200" Height="100">
    <ComboBoxItem Content="aaa" />
    <ComboBoxItem Content="bbb" />
    <ComboBoxItem Content="ccc" />
</ComboBox> 

This is the code I used in the above images.

Being frustrated, I started looking around the net to find a reasonable solution. The first solution that was good enough was this article talking about how to change your ComboBox control to be styled as a metro control.

Looking into this example, I realized that this can't be true. It can be debatable but as for UI and development, Microsoft has always done a good job providing all the tools needed.

I decided to keep checking and found a control called ListPicker.

ListPicker is a control that acts much like a ComboBox. Let me show you:

Much better. right?

In order for you to do this, all you need to do is use this code:

<toolkit:ListPicker>
    <toolkit:ListPickerItem Content="aaa" />
    <toolkit:ListPickerItem Content="bbb" />
    <toolkit:ListPickerItem Content="ccc" />
</toolkit:ListPicker>

And this code gives you the same effect as in the linked article and as you can see, it is very simple.

So what is toolkit? As mentioned in the official site:

A product of the Microsoft Silverlight team, the Silverlight Toolkit 
adds new functionality for designers, developers, and the community to 
provide an efficient way to help shape product development.  

It is a set of tools that has a high priority to be integrated in the next version of the development kit.

So what you need to do is download and install the latest available download (Silverlight for Windows Phone Toolkit - Nov 2010 while writing this article).

After the installation is done, what you need to do is add it to your project. I recommend adding it through the toolbox, but you could also do this through the references menu. Whatever does it for you.

If you decided to add the toolkit through the references menu, you need to add at the root element of the document the following line:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
	assembly=Microsoft.Phone.Controls.Toolkit"

Just write xmlns:toolkit= and use the intellisense to complete.

Now add the above code and you are done.

Happy programming.

Points of Interest

I recommend the download of the toolkit event if you are not going to use the ListPicker. It is a set of useful controls that probably will be in the next release of Windows Phone 7 Development Kit.

History

• 22^nd November, 2010: Initial post

I hope to update this when Microsoft will release the official version of the ListPicker control.