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

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

/*

 * 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();

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

        }

        // 用户点击了“完成”按钮后触发的事件

        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;

        }

    }

}

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

/*

 * 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(, , );

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

            timePicker.MinuteIncrement = ;

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

        }

    }

}