Original: Re-imagine Windows 8.1 Store Apps (73)-New controls: DatePicker, Timepicker
[SOURCE DOWNLOAD]
Re-imagining Windows 8.1 Store Apps (73)-New controls: DatePicker, Timepicker
Webabcd
Introduced
Re-imagining new controls for Windows 8.1 Store Apps
- DatePicker-Date Selection control
- Timepicker-Time selection control
Example
1, demonstrate the application of DatePicker
Datepickerdemo.xaml
<Pagex: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"> <GridBackground= "Transparent"> <StackPanelMargin= "0 0 0"> <TextBlockName= "Lblmsg"FontSize= "14.667" /> <!--DatePicker-Date selection control (default horizontal, orientation= "Vertical" if vertical is required) header-control title DateChanged-Events that are triggered when the selected date changes - <DatePickerx:name= "DatePicker"Header= "Date"datechanged= "Datepicker_datechanged"Margin= "0 0 0" /> <!--to set the display format of the DatePicker through the format template (formatted templates) - <DatePickerDayFormat= "Day"MonthFormat= "Month.numeric"Yearformat= "year.abbreviated"Margin= "0 0 0" /> <!--setting the display format of DatePicker with format patterns - <DatePickerDayFormat="{}{day.integer} ({dayofweek.abbreviated})"MonthFormat="{}{month.integer (2)}"Yearformat="{}{year.full}"Margin= "0 0 0" /> <DatePickerDayFormat="{}{day.integer} day ({dayofweek.abbreviated})"MonthFormat="{}{month.integer (2)} month"Yearformat="{}{year.full} years"Margin= "0 0 0" /> <!--for format templates and format patterns see: Http://msdn.microsoft.com/en-us/library/wind Ows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx - </StackPanel> </Grid></Page>
DatePickerDemo.xaml.cs
/** DatePicker-Date selection control*/usingSystem;usingwindows.globalization;usingWindows.UI.Xaml;usingWindows.UI.Xaml.Controls;namespacewindows81.controls{ Public Sealed Partial classDatepickerdemo:page { PublicDatepickerdemo () { This. InitializeComponent (); This. Loaded + =datepickerdemo_loaded; } voidDatepickerdemo_loaded (Objectsender, RoutedEventArgs e) { //Date-datepicker The date that the control is currently displayedDatepicker.date = DateTimeOffset.Now.AddMonths (1); //The minimum year that the Minyear-datepicker control allows to selectDatepicker.minyear = DateTimeOffset.Now.AddYears (- -); //The maximum number of years allowed to be selected by the Maxyear-datepicker controlDatepicker.maxyear = DateTimeOffset.Now.AddYears ( -); //yearvisible-whether to display the year selection boxDatepicker.yearvisible =true; //monthvisible-whether to display the month selection boxDatepicker.monthvisible =true; //dayvisible-whether the day selection box is displayedDatepicker.dayvisible =true; //Calendar system used by the Calendaridentifier-datepicker control (Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, Taiwan, Thai, Umalqura )Datepicker.calendaridentifier =Calendaridentifiers.gregorian; } //The date selected by the DatePicker control has changed Private voidDatepicker_datechanged (Objectsender, Datepickervaluechangedeventargs e) { //E.olddate-Original date//e.newdate-New DateLblmsg.text = e.newdate.tostring ("YYYY-MM-DD Hh:mm:ss"); } }}
2, demonstrate the application of Timepicker
Timepickerdemo.xaml
<Pagex: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"> <GridBackground= "Transparent"> <StackPanelMargin= "0 0 0"> <TextBlockName= "Lblmsg"FontSize= "14.667" /> <!--Timepicker-Time selection control (default horizontal, set orientation= "Vertical" if vertical is required) header-control title Timechanged-event that is triggered when the selected time has changed - <TimepickerName= "Timepicker"Header= "Time"timechanged= "Timepicker_timechanged"Margin= "0 0 0" /> <TimepickerName= "TimePicker2"Header= "Time"Margin= "0 0 0" /> </StackPanel> </Grid></Page>
TimePickerDemo.xaml.cs
/** Timepicker-time selection control*/usingSystem;usingwindows.globalization;usingWindows.UI.Xaml;usingWindows.UI.Xaml.Controls;namespacewindows81.controls{ Public Sealed Partial classTimepickerdemo:page { PublicTimepickerdemo () { This. InitializeComponent (); This. Loaded + =timepickerdemo_loaded; } voidTimepickerdemo_loaded (Objectsender, RoutedEventArgs e) { //Time-timepicker The time the control is currently displayedTimepicker.time =NewTimeSpan ( -,0,0); //minuteincrement-minute increments of the Minutes selection box (0 , Max.)Timepicker.minuteincrement = the; //clockidentifier-hour format, Clockidentifiers.twelvehour (12HourClock), 12-hour systemTimepicker.clockidentifier =Clockidentifiers.twelvehour; //clockidentifier-hour format, Clockidentifiers.twentyfourhour (24HourClock), 24-hour systemTimepicker2.clockidentifier =Clockidentifiers.twentyfourhour; } //event that is triggered when the time selected by the Timepicker control has changed Private voidTimepicker_timechanged (Objectsender, Timepickervaluechangedeventargs e) { //E.oldtime-Original Time//E.newtime-New TimeLblmsg.text = e.newtime.tostring ("C"); } }}
Ok
[SOURCE DOWNLOAD]
Re-imagining Windows 8.1 Store Apps (73)-New controls: DatePicker, Timepicker