Today’s tip focuses on the TimePicker that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

About the TimePicker

The TimePicker is very similar to the DatePicker, which was covered in yesterday’s tip. Just like we saw with dates, there is an input scope that looks like it might work for letting users pick times, but if you use the “Time” input scope, the user will get a normal keyboard, not a fancy picker.

   1: <TextBox InputScope="Time" />

So instead of using input scopes for times, we want to use the TimePicker from the Silverlight Toolkit.

Using the TimePicker

To use the DatePicker, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolbox="clr-namespace:Microsoft.Phone.Controls; 

   2:                assembly=Microsoft.Phone.Controls.Toolkit"

Adding the icons

An extra step with the DatePicker control is to get the Ok/Cancel icons into your project.  You can find these icons in the install folder for the toolkit.  On my machine, it worked out to

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Icons

Copy both icons into your project and put them in a folder named “Toolkit.Content”.  Also, mark the build action as “Content”

The XAML

The TimePicker XAML looks just like the DatePicker XAML.  Here’s a time picker that is wired up with a handler for its ValueChanged event.

   1: <toolkit:TimePicker x:Name="EventTimePicker" ValueChanged="TimePicker_ValueChanged" />

This generates a control that looks just like a text box.

When the user clicks on the “textbox” to edit it, the TimePicker launches, and uses the two icons described earlier.

The Code

The time selected by the user can be read from the Value property of the TimePicker.  It comes across as a DateTime object, so you’ll have to throw away the date portion to get just the time.

   1: private void TimePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

   2: {

   3:     var time = (DateTime) EventTimePicker.Value;

   4:     MessageBox.Show(time.ToShortTimeString());

   5: }

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day