背景

业务开发过程中遇到一个日期范围选择的需求，和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风格的日期时间选择器的更多相关文章

  1. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  2. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  3. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

  4. 24款最好的jQuery日期时间选择器插件

    如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...

  5. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  6. 日期时间选择器插件flatpickr

    前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...

  7. 解决elementui日期时间选择器提交时与后台date类型不匹配问题

    问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...

  8. Android中实现日期时间选择器(DatePicker和TimePicker)

    利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

  9. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  10. 微信小程序----日期时间选择器（自定义精确到分秒或时段）

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

随机推荐

  1. 2021-05-12：给定一个数组arr，只能对arr中的一个子数组排序， 但是想让arr整体都有序。返回满足这一设定的子数组中，最短的是多长？

    2021-05-12:给定一个数组arr,只能对arr中的一个子数组排序, 但是想让arr整体都有序.返回满足这一设定的子数组中,最短的是多长? 福大大 答案2021-05-12: 从左往右遍历,缓存 ...

  2. Hugging News #0512: 🤗 Transformers、🧨 Diffusers 更新，AI 游戏是下个新热点吗

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  3. @GrpcServise 注解的作用和使用

    转载请注明出处: 1. @GrpcServise 的作用和优势 在没有使用 @GrpcServise 注解编写服务端时,我们通常需要自定义 Server 以及端口,包括 start,stop ,注册s ...

  4. 计蒜客蓝桥杯省赛模拟G

    题目 一天蒜头君得到 n 个字符串 si,每个字符串的长度都不超过 1010. 蒜头君在想,在这 n 个字符串中,以 si 为后缀的字符串有多少个呢? 输入格式 第一行输入一个整数 n. 接下来 n ...

  5. k8s资源对象(二)

    Configmap和Secret资源介绍 secret和configmap资源都是通过挂载的方式将对应数据挂载到容器内部环境中去使用,两者的使用没有太多的不同 ,configmap资源通常用于为pod ...

  6. RabbitMQ系列-概念及安装

    1. 消息队列 消息队列是指利用队列这种数据结构进行消息发送.缓存.接收,使得进程间能相互通信,是点对点的通信 而消息代理是对消息队列的扩展,支持对消息的路由,是发布-订阅模式的通信,消息的发送者并不 ...

  7. iOS网络数据指标收集

    在平时开发中有时候需要收集网络不同阶段性能数据来分析网络情况,下面总结了2种收集方式. 1.通过NSURLSession提供的代理方法收集 2.通过NSURLProtocol做统一网络请求拦截收集 通 ...

  8. Terraform 改善基础架构的十个最佳实践

    Terraform 是一种非常流行的开源 IaC(基础设施即代码)工具,用于定义和提供完整的基础设施.Terraform 于 2014 年推出,其采用率已在全球范围内快速增长,越来越多的开发人员正在学 ...

  9. Apikit SaaS 10.9.0 版本更新： 接口测试支持通过 URL 请求大型文件，支持导出为 Postman 格式文件

    Hi,大家好! Eolink Apikit 即将在 2023年 6月 8日晚 18:00 开始更新 10.9.0 版本.本次版本更新主要是对多个应用级资源合并,并基于此简化付费套餐和降低费率. 本次应 ...

  10. 【LeetCode专题#基本计算器】基本计算器I，图解中序表达式转逆波兰表达式，太难了

    基本计算器 https://leetcode.cn/problems/basic-calculator/?envType=list&envId=cKNEfNsF 给你一个字符串表达式 s ,请 ...