TimePicker
TimePicker
TimePicker
TimePicker
Class
Definition
Represents a control that allows a user to pick a time value.
public : class TimePicker : Control, ITimePicker, ITimePicker2public class TimePicker : Control, ITimePicker, ITimePicker2Public Class TimePicker Inherits Control Implements ITimePicker, ITimePicker2// This API is not available in Javascript.
<TimePicker .../>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Remarks
TimePicker is a control that lets a user set a time value.

Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the TimePicker control.
| Resource key | Description |
|---|---|
| TimePickerSpacerFill | Spacer color |
| TimePickerSpacerFillDisabled | Spacer color when disabled |
| TimePickerHeaderForeground | Header text color |
| TimePickerHeaderForegroundDisabled | Header text color when disabled |
| TimePickerButtonForeground | Button text color |
| TimePickerButtonForegroundPointerOver | Button text color on hover |
| TimePickerButtonForegroundPressed | Button text color when pressed |
| TimePickerButtonForegroundDisabled | Button text color when disabled |
| TimePickerButtonForegroundFocused | Button text color when focused |
| TimePickerButtonBackground | Button background color at rest |
| TimePickerButtonBackgroundPointerOver | Button background color on hover |
| TimePickerButtonBackgroundPressed | Button background color when pressed |
| TimePickerButtonBackgroundDisabled | Button background color when disabled |
| TimePickerButtonBackgroundFocused | Button background color when focused |
| TimePickerButtonBorderBrush | Button border color at rest |
| TimePickerButtonBorderBrushPointerOver | Button border color on hover |
| TimePickerButtonBorderBrushPressed | Button border color when pressed |
| TimePickerButtonBorderBrushDisabled | Button border color when disabled |
| DateTimePickerFlyoutButtonForegroundPointerOver | Flyout button foreground color on hover |
| DateTimePickerFlyoutButtonForegroundPressed | Flyout button foreground color when pressed |
| DateTimePickerFlyoutButtonBackground | Flyout button background color at rest |
| DateTimePickerFlyoutButtonBackgroundPointerOver | Flyout button background color on hover |
| DateTimePickerFlyoutButtonBackgroundPressed | Flyout button background color when pressed |
| DateTimePickerFlyoutButtonBorderBrush | Flyout button border color at rest |
| DateTimePickerFlyoutButtonBorderBrushPointerOver | Flyout button border color on hover |
| DateTimePickerFlyoutButtonBorderBrushPressed | Flyout button border color when pressed |
Constructors
TimePicker() TimePicker() TimePicker() TimePicker()
Initializes a new instance of the TimePicker class.
public : TimePicker()public TimePicker()Public Sub New()// This API is not available in Javascript.
Properties
ClockIdentifier ClockIdentifier ClockIdentifier ClockIdentifier
Gets or sets the clock system to use.
public : PlatForm::String ClockIdentifier { get; set; }public string ClockIdentifier { get; set; }Public ReadWrite Property ClockIdentifier As string// This API is not available in Javascript.
<TimePicker ClockIdentifier="12HourClock"/>
-or-
<TimePicker ClockIdentifier="24HourClock"/>
- Value
- PlatForm::String string string string
The name of the clock system to use. See Remarks.
Remarks
The type of the property is String, but you must use values that correspond to the static string properties of Windows.Globalization.ClockIdentifiers. These are: TwelveHour (the string "12HourClock")and TwentyFourHour (the string "24HourClock"). "12HourClock" is the default value.
ClockIdentifierProperty ClockIdentifierProperty ClockIdentifierProperty ClockIdentifierProperty
Gets the identifier for the ClockIdentifier dependency property.
public : static DependencyProperty ClockIdentifierProperty { get; }public static DependencyProperty ClockIdentifierProperty { get; }Public Static ReadOnly Property ClockIdentifierProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ClockIdentifier dependency property.
Header Header Header Header
Gets or sets the content for the control's header.
public : PlatForm::Object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object// This API is not available in Javascript.
<TimePicker Header="headerString"/>
- Value
- PlatForm::Object object object object
The content of the control's header. The default is null.
Remarks
You can set a data template for the Header by using the HeaderTemplate property.
- See Also
HeaderProperty HeaderProperty HeaderProperty HeaderProperty
Identifies the Header dependency property.
public : static DependencyProperty HeaderProperty { get; }public static DependencyProperty HeaderProperty { get; }Public Static ReadOnly Property HeaderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Header dependency property.
HeaderTemplate HeaderTemplate HeaderTemplate HeaderTemplate
Gets or sets the DataTemplate used to display the content of the control's header.
public : DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate// This API is not available in Javascript.
<TimePicker HeaderTemplate="resourceReferenceToDataTemplate"/>
The template that specifies the visualization of the header object. The default is null.
- See Also
HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty
Identifies the HeaderTemplate dependency property.
public : static DependencyProperty HeaderTemplateProperty { get; }public static DependencyProperty HeaderTemplateProperty { get; }Public Static ReadOnly Property HeaderTemplateProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
Gets or sets a value that specifies whether the area outside of a light-dismiss UI is darkened.
public : LightDismissOverlayMode LightDismissOverlayMode { get; set; }public LightDismissOverlayMode LightDismissOverlayMode { get; set; }Public ReadWrite Property LightDismissOverlayMode As LightDismissOverlayMode// This API is not available in Javascript.
- Value
- LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode LightDismissOverlayMode
A value of the enumeration that specifies whether the area outside of a light-dismiss UI is darkened. The default is Auto.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
Transient UI, such as the open TimePickerFlyout of a TimePicker, closes when you click or tap outside of it. This is called light-dismiss. "Overlay" refers to the area outside of a light-dismiss UI.
By default, the "overlay" is darkened on the Xbox, and not darkened on other devices families. You can set LightDismissOverlayMode to On to make your app darken the "overlay" area on all device families, or set it to Off to not darken the "overlay" area on all device families.
Version compatibility
The LightDismissOverlayMode property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.
To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.TimePicker", "LightDismissOverlayMode"))
{
timePicker1.LightDismissOverlayMode = LightDismissOverlayMode.On;
}
}
LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty LightDismissOverlayModeProperty
Identifies the LightDismissOverlayMode dependency property.
public : static DependencyProperty LightDismissOverlayModeProperty { get; }public static DependencyProperty LightDismissOverlayModeProperty { get; }Public Static ReadOnly Property LightDismissOverlayModeProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LightDismissOverlayMode dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
MinuteIncrement MinuteIncrement MinuteIncrement MinuteIncrement
Gets or sets a value that indicates the time increments shown in the minute picker. For example, 15 specifies that the TimePicker minute control displays only the choices 00, 15, 30, 45.
public : int MinuteIncrement { get; set; }public int MinuteIncrement { get; set; }Public ReadWrite Property MinuteIncrement As int// This API is not available in Javascript.
<TimePicker MinuteIncrement="int"/>
- Value
- int int int int
An integer from 0-59 that indicates the increments shown in the minute picker. The default is 1.
MinuteIncrementProperty MinuteIncrementProperty MinuteIncrementProperty MinuteIncrementProperty
Gets the identifier for the MinuteIncrement dependency property.
public : static DependencyProperty MinuteIncrementProperty { get; }public static DependencyProperty MinuteIncrementProperty { get; }Public Static ReadOnly Property MinuteIncrementProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MinuteIncrement dependency property.
Time Time Time Time
Gets or sets the time currently set in the time picker.
public : TimeSpan Time { get; set; }public TimeSpan Time { get; set; }Public ReadWrite Property Time As TimeSpan// This API is not available in Javascript.
<TimePicker Time="timeSpanString" />
- Value
- TimeSpan TimeSpan TimeSpan TimeSpan
The time currently set in the time picker.
Remarks
The default value for Time is the time that the TimePicker object is instantiated when the app runs or loads that specific object, as a one-time operation. The time won't increment in real-time (like a clock would) unless you provide a code binding to some value that does track the current time while the app is running.
You can set the Time value as an attribute in XAML. This is probably easiest if you're already declaring the TimePicker object in XAML and aren't using bindings for the Time value. Use a string in the form Hh:Mm where Hh is hours and can be between 0 and 23 and Mm is minutes and can be between 0 and 59. A "0" can be the initial character in either Hh or Mm and is typically included for clarity of any values 0 thru 9. For example, "9:5" and "09:05" are both valid and represent the same time, but "09:05" is easier to read in markup.
To set Time in code, you have different techniques available depending on your programming language. The value is represented as System.TimeSpan for C# and Visual Basic, or Windows.Foundation.TimeSpan for Visual C++ component extensions (C++/CX). Probably the easiest way to produce a System.TimeSpan value that's appropriate for Time is to use the TimeSpan.Parsestatic method. Use a string in the form Hh:Mm (hours:minutes).
Whether set in code or XAML, the TimePicker class has coercion logic for the value it preserves when you attempt to set it. Any days values are ignored. Seconds values are ignored (for example seconds over 30 are not rounded up to the next minute). Fractional seconds are ignored. Values do not wrap around (for example a value of "24:00" is invalid.) The minimum value within the TimeSpan is a time of 0 (00:00, midnight) and the maximum value is 23:59. Values outside the range throw exceptions, but depending on the specifics the exceptions might originate in the TimeSpan construction rather than from validation and coercion of Time.
To set the Time value in Visual C++ component extensions (C++/CX), you set the Duration field of the TimeSpan structure. Duration specifies a time in 100 nanosecond units, write your own logic for converting to and from hours:minutes representations.
Any value set for Time is specifying the starting value, but in the app at runtime that value is typically set by the user either directly in the TimePicker control, or within a form-factor-specific flyout that enables the user to set hours and minutes. A flyout's UI can be influenced by other properties of TimePicker (like ClockIdentifier and MinuteIncrement ) and will display the initial Time value. A flyout typically sets the Time value when the user makes a change and dismisses the flyout.
TimeProperty TimeProperty TimeProperty TimeProperty
Gets the identifier for the Time dependency property.
public : static DependencyProperty TimeProperty { get; }public static DependencyProperty TimeProperty { get; }Public Static ReadOnly Property TimeProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Time dependency property.
Events
TimeChanged TimeChanged TimeChanged TimeChanged
Occurs when the time value is changed.
public : event EventHandler TimeChanged<TimePickerValueChangedEventArgs>public event EventHandler TimeChanged<TimePickerValueChangedEventArgs>Public Event TimeChanged<TimePickerValueChangedEventArgs>// This API is not available in Javascript.
<TimePicker TimeChanged="eventhandler" />