Update to the Picker Box control.


Last time I showed you how you could create the Picker Box functionality in your Windows Phone 7 applications. There’re a few updates that I had to make in order to match Picker Box’s behavior to it snative counterpart.

First of all you will probably notice that the native control will react on selecting an item even if it’s already selected. The reason PickerBoxDialog didn’t do it is because we are hooked up into the listbox_SelectedChanged event. To make our control to behave we can hook up into the MouseLefButtonUp event on each ListBoxItem in the ListBox control. This is done in the PrepareStoryboards method: To fix this I made the ListBox selection mode to be multi-select and added some logic to manipulate with RemovedItems and AddedItems.

The other issue with the code which I posted before is that the animations that are executed on the dialog’s open or close not exactly match the native’s dialog behavior. If you watch it closely (I even recorded the screen capture and tried to brake them into a separate frames) you will notice that the native animations have this “rolling” effect. As if the animations on each item are not executed at the same time, but there’s a certain delay before animation on each item is started. Thanks to the help of internal folks I was able to figure out how to get this implemented. The “secret” ingredient to achieve the “rolling” effect is to set the BeginTime for each animation with an offset for each item. Also when watching the recording of the screen capture I’ve noticed that besides the rotational animation, there’s also an animation that changes the opacity of the item going on. Here’s the snippet that you will see inside of the PrepareStoryboards method:

// Create open animation
animationOpen = CreateRotationAnimation(item, -120, 0, 200, beginTime);
animationOpacity = CreateOpacityAnimation(item, 0, 1, 200, beginTime);  
// Add it to the storyboard
OpenStoryboard.Children.Add(animationOpen);
OpenStoryboard.Children.Add(animationOpacity);
// Create close animation
animationClose = CreateRotationAnimation(item, 0, 90, 200, beginTime);
animationCloseOp = CreateOpacityAnimation(item, 1, 0, 200, beginTime);  
// Add it to the storyboard
CloseStoryboard.Children.Add(animationClose);
CloseStoryboard.Children.Add(animationCloseOp);
// Increment the begin time for animation
beginTime += 30;                    

You should also notice another change: I create animations in the code and add them to a children collection of the Storyboard. This means that I can start animation with a single call OpenStoryboard.Begin(). This is how the rotation animation is created:

 public static DoubleAnimation CreateRotationAnimation(DependencyObject obj, double from, double value, double milliseconds, double beginTime, EasingMode easing = EasingMode.EaseIn)
{
       CubicEase ease = new CubicEase() { EasingMode = easing };
       DoubleAnimation animation = new DoubleAnimation();

       PropertyPath propPath = new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationX)");
       animation.BeginTime = TimeSpan.FromMilliseconds(beginTime);
       animation.Duration = new Duration(TimeSpan.FromMilliseconds(milliseconds));
       animation.From = from;
       animation.To = Convert.ToDouble(value);
       animation.FillBehavior = FillBehavior.HoldEnd;
       //animation.EasingFunction = ease;
       Storyboard.SetTarget(animation, obj);          
       Storyboard.SetTargetProperty(animation, propPath);

       return animation;
}

After all these changes I think the Pickup Box’s behavior is pretty close to the native one. You can download the updated code here.

P.S. Seeing certain references to my code on the internet I have to make the following disclaimer:

DISCLAIMER: I don’t work for the Windows Phone product group. The code that I create and share with you is not an official implementation of the functionality that exists on Windows Phone 7 device.  I do it because I want to learn how to do it myself and I share it with you because I like helping developers to better adapt to a new platform and make the Windows Phone 7 the best device on the market.

UPDATE: I’ve made a few fixes and updates to the code:

  • Split the PrepareStoryboards method into two separate methods: PrepareOpenStoryboard and PrepareCloseStoryboard
  • Add code to recognize and create animations only for the visible items in the ListBox
  • Removed usage of the MouseLeftButtonUp event on the item. Instead I am using SelectionChanged event with a multi-select option on the ListBox
Comments (12)

  1. Øystein says:

    Hi Alex!

    I really like your control but I tried to fill it with 50 items and it seems like it gives an exception when you exceed 15 items… any idea why?

    Best regards

    Øystein

  2. AlexYak says:

    @Øystein – this is probably because of the "virtual" nature of the ListBox on WP7. Meaning that it will load the items on demand when you scroll to it.

    As as side note, I don't think you want to load so many items into this contro anyway. Scrolling through 50 items just to find the one that you need is NOT a good user experience.

    – Alex

  3. dcolunga says:

    I've just downloaded the latest version and I get the following error:

    "CS0518: Predefined type 'System.Object' is not defined or imported"

  4. AlexYak says:

    @dcolunga – the solution was created in the post beta tools. You can either re-create the solution in the beta or wait until tomorrow when the tools go RTM 🙂

    Thanks… Alex

  5. Øystein says:

    Thank you for your reply. Didn´t know that the ListBox load items as you scroll.

    Which control would you recommend when the user need to select one out of 50 items? The list will be sorted by the user so he will find the most used items on the top of the list…

    Øystein

  6. Øystein says:

    It seems that MS use a ListBox when selecting languages & region in Settings….

  7. AlexYak says:

    @Øystein – please download the latest version in the same blog post (PickerBoxR3.zip). I've fixed the issue that you reported with many items in the listbox.

  8. Øystein says:

    Thank you for your work! I have a small issue that you probably should implement. When you open the popup and dismiss it with the backbutton an exception is raised since PrepareCloseStoryboard is only called from listBox_SelectionChanged.

    I added the following code to PickerBoxDialog_BackKeyPress:

    // Raise closed eventI

    if (this.Closed != null)

    {

         this.Closed(this, EventArgs.Empty);

    }

    this.PrepareCloseStoryboard();

    Øystein

  9. hrotsvith says:

    Thank you for the box!

    I've just got one problem (in emulator and on the device):

    in 1 out of 3 cases the startup animation doesn't work which results in an empty looking page.

    VirtualizingStackPanel panel = this.listBox.GetVisualDescendents<VirtualizingStackPanel>(true).FirstOrDefault();

               this.visibleItems = panel.GetVisualDescendents<ListBoxItem>(true).GetVisibleItems(listBox, Orientation.Vertical).ToList();

    Debugging tells me that this.visibleItems.Count is 0 -> it fails to get the visible items. Do you have any idea why this happens?

  10. hrotsvith says:

    sorry for posting again, but I have a workaround…

    instead of directly calling

    PrepareOpenStoryboard();

    StartOpenAnimation();

    in listBox_Loaded, I've added a simple timer to delay it for a few ms… It's not that nice but it works. Maybe you have a better solution…

  11. torsten says:

    Thanks for that Control, Alex. I really appreciate your effort, and it works great. I have one request though. Have you thought about the SupportedOrientation-Property? I tried to set it in the PickerBoxDialog, but it doesn't support the property. I guess you'd have to wrap the Control in a PhoneApplicationPage to achieve this behavior?

  12. torsten says:

    Ok, I just read your "migrate to the SL-ToolKit"-post, and the supportedorientation is solved in the ListPicker. Thanks nonetheless!

Skip to main content