重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

<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 - 日期选择控件（默认横排，需要竖排的话则设置 Orientation="Vertical" 即可）

                    Header - 控件的标题

                    DateChanged - 选中的日期发生变化时所触发的事件

            -->

            <DatePicker x:Name="datePicker" Header="Date" DateChanged="datePicker_DateChanged" Margin="0 20 0 0" />

            <!--

                通过格式模板（format templates）设置 DatePicker 的显示格式

            -->

            <DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated" Margin="0 20 0 0" />

            <!--

                通过格式模式（format patterns）设置 DatePicker 的显示格式

            -->

            <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)}月" YearFormat="{}{year.full}年" Margin="0 20 0 0" />

            <!--

                关于 format templates 和 format patterns 请参见：

                http://msdn.microsoft.com/en-us/library/windows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx

            -->

        </StackPanel>

    </Grid>

</Page>

/*

 * DatePicker - 日期选择控件

 */

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 控件当前显示的日期

            datePicker.Date = DateTimeOffset.Now.AddMonths();

            // MinYear - DatePicker 控件所允许选择的最小的年份

            datePicker.MinYear = DateTimeOffset.Now.AddYears(-);

            // MaxYear - DatePicker 控件所允许选择的最大的年份

            datePicker.MaxYear = DateTimeOffset.Now.AddYears();

            // YearVisible -  是否显示 year 选择框

            datePicker.YearVisible = true;

            // MonthVisible -  是否显示 month 选择框

            datePicker.MonthVisible = true;

            // DayVisible -  是否显示 day 选择框

            datePicker.DayVisible = true;

            // CalendarIdentifier - DatePicker 控件所使用的日历系统（Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, *, Thai, UmAlQura）

            datePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;

        }

        // DatePicker 控件所选择的日期发生了变化

        private void datePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)

        {

            // e.OldDate - 原日期

            // e.NewDate - 新日期

            lblMsg.Text = e.NewDate.ToString("yyyy-MM-dd hh:mm:ss");

        }

    }

}

<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">

        <StackPanel Margin="120 0 0 0">

            <TextBlock Name="lblMsg" FontSize="14.667" />

            <!--

                TimePicker - 时间选择控件（默认横排，需要竖排的话则设置 Orientation="Vertical" 即可）

                    Header - 控件的标题

                    TimeChanged - 选中的时间发生变化时所触发的事件

            -->

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

/*

 * TimePicker - 时间选择控件

 */

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 控件当前显示的时间

            timePicker.Time = new TimeSpan(, , );

            // MinuteIncrement - 分钟选择框的分钟增量（0, 15, 30, 45）

            timePicker.MinuteIncrement = ;

            // ClockIdentifier - 小时制式，ClockIdentifiers.TwelveHour（12HourClock），12 小时制

            timePicker.ClockIdentifier = ClockIdentifiers.TwelveHour;

            // ClockIdentifier - 小时制式，ClockIdentifiers.TwentyFourHour（24HourClock），24 小时制

            timePicker2.ClockIdentifier = ClockIdentifiers.TwentyFourHour;

        }

        // TimePicker 控件所选择的时间发生变化时所触发的事件

        private void timePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)

        {

            // e.OldTime - 原时间

            // e.NewTime - 新时间

            lblMsg.Text = e.NewTime.ToString("c");

        }

    }

}