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 !

Comments

• Anonymous
  December 03, 2010
  Great work!  This does a great job, looks good, and performs exactly as it should.  Thanks for making and sharing it.  Hopefully it will be in the next official Toolkit release.

• Anonymous
  December 07, 2010
  You're welcome :)

• Anonymous
  December 27, 2010
  I did try using the TimeSpan Picker but some assembly is missing? Can u suggest what assembly is need to use it?

• Anonymous
  January 03, 2011
  Shaireen, did you install the Windows Phone 7 Development Tools ? If not, you can download everything you need here. This is a prerequisite.

• Anonymous
  February 17, 2011
  I have the Feb11 version of toolkit and timespanpicker doesn't existe! Any idea ?

• Anonymous
  February 20, 2011
  Norman, it was included in coding4Fun toolkit. You can download coding4Fun Toolkit here : coding4fun.codeplex.com

• Anonymous
  September 11, 2011
  Is there something similar like DateSpanPicker?  I would like to use the DatePicker but limit selection to years within the range of 1776 to 2076.