與眾不同 windows phone (51) - 8.1 新增控制項: DatePickerFlyout, TimePickerFlyout

標籤：

[源碼下載]

與眾不同 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;        }    }}

OK
[源碼下載]

與眾不同 windows phone (51) - 8.1 新增控制項: DatePickerFlyout, TimePickerFlyout