Windows Phone Toolkit–Date and Time Pickers

A Windows Phone From Scratch Mini-Tutorial

You have seen the Date and Time pickers in the built-in applications and you can add them to your own applications with shockingly little work.  

To start, follow the directions from yesterday’s posting on how to install the Toolkit.  Create a new application, and change the content control to a StackPanel (rather than a Grid). Add two TextBoxes as prompts, and after the first TextBox drag in a DatePicker and after the second drag on a TimePicker. 

Add an event handler to the Date and Time Picker’s, so that when you are done your Xaml looks like this

<StackPanel
    x:Name="ContentPanel"
    Grid.Row="1"
    Margin="12,0,12,0">
    <TextBlock
        Text="select date"
        Style="{StaticResource PhoneTextNormalStyle}" />
    <toolkit:DatePicker
        ValueChanged="DatePicker_ValueChanged" />
    <TextBlock
        Text="select time"
        Style="{StaticResource PhoneTextNormalStyle}" />
    <toolkit:TimePicker
        ValueChanged="TimePicker_ValueChanged" />
</StackPanel>

You might use the ValueChanged event handler to take additional action besides setting the date and time, but in this instance we’ll just leave them empty in MainPage.xaml.cs,

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    private void DatePicker_ValueChanged( 
        object sender, DateTimeValueChangedEventArgs e )
    { }

    private void TimePicker_ValueChanged( 
        object sender, DateTimeValueChangedEventArgs e )
    { }
}

The Menu Bar Icons

The menu bar icons are managed by convention over configuration.  To have the correct icons appear you’ll need to place the ApplicationBar.Cancel.png and ApplicationBar.Check.png into a top-level folder named Toolkit.Content as shown in the figure.

You are free to obtain the .png files from within Expression Blend, or to copy them from the Windows Phone Toolkit sample project that is included when you download the source code for the Toolkit. 

In addition, you can download the two files here.

That’s all there is to it, run your application and click in either the Date picker or the Time picker box.  The animation that you see when you close the Date and Time picker is built into the control.