WP7 TimeSpanPicker in depth

published on: 1/25/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the TimeSpanPicker control that comes with the official release of the Coding4fun Toolkit. 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:For more information about the toolkit visit our previous article: Coding4Fun Toolkit for WP7 Overview and Getting Started

NOTE:For more information about the DatePicker/TimePicker controls from the Silverlight for WP7 toolkit visit this article: WP7 DatePicker and TimePicker in depth | API and Customization

Getting Started

To begin using TimeSpanPicker first  add a reference to  the Coding4Fun.Phone.Controls.Toolkit.dll assembly. Just create a new folder in your project and add the assembly there, after that add it as a reference to your project.

NOTE: You have to download and rebuild the Coding4Fun Toolkit project in order to generate the assembly. You can get Coding4Fun.Phone.Controls.Toolkit.dll from the the following folder:  \coding4fun-61253\Coding4Fun.Phone\Coding4Fun.Phone.Controls.Toolkit\Bin\Debug

the next step is to add the "controls" prefix declaration. Make sure that your page declaration includes the "controls" namespace:

    xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit"

The sample code should looks like:

<controls:TimeSpanPicker/>

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"!

 

 

 

 

Key Properties and Events

(NOTE: The only difference between TimeSpanPicker public API and DatePicker/TimePicker public API are two properties: Max and Step. For more information about the public API in details please visit the WP7 DatePicker and TimePicker in depth | API and Customization.)

Properties

• Header
• HeaderTemplate
• PickerPageUri
• Value
• ValueString
• ValueStringFormat
• Max

      Max is a dependency property of type TimeSpan. It determines the max value of the TimeSpanPicker . If no value is set then there is no maximum and the    TimeSpanPicker  loops through its items in the following way:

       From  0 to 59 for the seconds

       From  0 to 59 for the minutes

       From  0  to 23 for the hours

• Step

       Step is a dependency property of type TimeSpan. It determines the looping step between the items in a TimeSpanPicker  control, The default value is 1.

Events 

• ValueChanged

       Event that is invoked when the Value property changes.

Sample Usage

Example1:

<controls:TimeSpanPicker Max="0:0:6" Step="0:0:2"/>

Example2:

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

Example3:

<controls:TimeSpanPicker  Max="{Binding TimeSpan6Sec}" Step="{Binding TimeSpan2Sec}"/>

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

This means that the TimeSpanPicker  is restricted between 0 seconds and 6 seconds and the looping step is 2 seconds. So the final result is the following sequence 0 - 2 - 4-  6.

 

 

 

 

 

 

Styling and Customization

Unfortunately 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="controls:TimeSpanPicker">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="YellowGreen"/>
</Style>

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

Cuztomizing the Full Screen Mode

You will have to create a Custom Picker page and ass the looping logic on your own. For more information take a look at the WP7 DatePicker and TimePicker in depth | API and Customization article. You can also take a look at another interesting custom implementation by Richard Griffin: WP7 Contrib - Customising the DateTime Picker

That was all about the TimeSpanPicker  control from the Coding4fun Toolkit in details. I hope that the article was helpful.

You can find the full source code here:

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'WP7 TimeSpanPicker in depth'

Title Your Name

Comment