WPF实现Element UI风格的日期时间选择器

抛开一切努力去做

背景

业务开发过程中遇到一个日期范围选择的需求，和Element UI的DateTimePicker组件比较类似，由两个日历控件组成，联动选择起始时间和结束时间。
问题

WPF中提供了一个DatePicker的控件，主要由DatePickerTextBox、Button和一个Calendar组成，其中Calendar是后台代码动态添加的，因此不能直接通过自定义DatePicker的控件模板实现需求。这里通过实现自定义DateTimePicker控件来满足需求。
技术要点与实现

由于Calendar结构比较复杂，本文通过控件组合的方式简单实现自定义DateTimePicker。先来看下实现效果。

首先创建一个名为DateTimePicker的UserControl,添加依赖属性HoverStart和HoverEnd用于控制日历中的开始日期和结束日期，添加依赖属性DateTimeRangeStart和DateTimeRangeEnd用于设置外部设置/获取起始时间和结束时间。
然后在XAML中添加两个WatermarkTextBox用于输入起始时间和结束时间（增加校验规则验证时间的合法性，这里不再详细说明如何写校验规则，具体可参考ValidationRule实现参数绑定）。接着添加一个Popup(默认关闭)，并在其中添加两个Calendar用于筛选日期，以及四个ComboBox用于筛选小时和分钟。当WatermarkTextBox捕获到鼠标时触发Popup打开。

1. <Grid>
2.     <Border Height="30" Width="320" BorderBrush="#c4c4c4" BorderThickness="1" CornerRadius="2">
3.         <StackPanel x:Name="datetimeSelected" Orientation="Horizontal" Height="30">
4.             <local:WatermarkTextBox x:Name="DateStartWTextBox"  GotMouseCapture="WatermarkTextBox_GotMouseCapture">
5.                 <local:WatermarkTextBox.Resources>
6.                     <helper:BindingProxy x:Key="dateRangeCeiling" Data="{Binding Text,ElementName=DateEndWTextBox}"/>
7.                 </local:WatermarkTextBox.Resources>
8.                 <local:WatermarkTextBox.Text>
9.                     <Binding Path="DateTimeRangeStart" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
10.                         <Binding.ValidationRules>
11.                             <helper:DateTimeValidationRule Type="Range">
12.                                 <helper:ValidationParams Param1="{x:Static System:DateTime.Today}" Param2="{Binding Data,Source={StaticResource dateRangeCeiling}}"/>
13.                             </helper:DateTimeValidationRule>
14.                         </Binding.ValidationRules>
15.                     </Binding>
16.                 </local:WatermarkTextBox.Text>
17.             </local:WatermarkTextBox>
18.             <TextBlock Text="~"/>
19.             <local:WatermarkTextBox x:Name="DateEndWTextBox"  GotMouseCapture="WatermarkTextBox_GotMouseCapture">
20.                 <local:WatermarkTextBox.Resources>
21.                     <helper:BindingProxy x:Key="dateRangeFloor" Data="{Binding Text,ElementName=DateStartWTextBox}"/>
22.                 </local:WatermarkTextBox.Resources>
23.                 <local:WatermarkTextBox.Text>
24.                     <Binding Path="DateTimeRangeEnd" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
25.                         <Binding.ValidationRules>
26.                             <helper:DateTimeValidationRule Type="Floor">
27.                                 <helper:ValidationParams Param1="{Binding Data,Source={StaticResource dateRangeFloor}}"/>
28.                             </helper:DateTimeValidationRule>
29.                         </Binding.ValidationRules>
30.                     </Binding>
31.                 </local:WatermarkTextBox.Text>
32.             </local:WatermarkTextBox>
33.             <local:ImageButton Width="18" Height="18" Click="ImageButton_Click"
34.                 HoverImage="/LBD_CLP_WPFControl;component/Images/calendar_hover.png"
35.                 NormalImage="/LBD_CLP_WPFControl;component/Images/calendar.png" />
36.         </StackPanel>
37.     </Border>
38.     <Popup x:Name="DatetimePopup" AllowsTransparency="True" StaysOpen="False" Placement="Top" VerticalOffset="-10" HorizontalOffset="-300" PlacementTarget="{Binding ElementName=datetimeSelected}" PopupAnimation="Slide">
39.         <Grid Background="White" Margin="3">
40.             <Grid.Effect>
41.                 <DropShadowEffect Color="Gray"  BlurRadius="16"  ShadowDepth="3" Opacity="0.2" Direction="0" />
42.             </Grid.Effect>
43.             <Grid.RowDefinitions>
44.                 <RowDefinition Height="*"/>
45.                 <RowDefinition Height="42"/>
46.                 <RowDefinition Height="42"/>
47.             </Grid.RowDefinitions>
48.             <StackPanel Orientation="Horizontal">
49.                 <Calendar x:Name="startCalendar" DockPanel.Dock="Left"
50.                              SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged"/>
51.                 <Line Y1="0" Y2="{Binding ActualHeight ,ElementName=startCalendar}" Stroke="#e4e4e4"/>
52.                 <Calendar x:Name="endCalendar" DockPanel.Dock="Right"
53.                              SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged" DisplayDate="{Binding DisplayDate,ElementName=startCalendar,Converter={StaticResource DateTimeAddtionConverter},ConverterParameter=1}"/>
54.             </StackPanel>
55.             <Border Grid.Row="1" BorderThickness="0 0 0 1" BorderBrush="#e4e4e4">
56.                 <StackPanel Orientation="Horizontal" TextElement.Foreground="#999999" TextElement.FontSize="14">
57.                     <TextBlock Text="开始时间:" Margin="15 0 7 0"/>
58.                     <ComboBox x:Name="startHours" Width="64" ItemStringFormat="{}{0:D2}" SelectionChanged="startHours_SelectionChanged"/>
59.                     <TextBlock Text=":" Margin="5 0 5 0"/>
60.                     <ComboBox x:Name="startMins" ItemStringFormat="{}{0:D2}" Width="64"/>
61.                     <TextBlock Text="截止时间:" Margin="40 0 7 0"/>
62.                     <ComboBox x:Name="endHours" ItemStringFormat="{}{0:D2}" Width="64"/>
63.                     <TextBlock Text=":" Margin="5 0 5 0"/>
64.                     <ComboBox x:Name="endMins" ItemStringFormat="{}{0:D2}" Width="64"/>
65.                 </StackPanel>
66.             </Border>
67.             <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0 0 11 0">
68.                 <local:ImageButton x:Name="clearBtn"  Content="清空" FontSize="14" Foreground="#0099ff"
69.                                     Click="clearBtn_Click"
70.                                     NormalImage="{x:Null}"
71.                                     HoverImage="{x:Null}"
72.                                     DownImage="{x:Null}"
73.                                     />
74.                 <Button x:Name="yesBtn" Content="确定" Width="56" Height="28" Margin="12 0 0 0" Click="yesBtn_Click">
75.                     <Button.Style>
76.                         
77.                     </Button.Style>
78.                 </Button>
79.             </StackPanel>
80.         </Grid>
81.     </Popup>
82. </Grid>

