TimeSpanPicker is an UI elements that will automatically provide you with a TextBox input and when the user selects it, the picker will display form where you can choose another date/time using infinite scrolling. Basically this control is extended DatePicker/TimePicker that allows timespan restriction.


NOTE: To see the correct ApplicationBar icons in the TimeSpanPicker , you will need to create a folder in the root of your project called "Toolkit.Content" and put the icons in there. The toolkit provides the necessary icons, but you have to copy them from the Coding4Fun.Phone.TestApplication project. They must be named "ApplicationBar.Cancel.png" and "ApplicationBar.Check.png", and the build action must be "Content"!

Getting Started

To begin using TimeSpanPicker first add a reference to the Coding4Fun.Phone.Controls.Toolkit.dll assembly.

To use the TimeSpanPicker in the XAML you have to add the following namespace declaration:


Creating a TimeSpanPicker :


TimeSpanPicker timeSpanPicker = new TimeSpanPicker();

Key Features

If you want to limit the user into choosing a date from a specific range, you can simply do it by setting the Max and Step properties.

Simple scenario

Here is an example of how to do this in XAMl and C#:
<cf4Toolkit:TimeSpanPicker Max="0:0:6" Step="0:0:2"/>

TimeSpanPicker timespanPicker = new TimeSpanPicker();
timespanPicker.Max = new TimeSpan(0, 0, 6);
timespanPicker.Step = new TimeSpan(0, 0, 2);


Here is an example of how to do this using DataBinding:
<cf4Toolkit:TimeSpanPicker  Max="{Binding TimeSpan6Sec}" Step="{Binding TimeSpan2Sec}"/>

public MainPage()
    DataContext = this;
public TimeSpan TimeSpan6Sec { get { return TimeSpan.FromSeconds(6); } }
public TimeSpan TimeSpan2Sec { get { return TimeSpan.FromSeconds(2); } }

Styling and Appearance

For now you can customize only the TextBox field of the TimeSpanPicker control. If you want to customize the Full Screen popup then you will have to implement your CustomPicker page and add the looping logic on your own.

Changing the TimeSpanPicker Style

You can customize the TimeSpanPicker TextBox style either by adding some elements in the ControlTemplate of simply by changing some colors like for example:
<Style x:Key="sampleStyle" TargetType="cf4Toolkit:TimeSpanPicker">
   <Setter Property="Background" Value="Black"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Foreground" Value="YellowGreen"/>

<cf4Toolkit:TimeSpanPicker Max="0:0:6" Step="0:0:2" Style="{StaticResource sampleStyle}" />

Last edited Feb 9, 2011 at 8:34 PM by WinPhoneGeek, version 2


brianVarley92 Nov 28, 2014 at 2:43 PM 
How can I change the default value for the time span picker? At present it defaults to 30 minutes which means if I need to change the values to a lower minute value it has to be scrolled down to 0, where as if it was deafulted to 0 the user wouldn't have to.

masoudhaghi Jun 17, 2013 at 12:00 PM 
is there any way to customize the background and accent color for Picker page?