✨WPF编程基础【3.8】：日期控件（附源码）-CSDN博客

在现代应用程序开发中，日期选择功能是用户界面中不可或缺的一部分。无论是预约系统、报表工具还是个人日程管理，一个直观、易用的日期控件都能极大提升用户体验。WPF（Windows Presentation Foundation）作为微软强大的UI框架，提供了两种专业的日期选择控件：Calendar和DatePicker。

本文将深入探讨这两种控件的特性、使用场景和高级定制技巧，通过详实的代码示例和效果对比，帮助开发者在实际项目中做出最合适的选择。无论你是WPF初学者还是经验丰富的开发者，都能从本文中获得实用的知识和技巧。

1. 🐱‍🏍Calendar与DatePicker公共属性详解

在深入探讨各自特性之前，让我们先了解这两个控件共享的公共属性，这些属性构成了日期控件的基础功能。

1.1 公共属性对比表

属性名	属性描述	应用场景
DisplayDateStart 和 DisplayDateEnd	控制日期显示的起始和结束范围	限制用户只能选择特定时间段的日期
BlackoutDates	禁用或标记不可选择的日期集合	标记节假日、已约满日期或系统维护期
SelectedDate	获取或设置当前选中的日期（DateTime?类型）	获取用户选择的日期，支持空值
DisplayDate	确定日历初始显示的日期	设置日历打开时默认显示的月份/年份
FirstDayOfWeek	设置每周的第一天	适应不同地区的周历习惯（周一或周日开始）
IsTodayHighlighted	是否突出显示当前日期	帮助用户快速定位到今天

1.2 公共属性使用示例

<Window x:Class="WpfDateControlsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="日期控件公共属性演示" Height="450" Width="800">
    
    <Window.Resources>
        <!-- 定义日期范围 -->
        <x:Array x:Key="PastDates" Type="{x:Type sys:DateTime}">
            <sys:DateTime>2024-01-01</sys:DateTime>
            <sys:DateTime>2024-01-02</sys:DateTime>
        </x:Array>
    </Window.Resources>

    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Text="日期控件公共属性演示" 
                   FontSize="16" FontWeight="Bold" Margin="0,0,0,20"/>
        
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <!-- Calendar控件示例 -->
            <Border BorderBrush="#CCCCCC" BorderThickness="1" Padding="10" Margin="0,0,20,0">
                <StackPanel>
                    <TextBlock Text="Calendar控件" FontWeight="Bold" Margin="0,0,0,10"/>
                    <Calendar x:Name="demoCalendar"
                              DisplayDateStart="2024-01-01"
                              DisplayDateEnd="2024-12-31"
                              SelectedDate="{x:Static sys:DateTime.Now}"
                              FirstDayOfWeek="Monday"
                              IsTodayHighlighted="True"
                              Width="300" Height="300">
                        <Calendar.BlackoutDates>
                            <CalendarDateRange Start="2024-02-14" End="2024-02-14"/>
                            <CalendarDateRange Start="2024-05-01" End="2024-05-01"/>
                        </Calendar.BlackoutDates>
                    </Calendar>
                    <TextBlock Margin="0,10,0,0">
                        <Run Text="选中日期:"/>
                        <Run Text="{Binding SelectedDate, ElementName=demoCalendar, StringFormat='yyyy-MM-dd'}"/>
                    </TextBlock>
                </StackPanel>
            </Border>
            
            <!-- DatePicker控件示例 -->
            <Border BorderBrush="#CCCCCC" BorderThickness="1" Padding="10">
                <StackPanel>
                    <TextBlock Text="DatePicker控件" FontWeight="Bold" Margin="0,0,0,10"/>
                    <DatePicker x:Name="demoDatePicker"
                                DisplayDateStart="2024-01-01"
                                DisplayDateEnd="2024-12-31"
                                SelectedDate="{x:Static sys:DateTime.Now}"
                                FirstDayOfWeek="Monday"
                                IsTodayHighlighted="True"
                                Width="200" Height="30"/>
                    <TextBlock Margin="0,10,0,0">
                        <Run Text="选中日期:"/>
                        <Run Text="{Binding SelectedDate, ElementName=demoDatePicker, StringFormat='yyyy-MM-dd'}"/>
                    </TextBlock>
                </StackPanel>
            </Border>
        </StackPanel>
    </Grid>
</Window>

2. 💕Calendar控件深度解析

2.1 DisplayMode属性：三种视图模式

Calendar控件最强大的特性之一是其灵活的显示模式，通过DisplayMode属性可以在年、月、十年三种视图间切换：

<Window x:Class="WpfDateControlsDemo.CalendarModesWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Calendar显示模式演示" Height="500" Width="600">
    
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Text="Calendar显示模式" 
                   FontSize="16" FontWeight="Bold" Margin="0,0,0,20"/>
        
        <!-- 模式选择控件 -->
        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,0,0,20">
            <TextBlock Text="显示模式:" VerticalAlignment="Center" Margin="0,0,10,0"/>
            <ComboBox x:Name="modeComboBox" Width="120" SelectionChanged="ModeComboBox_SelectionChanged">
                <ComboBoxItem Content="Month" IsSelected="True"/>
                <ComboBoxItem Content="Year"/>
                <ComboBoxItem Content="Decade"/>
            </ComboBox>
        </StackPanel>
        
        <!-- Calendar控件 -->
        <Calendar Grid.Row="2" x:Name="modeCalendar"
                  DisplayMode="Month"
                  SelectedDate="{x:Static sys:DateTime.Now}"
                  FirstDayOfWeek="Monday"
                  IsTodayHighlighted="True"/>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;

namespace WpfDateControlsDemo
{
    public partial class CalendarModesWindow : Window
    {
        public CalendarModesWindow()
        {
            InitializeComponent();
        }

        private void ModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (modeComboBox.SelectedItem is ComboBoxItem item)
            {
                switch (item.Content.ToString())
                {
                    case "Month":
                        modeCalendar.DisplayMode = CalendarMode.Month;
                        break;
                    case "Year":
                        modeCalendar.DisplayMode = CalendarMode.Year;
                        break;
                    case "Decade":
                        modeCalendar.DisplayMode = CalendarMode.Decade;
                        break;
                }
            }
        }
    }
}

2.2 高级样式定制

Calendar控件支持深度的视觉定制，让开发者可以创建符合应用程序风格的日期选择器：

<Window x:Class="WpfDateControlsDemo.CustomCalendarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="自定义Calendar样式" Height="550" Width="500">
    
    <Window.Resources>
        <!-- 自定义CalendarDayButton样式 -->
        <Style TargetType="CalendarDayButton" x:Key="ModernCalendarDayBtnStyle">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#FFFFFF" Offset="0"/>
                        <GradientStop Color="#F0F8FF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter