Imagine Windows 8.1 Store Apps (73)

Source: Internet
Author: User

[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]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.