重新想象 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(); // 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;
} // 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(, , ); // MinuteIncrement - 分钟选择框的分钟增量(0, 15, 30, 45)
timePicker.MinuteIncrement = ; // 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 (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图


下一篇:Tomcat启动后访问首页报错 显示JSP 空指针异常