Partager via


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

  • Anonymous
    September 01, 2010
    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?

  • Anonymous
    September 01, 2010
    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.

  • Anonymous
    September 02, 2010
    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.

  • Anonymous
    September 02, 2010
    The comment has been removed

  • Anonymous
    September 02, 2010
    The comment has been removed

  • Anonymous
    September 02, 2010
    The comment has been removed

  • Anonymous
    September 02, 2010
    Sure you can use Picker List or even a button for this.

  • Anonymous
    September 29, 2010
    The comment has been removed

  • Anonymous
    September 29, 2010
    The comment has been removed

  • Anonymous
    September 29, 2010
    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" >  <my:ListPicker.ItemTemplate>  <DataTemplate>    <StackPanel>      <TextBlock x:Name="item" Text="{Binding}" FontSize="26" Margin="10, 6, 0, 8" />    </StackPanel>  </DataTemplate> </my:ListPicker.ItemTemplate> </my:ListPicker> 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");  items.Add("never");  return items; } What am I missing / not-understanding? I really want to use this control. It's so nice :)!

  • Anonymous
    September 29, 2010
    @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?

  • Anonymous
    September 29, 2010
    @priozersk 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(); Page.xaml.cs: private IList<string> GetGenderItems() {  List<string> items = new List<string>();  items.Add("Unspecified");  items.Add("Male");  items.Add("Female");  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

  • Anonymous
    September 29, 2010
    If you could send me your project (alex.yakhnin(at)microsoft.com) I can take a look at this. -Alex

  • Anonymous
    September 29, 2010
    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                        <my:ListPicker.ItemTemplate>                            <DataTemplate>                                <StackPanel>                                    <TextBlock x:Name="item" Text="{Binding}" FontSize="26" Margin="10, 6, 0, 8" />                                </StackPanel>                            </DataTemplate>                        </my:ListPicker.ItemTemplate>                    </my:ListPicker> 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>();      items.Add("P1");      items.Add("P2");      items.Add("P3");      items.Add("P4");      items.Add("P5");      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?

  • Anonymous
    September 29, 2010
    @ RichardHeuser - could you send me you project and I'll take a look. The email is in the comment above.

  • Anonymous
    September 30, 2010
    The comment has been removed

  • Anonymous
    October 14, 2010
    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.

  • Anonymous
    November 28, 2010
    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 Kumar

  • Anonymous
    March 14, 2012
    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?