This is part of a series on migrating from the WP Toolkit.
The release of Windows Phone 8.1 comes a load of new controls for Runtime (aka XAML) apps. One of these new controls is the TimePicker. This control was previously only available in toolkits like the Windows Phone Toolkit, Coding4Fun or paid versions like Telerik. If you were using on of these version, you can easily move to the new TimePicker in the runtime. This post will focus on moving from the WP Toolkit version.
The TimePicker is part of the new core controls, so you no longer need a namespace prefix.
<!-- from -->
<toolkit:TimePicker/>
<!-- to -->
<TimePicker/>
Setting the time value on the TimePicker is done through the Time property. This was previously done through the Value property in the WP Toolkit version. The property is now a TimeSpan rather than a DateTime from the toolkit.
<!-- from -->
<toolkit:TimePicker Value="{Binding Date}” />
<!-- to -->
<TimePicker Time="{Binding Time}"/>
If you have a DateTime property already, then bind to the TimeOfDay property of the date.
<TimePicker Time="{Binding Date.TimeOfDay}"/>
Like most of the new runtime (aka XAML) controls, it has a Header property to display what the time represents.
<TimePicker Header="Time" Time="{Binding Date.TimeOfDay}"/>
When the time changes for the picker, it will fire the TimeChanged event. This is different from the ValueChanged in the WP Toolkit.
Once again there are not side margins for the control. You will need to add any margins to ensure it fits your page appropriately. If you margins in your root grid, then you will not need any additional margins.
The new TimePicker has two new great properties. The first is the MinuteIncrement property. This property allows you to specify how many minutes the picker is allowed to be incremented by. This value can be set from 0 to 59. A value of 0 states that only the hour can change while a value of 30 states that the hour can change and the minute value can be either 0 or 30.
The second new property is the ClockIdentifier property. This allows you to specify if the clock should show a 12 or 24 hour clock. Rather than being an enumeration, this property is a string. It only allows the values 12HourClock and 24HourClock.
<TimePicker Header="12HourClock" ClockIdentifier="12HourClock"/>
<TimePicker Header="24HourClock" ClockIdentifier="24HourClock"/>
Like the DatePicker, the new TimePicker does not have a way to format the value as it did in the WP Toolkit. In the below example you could format a TimePicker, in the WP Toolkit, to display with seconds, or with AM/PM, etc..
<toolkit:TimePicker Header="With AM/PM"
Value="{Binding Time}"
ValueStringFormat="{}{0:hh:MM tt}"/>
<toolkit:TimePicker Header="With seconds"
Value="{Binding Time}"
ValueStringFormat="{}{0:hh:MM:ss}"/>
Once again we can hope that this will be added.