背景

业务开发过程中遇到一个日期范围选择的需求，和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. 文件系统考古：1974-Unix V7 File System

    有时,进步难以察觉,特别是当你正身处其中时.而对比新旧资料之间的差异,寻找那些推动变革的信息源,我们就可以清晰地看到进步的发生.在Linux(以及大部分Unix系统)中,都可以印证这一点. Unix ...

  2. JQuery的认识和安装

    jQuery 是一个 JavaScript 函数库. jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库. jQuery 库包含以下功能: HTML 元素选 ...

  3. 【python基础】复杂数据类型-列表类型（增删改查）

    1.初识列表(list) 列表由一系列按特定顺序排列的数据元素组成.可以将任何类型数据元素加入列表中,其中的数据元素之间没有任何关系.鉴于列表通常包含多个数据元素,给列表指定一个表示复数的名称是个不错 ...

  4. Python潮流周刊#5：并发一百万个任务要用多少内存？

    你好,我是猫哥.这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明.(标题取自其中一则分享,不代表全部内容都是该主题,特此声明.) 博客原文:https://python ...

  5. Java拓展-拆，装箱，线程，反射

    导言: 在学习JavaSE的时候,我们会使用Java基础编程,并且了解了什么是面向对象的编程,会使用Java写一些基础算法程序, 接下来,我们需要了解Java的自动拆箱和自动装箱,单线程和多线程,反射 ...

  6. 沉思篇-剖析Jetpack的LiveData

    上一篇我们讲到了架构组件中的Lifecycle,由于缺少具体的运用,可能缺少直观的感受,今天我们就用Lifecycle实战一回,看看Lifecycle是怎样运用到LiveData中的. LiveDat ...

  7. substrate 编译出错unresolved import `sp_runtime::testing` failed to resolve: could not find `GenesisConfig` in `system`

    error[E0432]: unresolved import `sp_runtime::testing` --> /Users/suyinrong/bitcoin-proj/substrate ...

  8. 【C#/.NET】使用Automapper映射record类型

    ​ 当使用Automapper进行对象映射时,通常我们会使用POCO(Plain Old CLR Object)类作为源对象和目标对象.然而,自从C# 9引入了record类型,它们提供了更简洁.不可 ...

  9. MySQL 存储引擎 InnoDB 内存结构之缓冲池

    缓冲池是主存储器中的一个区域,在访问 table 和索引数据时InnoDB会对其进行缓存.缓冲池允许直接从内存中访问频繁使用的数据,从而加快处理速度.在专用服务器上,通常将高达 80% 的物理内存分配 ...

  10. Oracle sql 错误 ： ORA-01861: 文字与格式字符串不匹配和日期与字符串互转问题解决

    正确的要这样的: public int update(String ceratedate); <update id="update" parameterType=" ...