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打开。
<Grid>
<Border Height="30" Width="320" BorderBrush="#c4c4c4" BorderThickness="1" CornerRadius="2">
<StackPanel x:Name="datetimeSelected" Orientation="Horizontal" Height="30">
<local:WatermarkTextBox x:Name="DateStartWTextBox" Style="{StaticResource DateWatermarkTextBoxStyle}" GotMouseCapture="WatermarkTextBox_GotMouseCapture">
<local:WatermarkTextBox.Resources>
<helper:BindingProxy x:Key="dateRangeCeiling" Data="{Binding Text,ElementName=DateEndWTextBox}"/>
</local:WatermarkTextBox.Resources>
<local:WatermarkTextBox.Text>
<Binding Path="DateTimeRangeStart" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<helper:DateTimeValidationRule Type="Range">
<helper:ValidationParams Param1="{x:Static System:DateTime.Today}" Param2="{Binding Data,Source={StaticResource dateRangeCeiling}}"/>
</helper:DateTimeValidationRule>
</Binding.ValidationRules>
</Binding>
</local:WatermarkTextBox.Text>
</local:WatermarkTextBox>
<TextBlock Text="~"/>
<local:WatermarkTextBox x:Name="DateEndWTextBox" Style="{StaticResource DateWatermarkTextBoxStyle}" GotMouseCapture="WatermarkTextBox_GotMouseCapture">
<local:WatermarkTextBox.Resources>
<helper:BindingProxy x:Key="dateRangeFloor" Data="{Binding Text,ElementName=DateStartWTextBox}"/>
</local:WatermarkTextBox.Resources>
<local:WatermarkTextBox.Text>
<Binding Path="DateTimeRangeEnd" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<helper:DateTimeValidationRule Type="Floor">
<helper:ValidationParams Param1="{Binding Data,Source={StaticResource dateRangeFloor}}"/>
</helper:DateTimeValidationRule>
</Binding.ValidationRules>
</Binding>
</local:WatermarkTextBox.Text>
</local:WatermarkTextBox>
<local:ImageButton Width="18" Height="18" Click="ImageButton_Click"
HoverImage="/LBD_CLP_WPFControl;component/Images/calendar_hover.png"
NormalImage="/LBD_CLP_WPFControl;component/Images/calendar.png" />
</StackPanel>
</Border>
<Popup x:Name="DatetimePopup" AllowsTransparency="True" StaysOpen="False" Placement="Top" VerticalOffset="-10" HorizontalOffset="-300" PlacementTarget="{Binding ElementName=datetimeSelected}" PopupAnimation="Slide">
<Grid Background="White" Margin="3">
<Grid.Effect>
<DropShadowEffect Color="Gray" BlurRadius="16" ShadowDepth="3" Opacity="0.2" Direction="0" />
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="42"/>
<RowDefinition Height="42"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Calendar x:Name="startCalendar" DockPanel.Dock="Left"
Style="{DynamicResource CalendarStyle}" SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged"/>
<Line Y1="0" Y2="{Binding ActualHeight ,ElementName=startCalendar}" Stroke="#e4e4e4"/>
<Calendar x:Name="endCalendar" DockPanel.Dock="Right"
Style="{DynamicResource CalendarStyle}" SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged" DisplayDate="{Binding DisplayDate,ElementName=startCalendar,Converter={StaticResource DateTimeAddtionConverter},ConverterParameter=1}"/>
</StackPanel>
<Border Grid.Row="1" BorderThickness="0 0 0 1" BorderBrush="#e4e4e4">
<StackPanel Orientation="Horizontal" TextElement.Foreground="#999999" TextElement.FontSize="14">
<TextBlock Text="开始时间:" Margin="15 0 7 0"/>
<ComboBox x:Name="startHours" Width="64" ItemStringFormat="{}{0:D2}" SelectionChanged="startHours_SelectionChanged"/>
<TextBlock Text=":" Margin="5 0 5 0"/>
<ComboBox x:Name="startMins" ItemStringFormat="{}{0:D2}" Width="64"/>
<TextBlock Text="截止时间:" Margin="40 0 7 0"/>
<ComboBox x:Name="endHours" ItemStringFormat="{}{0:D2}" Width="64"/>
<TextBlock Text=":" Margin="5 0 5 0"/>
<ComboBox x:Name="endMins" ItemStringFormat="{}{0:D2}" Width="64"/>
</StackPanel>
</Border>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0 0 11 0">
<local:ImageButton x:Name="clearBtn" Style="{StaticResource ImageLinkButton}" Content="清空" FontSize="14" Foreground="#0099ff"
Click="clearBtn_Click"
NormalImage="{x:Null}"
HoverImage="{x:Null}"
DownImage="{x:Null}"
/>
<Button x:Name="yesBtn" Content="确定" Width="56" Height="28" Margin="12 0 0 0" Click="yesBtn_Click">
<Button.Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#dcdfe6"/>
<Setter Property="Foreground" Value="#333333"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" ClipToBounds="True">
<ContentPresenter
RecognizesAccessKey="True"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="#409eff"/>
<Setter Property="Foreground" Value="#409eff"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</StackPanel>
</Grid>
</Popup>
</Grid>
紧接着就是修改Calendar的样式了。通常情况下，自定义控件模板只需要在Visual Studio的设计窗口或者Blend中选中控件，然后右键菜单中编辑模板即可。可能由于Calendar中的部分元素（CalendarButton和CalendarDayButton）是后台代码生成，这个方法编辑Calendar模板副本生成的CalendarStyle不包含完整的可视化树结构，无法对样式进一步修改。幸运的是微软官方文档公开了控件的默认样式和模板，在此基础上进行修改即可。通过官方文档可以发现Calendar完整的可视化树中包含了四个类型控件Calendar、CalendarItem、CalendarButton、CalendarDayButton。其中CalendarDayButton对应的就是日历中具体的“天”，管理着具体的“天”的状态，比如选中状态、不可选状态等，这也是我们主要修改的地方，接下来看下CalendarDayButton的样式。（其他几个元素的样式和模板参照官方文档修改即可）
<Style x:Key="CalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}">
<Setter Property="MinWidth" Value="5" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="Width" Value="42"/>
<Setter Property="Height" Value="42"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid Height="26" MouseUp="Grid_MouseUp">
<Border x:Name="SelectedBackground" Background="#f2f6fc" Visibility="Collapsed">
<Border.CornerRadius>
<MultiBinding Converter="{StaticResource SelectedDatesConverter}">
<Binding/>
<Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
<Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
</MultiBinding>
</Border.CornerRadius>
</Border>
<Grid Width="22" Height="22">
<Rectangle x:Name="StartStopBackground" Fill="#409eff" RadiusX="11" RadiusY="11" >
<Rectangle.Visibility>
<MultiBinding Converter="{StaticResource SelectedDatesConverter}">
<Binding/>
<Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
<Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
<Binding Path="IsInactive" RelativeSource="{RelativeSource AncestorType={x:Type CalendarDayButton}}"/>
</MultiBinding>
</Rectangle.Visibility>
</Rectangle>
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle
x:Name="HighlightBackground"
Grid.ColumnSpan="2"
Fill="#FFBADDE9"
Opacity="0"
RadiusX="11"
RadiusY="11" />
<ContentPresenter
x:Name="NormalText"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="#FF333333" />
<Path
x:Name="Blackout"
Grid.ColumnSpan="2"
Margin="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
Fill="#FF000000"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill" />
<Rectangle
x:Name="DayButtonFocusVisual"
Grid.ColumnSpan="2"
IsHitTestVisible="false"
RadiusX="11"
RadiusY="1"
Stroke="#FF45D6FA"
Visibility="Collapsed" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsInactive" Value="True">
<Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
<Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
</Trigger>
<Trigger Property="IsBlackedOut" Value="true">
<Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
<Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactive" Value="false"/>
<Condition Property="IsSelected" Value="true"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Visibility" Value="Visible" TargetName="SelectedBackground"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactive" Value="false"/>
<Condition Property="IsBlackedOut" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Opacity" Value="0.5" TargetName="HighlightBackground"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactive" Value="false"/>
<Condition Property="IsToday" Value="true"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="TextElement.Foreground" Value="#409eff" TargetName="NormalText"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactive" Value="false"/>
<Condition Property="Visibility" Value="Visible" SourceName="StartStopBackground"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="TextElement.Foreground" Value="#ffffff" TargetName="NormalText"/>
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
样式中用到一个MultiBinding绑定CalendarDayButton以及前边提到的两个依赖属性：HoverStart和HoverEnd，然后通过MultiValueConverter转换器比较CalendarDayButton是否处于选中的日期范围，根据不同的状态设置其背景色和字体颜色。
最后就是在后台代码中根据日历的SelectedDatesChanged事件设置HoverStart和HoverEnd的值，以此来控制DateTimePicker中选中日期的样式。
总结
本文分享了一种简单实现自定义DateTimePicker控件的方式，同时也介绍了另外一种查看原生控件默认样式和模板的方法：查看微软官方文档。这种方法虽然不如在Visual Studio的设计窗口或者Blend中编辑模板副本方便，但提供了完整的结构、每个元素的组成部分以及可视化状态，方便开发人员清晰的了解控件全貌，可以应对修改复杂的原生控件样式和模板的需求。
WPF实现Element UI风格的日期时间选择器的更多相关文章
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
- 24款最好的jQuery日期时间选择器插件
如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...
- Bootstrap-datepicker日期时间选择器的简单使用
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- 日期时间选择器插件flatpickr
前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...
- 解决elementui日期时间选择器提交时与后台date类型不匹配问题
问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...
- Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
- 微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...
随机推荐
- 2021-07-09：股票问题6。给定一个整数数组 prices，其中第 i 个元素代表了第 i 天的股票价格 ；整数 fee 代表了交易股票的手续费用。你可以无限次地完成交易，但是你每笔交易都需要付
2021-07-09:股票问题6.给定一个整数数组 prices,其中第 i 个元素代表了第 i 天的股票价格 :整数 fee 代表了交易股票的手续费用.你可以无限次地完成交易,但是你每笔交易都需要付 ...
- odoo开发教程十三：qweb报表
一:概述 报表是使用qweb定义的,报表的pdf导出是使用wkhtmltopdf来完成的. 如果需要为一个模型创建报表,需要定义report及对应模板. 如果有需要的话还可以指定特定的纸张格式, 如果 ...
- hello-iot
iot,internet of things 环境搭建 使用真实环境 Single-board computer - Raspberry Pi Arduino - Wio Terminal 或者虚拟环 ...
- 一个.Net强大的Excel控件，支持WinForm、WPF、Android【强烈推荐】
推荐一个强大的电子表单控件,使用简单且功能强大. 项目简介 这是一个开源的表格控制组件,支持Winform.WPF和Android平台,可以方便的加载.修改和导出Excel文件,支持数据格式.大纲.公 ...
- CANoe _ Panel面板的创建过程
在Canoe中创建Panel面板,用于显示和操作CAN网络的数据和信号,遵循以下步骤: 1.打开Canoe 启动Canoe软件. 2.打开项目 在Canoe的菜单栏中,选择"File&quo ...
- go语言字符与字符串相关
ASCII ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁 字母的一套单字节编码系统 字符 本质上来 ...
- 逍遥自在学C语言 | 指针和数组的关联
前言 指针和数组之间存在着紧密的关系.在本文中,我们将探讨指针和数组的关系.指针算术和数组遍历.多维数组与指针以及指针数组和数组指针. 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 ...
- 关于Java已死，看看国外开发者怎么说的
博主在浏览 medium 社区时,发现了一篇点赞量 1.5k 的文章,名称叫<Java is Dead - 5 Misconceptions of developers that still t ...
- python学习--采集弹幕信息
# -*- coding: utf-8 -*-"""Created on Mon Nov 4 12:00:12 2019 @author: DELL"" ...
- 基于java+springboot的视频点播网站-在线视频点播系统
该系统是基于java+springboot开发的视频点播系统.是给师妹开发的毕业设计. 演示地址 前台地址: http://video.gitapp.cn 后台地址: http://video.git ...