与众不同 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
[源码下载]

posted @ 2015-01-27 08:23  webabcd  阅读(1868)  评论(2编辑  收藏  举报