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 DATEPicker 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 ToolkitContent 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. 

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Data, Essentials, Mango, Mini-Tutorial, Patterns & Skills, Toolkit, WindowsPhone and tagged . Bookmark the permalink.

One Response to Windows Phone Toolkit–Date and Time Pickers

  1. Pingback: Windows Phone Toolkit – Date and Time Pickers – www.nalli.net

Leave a Reply

Your email address will not be published.