A TimeSpanPicker for Windows Phone 7

 

 

A TimeSpanPicker for Windows Phone 7

  • Comments 7
[01/21/2011 : The TimeSpanPicker is now part of the Coding4Fun toolkit http://coding4fun.codeplex.com/]
image_thumb3

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 :

image_thumb10

And after validation:

image_thumb11

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);
     }
}

image_thumb8

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);
            }
        }

image_thumb5

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);
            }
        }
image_thumb1

You can download the source code and binaries here:

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

Hope it helps !

Leave a Comment
  • Please add 5 and 1 and type the answer here:
  • Post
  • 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.

  • You're welcome :)

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

  • Shaireen, did you install the Windows Phone 7 Development Tools ?

    If not, you can download everything you need here.

    This is a prerequisite.

  • I have the Feb11 version of toolkit and timespanpicker doesn't existe!

    Any idea ?

  • Norman, it was included in coding4Fun toolkit.

    You can download coding4Fun Toolkit here : coding4fun.codeplex.com

  • 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.

Page 1 of 1 (7 items)
Page 1 of 4 (87 items) 1234