Working with WP7 ListPicker SelectedItem

by WindowsPhoneGeek

In this post I am going to talk about different techniques of accessing(manipulating) the SelectedItem of the Silverlight for WP7 Toolkit  ListPicker control.

After we published "Working with WP7 ListBox SelectedItem" article we received lots of requests for a similar post related to the ListPicker SelectedItem issues. So in this article I will answer some of the questions with short examples.

NOTE: Generally ListPicker is a kind of ItemControl together with ListBox and  other similar controls. This means that the basic structure is the same as well as the SelectedItem behavior.

When populating a ListPicker with items you have two potions:

Option1 -You can use ListPickerItems

Option2 - Data Binding

When using Option1 the SelectedItem is actually a ListPickerItems so it is easy to perform the desired manipulations. However when using Optio2 (which is actually 90% of the cases) the SelectedItem is the type of the business object (data class) which you use when performing data binding.

To begin with using ListPicker first  add a reference to  the Microsoft.Phone.Controls.Toolkit.dll  assembly. You will also need to add the "toolkit" prefix declaration. Make sure that your page declaration includes the "toolkit" namespace:

<phone:PhoneApplicationPage 
...   
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

Lets say that we have a sample data bound ListPicker where SampleData is our business object (data class) :

public class SampleData
{
    public string Day { get; set; }
    public string Temperature { get; set; }
    public int Number { get; set; }
}

<toolkit:ListPicker x:Name="listPicker" Header="Weekly Temperatures" >
    <toolkit:ListPicker.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Border Background="YellowGreen" Width="50" Height="50" Margin="5">
                    <TextBlock Text="{Binding Number}" FontSize="30" HorizontalAlignment="Center"/>
                </Border>
                <TextBlock Text="{Binding Day}" Width="150" />
            </StackPanel>
        </DataTemplate>
    </toolkit:ListPicker.ItemTemplate>
    <toolkit:ListPicker.FullModeItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Day}" Width="150"/>
                <TextBlock Text="{Binding Temperature}" Width="50"/>
                <Button Click="Button_Click" Content="Button" Margin="0,-10,0,0"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>

Question 1: How to access the Selected ListPickerItem when having databound ListPicker ?

Answer: In order to get the selected ListPickerItem all you need to do is the following:

private void btnGetSelectedItem_Click(object sender, RoutedEventArgs e)
{
    ListPickerItem selectedItem = this.listPicker.ItemContainerGenerator.ContainerFromItem(this.listPicker.SelectedItem) as ListPickerItem;
}

Question 2: How to access the SelectedItem from a ListPicker event  handler?(when having databound ListPicker )

Answer: Lets say that we have subscribed to the ListPicker  SelectionChanged event. At first we will get a reference to the current SelectedItem data object  and after that we will get a reference to the SelectedItem container which is of type ListPickerItem.:

private void listPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   //Get the data object that represents the current selected item
   SampleData data = (sender as ListPicker).SelectedItem as SampleData;

   //Get the selected ListPickerItem container instance    
   ListPickerItem selectedItem = this.listPicker.ItemContainerGenerator.ContainerFromItem(data) as ListPickerItem;
}

Question 3: How to access the SelectedItem from a control placed inside ListPicker ItemTemplate/FullModeItemTemplate?

Answer: In this case we will add a Button inside the ListPicker  FullModeItemTemplate and will subscribe to its Click event. As you can see below you can get a reference to the SelectedItem data object through the DataContext and after that you can use this data object to get a reference to the Selected ListPickerItem :

private void Button_Click(object sender, RoutedEventArgs e)
{
    SampleData data = (sender as Button).DataContext as SampleData;
    ListPickerItem pressedItem = this.listPicker.ItemContainerGenerator.ContainerFromItem(data) as ListPickerItem;
    if (pressedItem != null)
     {
        //do something
     }
}

Question 4: How to set the SelectedItem when having databound ListPicker?

Answer: The easiest way to set the SelectedItem of a ListPicker is to use its SelectedIndex property:

private void btnSetSelectedIndex_Click(object sender, RoutedEventArgs e)
{
    this.listPicker.SelectedIndex = 1;
}

NOTE: SelectedIndex = 1 means the second item!

Question 5: How to access the Selected ListPickerItem and its data if I know the SelectedIndex? (when having databound ListPicker)

Answer: In this case at first we will get a reference to the selected ListPickerItem usingItemContainerGenerator.ContainerFromIndex and after that we will get the real data through the DataContext:

private void btnSelectedIndex_Click(object sender, RoutedEventArgs e)
{
    ListPickerItem selectedItem = this.listPicker.ItemContainerGenerator.ContainerFromIndex(2) as ListPickerItem;
    SampleData data = selectedItem.DataContext as SampleData;
}

NOTE: In some cases if you need to reference the selected item before the ListPicker is initialized you will have to use a Dispatcher. For example:

Dispatcher.BeginInvoke(() => 
{ ListPickerItem selectedItem = this.listPicker.ItemContainerGenerator.ContainerFromIndex(2) as ListPickerItem; });

That was all about the ListPicker SelectedItem in Windows Phone 7. You can find the full source code here:

I hope that this post was helpful.

You may also may find interesting some of our previous articles related to WP7 ListPicker:

• How to customize the ListPicker selected item
• Customizing ListPicker for WP7 - Part1
• Customizing ListPicker for WP7 - Part2
• ListPicker FullScreen mode Background problem: workaround
• Data Binding the WP7 ListPicker to XML data using ExpressionBlend 4

You can also follow us on Twitter @winphonegeek

Comments

        base.OnNavigatedTo(e);

        Binding pickerBinding = new Binding("Description") {
            Source = App.Current.Resources["Settings"],
            Mode = BindingMode.TwoWay
        };
        lpBenefitFactor.SetBinding(ListPicker.SelectedItemProperty, pickerBinding);     // blows up here