背水一战 Windows 10 (44) - 控件（日期类）: CalendarView, DatePicker, TimePicker

[源码下载]

背水一战 Windows 10 (44) - 控件（日期类）: CalendarView, DatePicker, TimePicker

作者：webabcd

介绍
背水一战 Windows 10 之 控件（日期类）

• CalendarView
• DatePicker
• TimePicker

示例
1、CalendarView 的示例
Controls/DateControl/CalendarViewDemo.xaml

<Page

    x:Class="Windows10.Controls.DateControl.CalendarViewDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.DateControl"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    xmlns:common="using:Windows10.Common">

    <Page.Resources>

        <common:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter" />

    </Page.Resources>

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <CheckBox Name="chkIsOutOfScopeEnabled" Margin="5" Content="IsOutOfScopeEnabled" IsChecked="True" />

            <CheckBox Name="chkIsGroupLabelVisible" Margin="5" Content="IsGroupLabelVisible" IsChecked="True" />

            <CheckBox Name="chkIsTodayHighlighted" Margin="5" Content="IsTodayHighlighted" IsChecked="True" />

            <ComboBox x:Name="cmbSelectionMode" Margin="5" PlaceholderText="SelectionMode" SelectionChanged="cmbSelectionMode_SelectionChanged">

                <ComboBoxItem>None</ComboBoxItem>

                <ComboBoxItem>Single</ComboBoxItem>

                <ComboBoxItem>Multiple</ComboBoxItem>

            </ComboBox>

            <ComboBox x:Name="cmbDisplayMode" Margin="5" PlaceholderText="DisplayMode" SelectionChanged="cmbDisplayMode_SelectionChanged">

                <ComboBoxItem>Month</ComboBoxItem>

                <ComboBoxItem>Year</ComboBoxItem>

                <ComboBoxItem>Decade</ComboBoxItem>

            </ComboBox>

            <ComboBox x:Name="cmbFirstDayOfWeek" Margin="5" PlaceholderText="FirstDayOfWeek" SelectionChanged="cmbFirstDayOfWeek_SelectionChanged">

                <ComboBoxItem>Sunday</ComboBoxItem>

                <ComboBoxItem>Monday</ComboBoxItem>

                <ComboBoxItem>Tuesday</ComboBoxItem>

                <ComboBoxItem>Wednesday</ComboBoxItem>

                <ComboBoxItem>Thursday</ComboBoxItem>

                <ComboBoxItem>Friday</ComboBoxItem>

                <ComboBoxItem>Saturday</ComboBoxItem>

            </ComboBox>

            <!--

                CalendarView - 日历控件

                    IsOutOfScopeEnabled - 是否以不同的颜色显示范围外的日历项

                    IsGroupLabelVisible - 是否在月的第一天或年的第一月的日历项中显示月份或年份

                    IsTodayHighlighted - 是否高亮显示当天日历项

                    FirstDayOfWeek - 指定每周的第一天是周几

                    SelectionMode - 日历的选择模式（None - 禁止选择, Single - 单选, Multiple - 多选）

                    DisplayMode - 日历的显示模式（Month - 月, Year - 年, Decade - 十年）

                    Language - 日历上的显示语言

                    CalendarIdentifier - 控件使用的日历系统，一个字符串值，在 CalendarIdentifiers 类中有封装

                    SelectedDatesChanged - 选中的日期发生变化时触发的事件

                    CalendarViewDayItemChanging - 加载日历项时触发的事件

                    其他大部分属性都是用于配置显示样式的了，具体说明详见文档

                    另外，在 CalendarView 控件中没有属性可以直接设置当天日历项的背景色（在本例的 code-behind 中给出了解决办法）

            -->

            <CalendarView Name="calendarView" Margin="5"

                          IsOutOfScopeEnabled="{x:Bind chkIsOutOfScopeEnabled.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverter}}"

                          IsGroupLabelVisible="{x:Bind chkIsGroupLabelVisible.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverter}}"

                          IsTodayHighlighted="{x:Bind chkIsTodayHighlighted.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverter}}"

                          FirstDayOfWeek="Sunday"

                          SelectionMode="Single"

                          DisplayMode="Month"

                          Language="zh-cn"

                          CalendarIdentifier="GregorianCalendar"

                          SelectedDatesChanged="calendarView_SelectedDatesChanged"

                          CalendarViewDayItemChanging="calendarView_CalendarViewDayItemChanging" />

        </StackPanel>

    </Grid>

</Page>

Controls/DateControl/CalendarViewDemo.xaml.cs

/*

 * CalendarView - 日历控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *

 * CalendarViewDayItem - 日历项控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *     Date - 获取此日历项的日期（只读）

 *     IsBlackout - 此日历项是否不可用（通过 CalendarView 的 BlackoutForeground 属性可配置不可用日历项的前景色）

 */

using System;

using Windows.UI;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

namespace Windows10.Controls.DateControl

{

    public sealed partial class CalendarViewDemo : Page

    {

        public CalendarViewDemo()

        {

            this.InitializeComponent();

        }

        private void cmbSelectionMode_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            calendarView.SelectionMode = (CalendarViewSelectionMode)Enum.Parse(typeof(CalendarViewSelectionMode), (e.AddedItems[] as ComboBoxItem).Content.ToString());

        }

