与众不同 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, *, 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