复制代码

紧接着就是修改Calendar的样式了。通常情况下，自定义控件模板只需要在Visual Studio的设计窗口或者Blend中选中控件，然后右键菜单中编辑模板即可。可能由于Calendar中的部分元素（CalendarButton和CalendarDayButton）是后台代码生成，这个方法编辑Calendar模板副本生成的CalendarStyle不包含完整的可视化树结构，无法对样式进一步修改。幸运的是微软官方文档公开了控件的默认样式和模板，在此基础上进行修改即可。通过官方文档可以发现Calendar完整的可视化树中包含了四个类型控件Calendar、CalendarItem、CalendarButton、CalendarDayButton。其中CalendarDayButton对应的就是日历中具体的“天”，管理着具体的“天”的状态，比如选中状态、不可选状态等，这也是我们主要修改的地方，接下来看下CalendarDayButton的样式。（其他几个元素的样式和模板参照官方文档修改即可）
[code][/code]样式中用到一个MultiBinding绑定CalendarDayButton以及前边提到的两个依赖属性：HoverStart和HoverEnd，然后通过MultiValueConverter转换器比较CalendarDayButton是否处于选中的日期范围，根据不同的状态设置其背景色和字体颜色。
最后就是在后台代码中根据日历的SelectedDatesChanged事件设置HoverStart和HoverEnd的值，以此来控制DateTimePicker中选中日期的样式。
总结

本文分享了一种简单实现自定义DateTimePicker控件的方式，同时也介绍了另外一种查看原生控件默认样式和模板的方法：查看微软官方文档。这种方法虽然不如在Visual Studio的设计窗口或者Blend中编辑模板副本方便，但提供了完整的结构、每个元素的组成部分以及可视化状态，方便开发人员清晰的了解控件全貌，可以应对修改复杂的原生控件样式和模板的需求。

来源:https://www.cnblogs.com/czwy/archive/2023/08/21/17641458.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！