A TimeSpanPicker for Windows Phone 7

 [01/21/2011 : The TimeSpanPicker is now part of the Coding4Fun toolkit https://coding4fun.codeplex.com/]

I needed a nice picker to handle a duration in a WP7 Silverlight Application.

WP7 toolkit pickers are the ideal choice, but they only support DateTime types through DatePicker and TimePicker controls.

I updated the toolkit source code and made the DateTimePicker base generic so that it supports TimeSpan as well as DateTime types.

The updated toolkit (v1.1) contains a new control : the TimeSpanPicker which has some specific behaviours:

• Value : the duration value
• Max : the maximum value for duration
• Step : the increment step

All 3 properties are TimeSpan types.

The 3 pickers represent respectively the hours, minutes, and seconds parts of the duration value.

Usage

How to use it in your own project:

1. Add a reference to Microsoft.Phone.Controls.Toolkit assembly in your WP7 Silverlight project

2. Add the toolkit namespace in your xaml page:

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

3. Declare a TimeSpanPicker control in your xaml page, for example :

   <toolkit:TimeSpanPicker Value="{Binding Duration}" Max="{Binding MaxDuration}" Step="{Binding StepDuration}"/>

   or

   <toolkit:TimeSpanPicker ValueChanged="TimeSpanPicker_ValueChanged"/>

Behaviour

The control look is dynamic and will depend on the max and step property values. You will see only pickers that make sense according to the maximum value and the step.

Default values are:

• Max = 24 hours
• Step = 1 second

In this case you would get this result :

And after validation:

Of course, it’s up to you to customize Max and Step properties to fit your needs, just like examples below.

Examples

If you need a duration with a minute-based precision, you would not see the picker for seconds.

   public TimeSpan StepDuration
    {
     get
     {
        return TimeSpan.FromMinutes(1);
     }
    }

If additionnaly the Max value is less than a hour, then the hour picker will also disappear:

         public TimeSpan MaxDuration
        {
            get
            {
                return TimeSpan.FromMinutes(40);
            }
        }
 
        public TimeSpan StepDuration
        {
            get
            {
                return TimeSpan.FromMinutes(1);
            }
        }

Add a 5 minutes step and you will get the minutes picker going from 5 to 5:

         public TimeSpan MaxDuration
        {
            get
            {
                return TimeSpan.FromMinutes(40);
            }
        }
 
        public TimeSpan StepDuration
        {
            get
            {
                return TimeSpan.FromMinutes(5);
            }
        }

You can download the source code and binaries here:

Silverlight for Windows Phone Toolkit Binaries v1_1.zip

Silverlight for Windows Phone Toolkit Source Code v1_1.zip

Feel free to contact me if you’re in trouble with the TimeSpanPicker.

Hope it helps !