首页 > 代码库 > 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

原文:重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker

[源码下载]


重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker



作者:webabcd


介绍
重新想象 Windows 8.1 Store Apps 之新增控件

  • DatePicker - 日期选择控件
  • TimePicker - 时间选择控件



示例
1、演示 DatePicker 的应用
DatePickerDemo.xaml

<Page    x:Class="Windows81.Controls.DatePickerDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">            <TextBlock Name="lblMsg" FontSize="14.667" />                     <!--                DatePicker - 日期选择控件(默认横排,需要竖排的话则设置 Orientation="Vertical" 即可)                    Header - 控件的标题                    DateChanged - 选中的日期发生变化时所触发的事件            -->            <DatePicker x:Name="datePicker" Header="Date" DateChanged="datePicker_DateChanged" Margin="0 20 0 0" />                        <!--                 通过格式模板(format templates)设置 DatePicker 的显示格式            -->            <DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated" Margin="0 20 0 0" />                        <!--                 通过格式模式(format patterns)设置 DatePicker 的显示格式            -->            <DatePicker DayFormat="{}{day.integer}({dayofweek.abbreviated})" MonthFormat="{}{month.integer(2)}" YearFormat="{}{year.full}" Margin="0 20 0 0" />            <DatePicker DayFormat="{}{day.integer}日 ({dayofweek.abbreviated})" MonthFormat="{}{month.integer(2)}月" YearFormat="{}{year.full}年" Margin="0 20 0 0" />            <!--                关于 format templates 和 format patterns 请参见:                http://msdn.microsoft.com/en-us/library/windows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx            -->                    </StackPanel>    </Grid></Page>

DatePickerDemo.xaml.cs

/* * DatePicker - 日期选择控件 */using System;using Windows.Globalization;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows81.Controls{    public sealed partial class DatePickerDemo : Page    {        public DatePickerDemo()        {            this.InitializeComponent();                        this.Loaded += DatePickerDemo_Loaded;        }        void DatePickerDemo_Loaded(object sender, RoutedEventArgs e)        {            // Date - DatePicker 控件当前显示的日期            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;        }        // DatePicker 控件所选择的日期发生了变化        private void datePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)        {            // e.OldDate - 原日期            // e.NewDate - 新日期            lblMsg.Text = e.NewDate.ToString("yyyy-MM-dd hh:mm:ss");        }    }}


2、演示 TimePicker 的应用
TimePickerDemo.xaml

<Page    x:Class="Windows81.Controls.TimePickerDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">            <TextBlock Name="lblMsg" FontSize="14.667" />            <!--                TimePicker - 时间选择控件(默认横排,需要竖排的话则设置 Orientation="Vertical" 即可)                    Header - 控件的标题                    TimeChanged - 选中的时间发生变化时所触发的事件            -->            <TimePicker Name="timePicker" Header="Time" TimeChanged="timePicker_TimeChanged" Margin="0 20 0 0" />            <TimePicker Name="timePicker2" Header="Time" Margin="0 20 0 0" />        </StackPanel>    </Grid></Page>

TimePickerDemo.xaml.cs

/* * TimePicker - 时间选择控件 */using System;using Windows.Globalization;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows81.Controls{    public sealed partial class TimePickerDemo : Page    {        public TimePickerDemo()        {            this.InitializeComponent();            this.Loaded += TimePickerDemo_Loaded;        }        void TimePickerDemo_Loaded(object sender, RoutedEventArgs 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 小时制            timePicker2.ClockIdentifier = ClockIdentifiers.TwentyFourHour;        }        // TimePicker 控件所选择的时间发生变化时所触发的事件        private void timePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)        {            // e.OldTime - 原时间            // e.NewTime - 新时间            lblMsg.Text = e.NewTime.ToString("c");        }    }}



OK
[源码下载]

重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker