Data Binding the WP7 ListPicker to XML data using ExpressionBlend 4

published on: 11/13/2010 | Views: N/A | Tags: WP7Toolkit Blend Binding ListPicker

by WindowsPhoneGeek

Displaying data is an important part of every application. This functionality is a core concept in Silverlight and Expression Blend makes it accessible to the UI designer. In this tutorial, I will demonstrate how to bind the Windows Phone 7 ListPicker to XML Data using the Expression Blend designer.

Getting Started

The first thing you will need is Expression Blend 4. You can get the it here. Once you've installed Expression Blend 4 just follow the steps:

1. Start a new WP7 application project and add reference to:
    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll

2. Select the AssetsPanel and begin typing ListPicker, you will see two suggestions ListPicker and ListPickerItem. Drag a ListPicker Item over the design surface. 

Add Sample Data

Most of the user interfaces for typical LOB (line of business) applications are being driven by data. Controls might use data from external XML files, databases, or other data sources. In this example I will show you how easy it is to bind the ListPicker control to an external XML file.
The XML file is very simple, it contains information about cities:

<?xml version="1.0" encoding="utf-8" ?>
<Cities>
  <City>
    <Name>Madrid</Name>
    <Country>Spain</Country>
  </City>
<City>
    <Name>London</Name>
    <Country>UK</Country>
  </City>
<City>
    <Name>Las Vegas</Name>
    <Country>USA</Country>
  </City>
<City>
    <Name>Milan</Name>
    <Country>Italy</Country>
  </City>
</Cities>

To begin with addin data follow the steps:

1. Make a XML file that contains the data.

2. Click the Data Pane and then click the create sample data source icon.

3. From the drop-down menu, click Import Sample Data from XML:

4.A dialog box will appear. Browse your XML file containing the data you need.

5.Give a name to the data source : CitiesDataSource.

 

After that Expression Blend will generate a DataSource called CitiesDataSource. Clicking the EditSampleValues icon  allows you to fully customize your data by adding new properties, changing the existing ones or adding new values.

Note: You can define a new data source by selecting "Define New Sabple Data" or "Create Sample Data from class" from the CreateSampleData button.

Bind the data to the ListPicker

And finally just rag and drop the Collection from the Data Panel onto the ListPicker. The CitiesDataSource is bound to the ListPicker which is now displaying the data as interactive items. This is done by Blend automatically generating a DataTemplate for the data. Run the Project to scroll the list of items.

You can see the generated XAML code:
<DataTemplate x:Key="CityTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
<toolkit:ListPicker  VerticalAlignment="Top" ItemTemplate="{StaticResource CityTemplate}" ItemsSource="{Binding CityCollection}"/>

I this post I demonstrated how to bind a Windows Phone 7 ListPicker to XML file using ExpressionBlend  just with a few mouse clicks.
Hope you enjoy this article. The full source code is available here.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Data Binding the WP7 ListPicker to XML data using ExpressionBlend 4'

Title Your Name

Comment