Imagine Windows 8.1 Store Apps (73)

[Download source code]

Re-imagine Windows 8.1 Store Apps (73)-added controls: DatePicker and TimePicker

Author: webabcd


Introduction
New controls for Windows 8.1 Store Apps

• DatePicker-date Selection Control
• TimePicker-Time Selection Control

Example
1. Demonstrate the DatePicker Application
DatePickerDemo. xaml

<Page x: Class = "Windows81.Controls. DatePickerDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows81.Controls "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "120 0 0 0"> <TextBlock Name = "lblMsg" FontSize = "14.667"/> <! -- DatePicker-date Selection Control (horizontal bar by default. If you need a Vertical bar, set Orientation = "Vertical) header-control title DateChanged-event triggered when the selected date changes --> <DatePicker x: name = "datePicker" Header = "Date" DateChanged = "datePicker_DateChanged" Margin = "0 20 0 0"/> <! -- Use the format template to set the display format of DatePicker --> <DatePicker DayFormat = "day" MonthFormat = "month. numeric "YearFormat =" year. abbreviated "Margin =" 0 20 0 0 "/> <! -- Set the display format of DatePicker through format patterns --> <DatePicker DayFormat = "{}{ day. integer} ({dayofweek. abbreviated}) "MonthFormat =" {}{ month. integer (2)} "YearFormat =" {}{ year. full} "Margin =" 0 20 0 0 "/> <DatePicker DayFormat =" {}{ day. integer} ({dayofweek. abbreviated}) "MonthFormat =" {}{ month. integer (2)} month "YearFormat =" {}{ year. full} year "Margin =" 0 20 0 0 "/> <! -- For details about format templates and format patterns, see: http://msdn.microsoft.com/en-us/library/windows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx --> </StackPanel> </Grid> </Page>

DatePickerDemo. xaml. cs

/** DatePicker-date Selection control */using System; using Windows. globalization; using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows81.Controls {public sealed partial class DatePickerDemo: Page {public DatePickerDemo () {this. initializeComponent (); this. loaded + = DatePickerDemo_Loaded;} void DatePickerDemo_Loaded (object sender, RoutedEventArgs e) {// Date-DatePicker control currently displays datePicker. date = DateTimeOffset. now. addMonths (1); // The minimum year DatePicker allowed by the MinYear-datePicker control. minYear = DateTimeOffset. now. addYears (-20); // DatePicker of the maximum year allowed by the MaxYear-datePicker control. maxYear = DateTimeOffset. now. addYears (20); // YearVisible-whether to display the year selection box datePicker. yearVisible = true; // MonthVisible-whether to display the datePicker in the month selection box. monthVisible = true; // DayVisible-whether to display the datePicker in the day selection box. dayVisible = true; // DatePicker used by the CalendarIdentifier-datePicker control (Gregorian, Hebrew, Hijri, Japan, Julian, Korean, Taiwan, Thai, UmAlQura. calendarIdentifier = CalendarIdentifiers. gregorian;} // The date selected by the DatePicker control has changed. private void datePicker_DateChanged (object sender, DatePickerValueChangedEventArgs e) {// e. oldDate-original date // e. newDate-new date lblMsg. text = e. newDate. toString ("yyyy-MM-dd hh: mm: ss ");}}}

2. Demonstrate the TimePicker Application
TimePickerDemo. xaml

<Page x: Class = "Windows81.Controls. timePickerDemo "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows81.Controls "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPan El Margin = "120 0 0 0"> <TextBlock Name = "lblMsg" FontSize = "14.667"/> <! -- TimePicker-Time Selection Control (horizontal bar by default. If you need a Vertical bar, set Orientation = "Vertical) header-control title TimeChanged-events triggered when the selected Time changes --> <TimePicker Name = "timePicker" Header = "Time" TimeChanged = "timePicker_TimeChanged" Margin = "0 20 0 0 "/> <TimePicker Name =" timePicker2 "Header =" Time "Margin =" 0 20 0 0 "/> </StackPanel> </Grid> </Page>

TimePickerDemo. xaml. cs

/** TimePicker-Time Selection control */using System; using Windows. globalization; using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows81.Controls {public sealed partial class TimePickerDemo: Page {public TimePickerDemo () {this. initializeComponent (); this. loaded + = TimePickerDemo_Loaded;} void TimePickerDemo_Loaded (object sender, RoutedEventArgs e) {// Time-TimePicker control current display Time timePicker. time = new TimeSpan (16, 0, 0); // minute increment (0, 15, 30, 45) in the MinuteIncrement-minute selection box timePicker. minuteIncrement = 15; // ClockIdentifier-hour standard, ClockIdentifiers. twelveHour (12 HourClock), timePicker in 12-hour format. clockIdentifier = ClockIdentifiers. twelveHour; // ClockIdentifier-hour standard, ClockIdentifiers. twentyFourHour (24 HourClock), 24-hour timePicker2.ClockIdentifier = ClockIdentifiers. twentyFourHour;} // event private void timePicker_TimeChanged (object sender, TimePickerValueChangedEventArgs e) triggered when the time selected by the TimePicker control changes {// e. oldTime-original time // e. newTime-New Time lblMsg. text = e. newTime. toString ("c ");}}}

OK
[Download source code]