与众不同 windows phone (51) - 8.1 新增控件: DatePickerFlyout, TimePickerFlyout

作者：webabcd

介绍
与众不同 windows phone 8.1 之新增控件

DatePickerFlyout - 日期选取器控件
TimePickerFlyout - 时间选取器控件

示例
1、演示 DatePickerFlyout 的应用
DatePickerFlyoutDemo.xaml

<Page
    x:Class="Demo.Control.DatePickerFlyoutDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">
            
            <Button Content="Show DatePicker" >
                <Button.Flyout>
                    <!--
                        Title - 弹出框的标题
                    -->
                    <DatePickerFlyout x:Name="datePicker" Title="选择日期" DatePicked="datePicker_DatePicked" Closed="datePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--对于 DatePicker 控件来说，是 wp 和 windows 都支持的，详细说明参见：http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <DatePicker Header="Date"  Margin="0 10 0 0" />
            
            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

DatePickerFlyoutDemo.xaml.cs

/*
 * DatePickerFlyout - 日期选取器控件（wp only）
 *     ShowAtAsync(FrameworkElement target) - 弹出日期选取器控件
 *     Hide() - 隐藏弹出框
 *     
 *     DatePicked - 用户选择日期后（点击“完成”按钮）触发的事件
 *     Opening, Opened, Closed - 几个顾名思义的事件
 */

using System;
using Windows.Globalization;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Demo.Control
{
    public sealed partial class DatePickerFlyoutDemo : Page
    {
        public DatePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Date - 当前显示的日期
            datePicker.Date = DateTimeOffset.Now.AddMonths(1);

            // MinYear - DatePicker 控件所允许选择的最小的年份
            datePicker.MinYear = DateTimeOffset.Now.AddYears(-20);
            // MaxYear - DatePicker 控件所允许选择的最大的年份
            datePicker.MaxYear = DateTimeOffset.Now.AddYears(20);

            // YearVisible -  是否显示 year 选择框
            datePicker.YearVisible = true;
            // MonthVisible -  是否显示 month 选择框
            datePicker.MonthVisible = true;
            // DayVisible -  是否显示 day 选择框
            datePicker.DayVisible = true;

            // CalendarIdentifier - DatePicker 控件所使用的日历系统（Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, Taiwan, Thai, UmAlQura）
            datePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;

        }

        // 用户点击了“完成”按钮后触发的事件
        private void datePicker_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            // e.OldDate - 原日期
            // e.NewDate - 新日期
            lblMsg.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss");
            lblMsg.Text += Environment.NewLine;
        }

        // 通过 DatePicked 事件和 Closed 事件的结合，可以判断出用户是否点击了“取消”按钮或者按了“返回键”
        private void datePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
}

2、演示 TimePickerFlyout 的应用
TimePickerFlyoutDemo.xaml

<Page
    x:Class="Demo.Control.TimePickerFlyoutDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical">

            <Button Content="Show TimePicker" >
                <Button.Flyout>
                    <!--
                        Title - 弹出框的标题
                    -->
                    <TimePickerFlyout x:Name="timePicker" Title="选择时间" TimePicked="timePicker_TimePicked" Closed="timePicker_Closed" />
                </Button.Flyout>
            </Button>

            <!--对于 TimePicker 控件来说，是 wp 和 windows 都支持的，详细说明参见：http://www.cnblogs.com/webabcd/archive/2014/05/12/3722733.html-->
            <TimePicker Header="Time" Margin="0 20 0 0" />

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

TimePickerFlyoutDemo.xaml.cs

/*
 * TimePickerFlyout - 时间选取器控件（wp only）
 *     ShowAtAsync(FrameworkElement target) - 弹出时间选取器控件
 *     Hide() - 隐藏弹出框
 *     
 *     TimePicked - 用户选择时间后（点击“完成”按钮）触发的事件
 *     Opening, Opened, Closed - 几个顾名思义的事件
 */

using System;
using Windows.Globalization;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Demo.Control
{
    public sealed partial class TimePickerFlyoutDemo : Page
    {
        public TimePickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Time - TimePicker 控件当前显示的时间
            timePicker.Time = new TimeSpan(16, 0, 0);

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

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

            // ClockIdentifier - 小时制式，ClockIdentifiers.TwentyFourHour（24HourClock），24 小时制
            timePicker.ClockIdentifier = ClockIdentifiers.TwentyFourHour;
        }

        // 用户点击了“完成”按钮后触发的事件
        private void timePicker_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            // e.OldTime - 原时间
            // e.NewTime - 新时间
            lblMsg.Text = args.NewTime.ToString("c"); 
            lblMsg.Text += Environment.NewLine;
        }

        // 通过 TimePicked 事件和 Closed 事件的结合，可以判断出用户是否点击了“取消”按钮或者按了“返回键”
        private void timePicker_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }
    }
}