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
Windows 10 requirements
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.

TimePicker control

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&lt;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 keyDescription
TimePickerSpacerFillSpacer color
TimePickerSpacerFillDisabledSpacer color when disabled
TimePickerHeaderForegroundHeader text color
TimePickerHeaderForegroundDisabledHeader text color when disabled
TimePickerButtonForegroundButton text color
TimePickerButtonForegroundPointerOverButton text color on hover
TimePickerButtonForegroundPressedButton text color when pressed
TimePickerButtonForegroundDisabledButton text color when disabled
TimePickerButtonForegroundFocusedButton text color when focused
TimePickerButtonBackgroundButton background color at rest
TimePickerButtonBackgroundPointerOverButton background color on hover
TimePickerButtonBackgroundPressedButton background color when pressed
TimePickerButtonBackgroundDisabledButton background color when disabled
TimePickerButtonBackgroundFocusedButton background color when focused
TimePickerButtonBorderBrushButton border color at rest
TimePickerButtonBorderBrushPointerOverButton border color on hover
TimePickerButtonBorderBrushPressedButton border color when pressed
TimePickerButtonBorderBrushDisabledButton border color when disabled
DateTimePickerFlyoutButtonForegroundPointerOverFlyout button foreground color on hover
DateTimePickerFlyoutButtonForegroundPressedFlyout button foreground color when pressed
DateTimePickerFlyoutButtonBackgroundFlyout button background color at rest
DateTimePickerFlyoutButtonBackgroundPointerOverFlyout button background color on hover
DateTimePickerFlyoutButtonBackgroundPressedFlyout button background color when pressed
DateTimePickerFlyoutButtonBorderBrushFlyout button border color at rest
DateTimePickerFlyoutButtonBorderBrushPointerOverFlyout button border color on hover
DateTimePickerFlyoutButtonBorderBrushPressedFlyout 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.

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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"/>
Value
DataTemplate DataTemplate DataTemplate DataTemplate

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.

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.

Additional features and requirements
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.
Additional features and requirements
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.

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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" />

See Also