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

時間  2019-11-17
標籤 背水一戰 windows 控件 日期 calendarview datepicker timepicker 欄目 Windows 简体版
原文   原文鏈接

[源碼下載]


html

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



做者：webabcd


介紹
背水一戰 Windows 10 之 控件（日期類）html5

  • CalendarView
  • DatePicker
  • TimePicker



示例
一、CalendarView 的示例
Controls/DateControl/CalendarViewDemo.xamlc++

<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.csweb

/*
 * 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[0] as ComboBoxItem).Content.ToString());
        }

        private void cmbDisplayMode_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            calendarView.DisplayMode = (CalendarViewDisplayMode)Enum.Parse(typeof(CalendarViewDisplayMode), (e.AddedItems[0] 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[0] 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 - 當前被選中的日期集合
        }
    }
}


二、DatePicker 的示例
Controls/DateControl/DatePickerDemo.xamlexpress

<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.cswindows

/*
 * 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(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 控件使用的日曆系統，一個字符串值，在 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")}";
        }
    }
}


三、TimePicker 的示例
Controls/DateControl/TimePickerDemo.xamlapp

<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.csasp.net

/*
 * 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(16, 0, 0);

            // MinuteIncrement - 分鐘選擇框的分鐘增量（0, 15, 30, 45）
            timePicker1.MinuteIncrement = 15;

            // 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
[源碼下載]測試

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程