ListPicker
is displayed in three modes: normal, expanded, and full screen.
When in normal mode, the ListPicker
is inactive and does not have focus, and displays its selected item while hiding the rest.
In expanded mode, the ListPicker
resizes itself to display all items. This works best when there are only a few items to display. Page content is positioned to accommodate the size of the expanded ListPicker
, and then is repositioned when the ListPicker
contracts when an item is selected (see Figure 9.1).
When in full-screen mode, the ListPicker
presents options using a pop-up, which hides the rest of the page content. Full-screen mode is appropriate when the number of options to choose from is large (see Figure 9.2).
The ListPicker.ItemCountThreshold
property determines the maximum number of items for which expanded mode is used. If the number of items exceeds this value, full-screen mode is used instead of expanded mode. ItemCountThreshold
default value is five.
You can determine the current state of a ListPicker
via its ListPickerMode
property. ListPickerMode
may be one of the following values:
Normal—Only the selected value is visible.
Expanded—The ListPicker
is displaying all its items by expanding inline and displacing other page content.
Full—A dedicated pop-up displays all items.
The ListPicker
sample uses the MVVM pattern. The ListPickerViewModel
creates and exposes a list of City
objects, which is then presented using a ListPicker
in the view.
The City
class has a Name
and a Description
property (see Listing 9.1).
public class City
{
public string Name { get; private set; }
public string Description { get; private set; }
public City(string name, string description)
{
Name = name;
Description = description;
}
}
The viewmodel creates several City
objects as shown:
readonly IEnumerable<City> cities = new List<City>
{
new City("Prague", "Capital of the Czech Republic."),
/* Removed for brevity. */
new City("Los Angeles", "Most populous city in California.")
};
public IEnumerable<City> Cities
{
get
{
return cities;
}
}
The second task of the viewmodel is to keep track of the currently selected City
, using a property named City
.
The view contains a ListPicker
whose ItemsSource
property is bound to the viewmodel’s Cities
property. In addition, the ListPicker.SelectedItem
property uses a two-way data binding to the City
property, so that when the user selects an item in the ListPicker
, the City
property is set to the selected value. See the following excerpt:
<toolkit:ListPicker ItemsSource="{Binding Cities}"
ItemCountThreshold="20"
SelectedItem="{Binding City, Mode=TwoWay}"
Header="city"
FullModeHeader="city">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"
FontSize="{StaticResource PhoneFontSizeNormal}" />
<TextBlock Text="{Binding Description}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Foreground="#ff666666" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"
FontSize="{StaticResource PhoneFontSizeNormal}" />
<TextBlock Text="{Binding Description}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Foreground="#ff666666" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
</toolkit:ListPicker>
You see that a custom DataTemplate
is defined for both the Expanded and Full ListPickerMode
values. If the ListPicker
is populated with a list of strings (or objects whose ToString
method affords an appropriate representation of the object), providing a custom DataTemplate
for each of these modes is in most cases not necessary, because the built-in templates suffice.
The FullModeHeader
property defines the content placed at the top of the item list when the ListPickerMode
is equal to Full. The FullModeHeader
property can be defined not only as a string, but also using a DataTemplate
, much like the ItemTemplate
and FullModeItemTemplate
. The FullModeHeader
property is not required (see Figure 9.3).
3.15.149.45