        private void cmbDisplayMode_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            calendarView.DisplayMode = (CalendarViewDisplayMode)Enum.Parse(typeof(CalendarViewDisplayMode), (e.AddedItems[] as ComboBoxItem).Content.ToString());

        }

        private void cmbFirstDayOfWeek_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            calendarView.FirstDayOfWeek = (Windows.Globalization.DayOfWeek)Enum.Parse(typeof(Windows.Globalization.DayOfWeek), (e.AddedItems[] as ComboBoxItem).Content.ToString());

        }

        // 加载日历项时触发的事件

        private void calendarView_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)

        {

            // 如果当前加载的日历项时当天的话

            if (args.Item.Date.Date.Equals(DateTime.Now.Date))

            {

                // 修改日历项的背景色（在 CalendarView 控件中没有属性可以直接设置当天日历项的背景色）

                // 另外，还有一些日历项的样式无法通过 CalendarView 直接设置，那么都可以考虑像这样做

                args.Item.Background = new SolidColorBrush(Colors.Orange);

            }

        }

        // 选中的日期发生变化时触发的事件

        private void calendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)

        {

            // args.RemovedDates - 之前被选中的日期集合

            // args.AddedDates - 当前被选中的日期集合

            // calendarView.SelectedDates - 当前被选中的日期集合

        }

    }

}

2、DatePicker 的示例
Controls/DateControl/DatePickerDemo.xaml

<Page

    x:Class="Windows10.Controls.DateControl.DatePickerDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.DateControl"

    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="10 0 10 10">

            <TextBlock Name="lblMsg" />

            <!--

                DatePicker - 日期选择控件

                    Header - 可以设置一个纯文本，不能命中测试，空 Header 的话不会占用任何空间

                    HeaderTemplate - 可以将 Header 设置为任何 xaml，且支持命中测试

                    DateChanged - 选中的日期发生变化时触发的事件

                    Orientation - 经测试，无效

                    YearFormat, MonthFormat, DayFormat - 格式化年, 月, 日数据（支持 format templates 和 format patterns）

                注：关于 format templates 和 format patterns 请参见

                http://msdn.microsoft.com/en-us/library/windows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx

            -->

            <DatePicker x:Name="datePicker" Header="Date" DateChanged="datePicker_DateChanged" Margin="5" Orientation="Vertical" />

            <!--

                通过格式模板（format templates）设置 DatePicker 的显示格式

            -->

            <DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated" Margin="5" />

            <!--

                通过格式模式（format patterns）设置 DatePicker 的显示格式

            -->

            <DatePicker DayFormat="{}{day.integer}({dayofweek.abbreviated})" MonthFormat="{}{month.integer(2)}" YearFormat="{}{year.full}" Margin="5" />

            <DatePicker DayFormat="{}{day.integer}日 ({dayofweek.abbreviated})" MonthFormat="{}{month.integer(2)}月" YearFormat="{}{year.full}年" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Controls/DateControl/DatePickerDemo.xaml.cs

/*

 * DatePicker - 日期选择控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *     YearVisible, MonthVisible, DayVisible, MinYear, MaxYear, Date, CalendarIdentifier - 详见下面示例代码中的注释

 */

using System;

using Windows.Globalization;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.DateControl

{

    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 控件使用的日历系统，一个字符串值，在 CalendarIdentifiers 类中有封装

            datePicker.CalendarIdentifier = CalendarIdentifiers.Gregorian;

        }

        // DatePicker 控件选中的日期发生变化时触发的事件

        private void datePicker_DateChanged(object sender, DatePickerValueChangedEventArgs e)

        {

            // e.OldDate - 原日期

            // e.NewDate - 新日期

            lblMsg.Text = $"OldDate - {e.OldDate.ToString("yyyy-MM-dd hh:mm:ss")}, NewDate - {e.NewDate.ToString("yyyy-MM-dd hh:mm:ss")}";

        }

    }

}

3、TimePicker 的示例
Controls/DateControl/TimePickerDemo.xaml

<Page

    x:Class="Windows10.Controls.DateControl.TimePickerDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.DateControl"

    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="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <!--

                TimePicker - 时间选择控件

                    Header - 可以设置一个纯文本，不能命中测试，空 Header 的话不会占用任何空间

                    HeaderTemplate - 可以将 Header 设置为任何 xaml，且支持命中测试

                    TimeChanged - 选中的时间发生变化时触发的事件

            -->

            <TimePicker Name="timePicker1" Header="Time" TimeChanged="timePicker1_TimeChanged" Margin="5" />

            <TimePicker Name="timePicker2" Header="Time" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Controls/DateControl/TimePickerDemo.xaml.cs

/*

 * TimePicker - 时间选择控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *     Time, MinuteIncrement, ClockIdentifier - 详见下面示例代码中的注释

 */

using System;

using Windows.Globalization;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.DateControl

{

    public sealed partial class TimePickerDemo : Page

    {

        public TimePickerDemo()

        {

            this.InitializeComponent();

            this.Loaded += TimePickerDemo_Loaded;

        }

        void TimePickerDemo_Loaded(object sender, RoutedEventArgs e)

        {

            // Time - TimePicker 控件当前显示的时间

            timePicker1.Time = new TimeSpan(, , );

            // MinuteIncrement - 分钟选择框的分钟增量（0, 15, 30, 45）

            timePicker1.MinuteIncrement = ;

            // ClockIdentifier - 小时制式，ClockIdentifiers.TwelveHour（12HourClock），12 小时制

            timePicker1.ClockIdentifier = ClockIdentifiers.TwelveHour;

            // ClockIdentifier - 小时制式，ClockIdentifiers.TwentyFourHour（24HourClock），24 小时制

            timePicker2.ClockIdentifier = ClockIdentifiers.TwentyFourHour;

        }

        // TimePicker 控件选中的时间发生变化时触发的事件

        private void timePicker1_TimeChanged(object sender, TimePickerValueChangedEventArgs e)

        {

            // e.OldTime - 原时间

            // e.NewTime - 新时间

            lblMsg.Text = $"OldTime - {e.OldTime.ToString("c")}, NewTime - {e.NewTime.ToString("c")}";

        }

    }

}

OK
[源码下载]