This project is read-only.

TimePicker control

The TimePicker control is used to allow users to select time, and to display the time in specified format. The time will be displayed in a textbox. When user tap on the textbox, time picker control will be displayed to select a time. The control can be configured to select time automatically or by tapping on the select button. Based on the time format specified, the control will change its presentation to 24 hours or 12 hours format. Hour, minute and second can be scrolled cyclically.

Time Picker Control  Time Picker  Time Picker

Namespace

StoreAppLib.Controls

Using TimePicker

To use TimePicker in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.

To add TimePicker in a page, add the following namespace reference to the page.

<Page xmlns:storeAppControl="using:StoreAppLib.Controls" ...

Use the following code to add control to the page. Use Time property to bind the control to your data source and use Format property to change the time display format.

<storeAppControl:TimePicker
       Width="150"
       Height="30"
       BorderThickness="1"
       BorderBrush="Gray"
       Time="{Binding CurrentTime, Mode=TwoWay }"
       Format="hh:mm:ss tt" />

The control will hide the meridiem, if you use the 24 hours format (HH for hours). Set AutoSelect property to true, if you want to select the time automatically when you scroll. Setting this property to true will hide the "Select" and "Cancel" buttons.

You can use the following properties to customize the control.

  • ButtonForeground: Select and Cancel button colours.
  • HeaderForeground: Hour, minute and second header colour.
  • TimeForeground: Hour, minute, second and meridiem foreground colour.
  • OuterBackground: Control background colour.
  • OuterBorderBrush: Control border colour.
  • InnerBackground: Hour, minute, second and meridiem background colour.
  • InnerBorderBrush: Hour, minute, second and meridiem border colour
  • SurfaceBackground: If you apply transparent colours to background property, set this to page background colour.

Last edited Dec 8, 2012 at 5:26 PM by sureshkumart, version 3

Comments

No comments yet.