Update to List Picker Control

I’ve made a few updates to the original code for the List picker control that I described here.

When creating this control I made a mistake of relying on LayoutUpdated event to make calls to ScrollIntoView when animation is chaning the control’s size. As Dave described it in his blog post “The LayoutUpdated event is a “static event” that is fired every time layout had anything to do anywhere in the tree. ” and it’s really not a good idea to actually change the layout inside of this event since it could lead to some unpredictable errors and behaviour. So I moved the code out of the LayoutUpdated event into the SizeChanged event instead.

The other change that I had to make to the control is to workaround the inconsistencies that exist in the beta tools in the theme related to the static resources such as PhoneTextBoxBrush and the missing PhoneTextBoxForegroundBrush resource. This is why the changed generic.xaml in the project now includes the following:

<!–This resource doesn’t exist in beta. You’ll need to uncomment this for release tools. –>
<!–<Setter Property=”Foreground” Value=”{StaticResource PhoneTextBoxForegroundBrush}”/>–>

 And to workaround the inconsistency of the PhoneTextBoxBrush in the light theme I had to add the following code to the control’s constructor code:

// This code is just to support themes in the beta tools
// it’s not needed for the release tools
this.backgroundBrush = GetThemedBackground();
this.Background = backgroundBrush;
// This code should uncommented be for release tools
// this.backgroundBrush = (Brush)(Application.Current.Resources[“PhoneTextBoxBrush”]); 

 You can download the updated version of the control from here.

