Re-imagining Windows 8.1 Store Apps (73)-New controls: DatePicker, Timepicker

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