Comments (19)

  1. RichardHeuser says:

    Thank you.  It works great now.  I hope that you continue to implement the missing controls.  Any and all would be appreciated.

    By the way, why did you limit the list to 5 entries?

  2. AlexYak says:

    The Design Templates for Windows Phone 7 specifiy that "An inline list picker can have up to 5 items." If it's more than five you should switch to using listbox type of control.

  3. RichardHeuser says:

    I was planning to use this as a replacement for the missing comboBox control.  Sounds like I should not since the list could be long.

  4. AlexYak says:

    Yes, the same Design Templates seem to suggest that for the lists bigger than 5 items we should use "picker box":

    "Picker box can be launched from a push button, a menu item or application bar."  

  5. AlexYak says:

    Just wanted to add that there's a sample of the "picker box" in the emulator SettingsTheme applet when you choose Accent Color

  6. RichardHeuser says:

    It looks like the Single Item Picker Box is quite similar to the List Picker.  The differences appear to be that the list is full screen and there is a header.  If that is correct, then I think that I could implement this using your List Picker as a starting point.

  7. AlexYak says:

    Sure you can use Picker List or even a button for this.

  8. Bill Mans says:


    Thank you for putting together the list picker control. I really like it. The only problem is, I cannot get it to work in my applications. I started a new "Silverlight for Windows Phone" project in Visual Studio. I chose the "Windows Phone Application" template, I then referenced the Phone.Controls.dll assembly that is available on CodePlex. I then added the following namespace:


    Then in the default ContentPanel, I add the following:

    <pc:ListPicker x:Name="testListPicker"></pc:ListPicker>

    When I run the application, I see the ListPicker. However, it is not condensed down to a single line. Rather, it stretches to the space available. The reason problem is, when I click an item in the ListPicker, I get an error that says "The parameter is incorrect.". It almost seems like there is an error with the animation stuff. Am I not including something?

    The code seems to break at the line that says:

    animation.To = to; // Line 255 in ListPicker.cs

    Thank you for putting together these controls. It's very nice for you to help the community in this way.

  9. AlexYak says:

    @Bill Mans – you are not supposed to use it in the XAML. The control behaves like a dialog. Please see the sample on how to use it.


  10. Bill Mans says:

    Hi @priozersk,

    I guess I'm a bit confused. I'm looking at the sample and in the sample I see:

    <my:ListPicker Grid.Row="1" BorderBrush="Blue" Height="48" HorizontalAlignment="Left"

     Name="listPicker1" VerticalAlignment="Top" Width="396" Margin="31,0,0,0" >




         <TextBlock x:Name="item" Text="{Binding}" FontSize="26" Margin="10, 6, 0, 8" />





    I thought that was XAML? Then the code-behind in the sample has the following in the constructor:

    this.listPicker1.ItemsSource = GetItems();

    this.listPicker1.SelectedIndex = 1;

    Where GetItems is defined as:

    private IList<string> GetItems()


     List<string> items = new List<string>();

     items.Add("30 seconds");

     items.Add("1 minute");

     items.Add("3 minutes");

     items.Add("5 minutes");


     return items;


    What am I missing / not-understanding? I really want to use this control. It's so nice :)!

  11. AlexYak says:

    @Bill Mans – my apologies. It's my missunderstanding. I thought you were asking about PickerBox. Back to your original problem. Do you have any data source assigned to the ItemsSource?

  12. Bill Mans says:


    I do have a data source assigned to the ItemsSource. I created a data source that is nearly identical to the sample. I have everything setup like this:

    Page.xaml (inside the default ContentPanel):

    <pc:ListPicker x:Name="testListPicker"></pc:ListPicker>

    Page.xaml.cs (inside the constructor):

    testListPicker.ItemsSource = GetGenderItems();


    private IList<string> GetGenderItems()


     List<string> items = new List<string>();




     return items;


    This approach actually creates the ListPicker on the screen. But, as mentioned earlier, it stretches to area alloted to it instead of being collapsed. The reason problem though is when I click an item in the ListPicker. When I click an item, I get the error explained above.

    Thank you for taking the time to look at this. Just out of curiosity, have you tried creating a new project and just referencing the .dll specifically? At first I thought that was my problem, but I don't think that's it. I'm just trying to get to the bottom of this.

    Thank you

  13. AlexYak says:

    If you could send me your project (alex.yakhnin(at)microsoft.com) I can take a look at this.


  14. RichardHeuser says:

    I am trying to use the List Picker that you so kindly built for us.  However, it does not scroll to the selected item.

    My XAML is




                                       <TextBlock x:Name="item" Text="{Binding}" FontSize="26" Margin="10, 6, 0, 8" />





    and my setup code is

         this.ListPickerPriority.ItemsSource = GetItems();

         this.ListPickerPriority.SelectedIndex = app.dataManager.currentPriority – 1;


       private IList<string> GetItems()


         List<string> items = new List<string>();






         return items;


    my event handler is

       private void ListPickerPriority_SelectionChanged(object sender, SelectionChangedEventArgs e)


         app.dataManager.currentPriority = ListPickerPriority.SelectedIndex + 1;


    Should it scroll to the item selected automatically or do I have to use the ScrollIntoView method each time a selection is made?

  15. AlexYak says:

    @ RichardHeuser – could you send me you project and I'll take a look. The email is in the comment above.

  16. RichardHeuser says:

    Everything is working correctly this morning.  I do not know why.  Anyway, thank you again for all the help.

    Dick Heuser

  17. Riyad Mammadov says:

    Hi Alex,

    Thank you for posting ListPicker code. I successfully plugged the control into my application. Initially, I didn't set row height to "Auto" and ListPicker was interfering with other controls on the page when expanding, but once I fixed that, everything worked beautifully.

  18. Kumar says:

    hi… I need to load the list picker control dynamically from .cs file.. for that i created the instance and loading the items are completed… But if you have more than five items… it shows items in another page,but the look and feel is not good, for exampe, we will create datatemplate,and binding the values for list picker in xaml page…Now how to create the datatemplate and binding the values for list picker from .cs file… please can anyone help me regarding this issue… Its very urgent to deploy please…. Thanks & Regards


  19. Firdouse says:

    Hi alex, I am using listpicker toselect multiple items. howto style the application bar icons which appear in full mode of the listpicker? also I would like to style or remove the default checkboxes which comes in full screen mode? Can you please let me know how to do that?