经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
WPF实现Element UI风格的日期时间选择器
来源:cnblogs  作者:czwy  时间:2023/8/29 8:49:01  对本文有异议

背景

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

问题

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

技术要点与实现

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

首先创建一个名为DateTimePicker的UserControl,添加依赖属性HoverStartHoverEnd用于控制日历中的开始日期和结束日期,添加依赖属性DateTimeRangeStartDateTimeRangeEnd用于设置外部设置/获取起始时间和结束时间。

然后在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" Style="{StaticResource DateWatermarkTextBoxStyle}" 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" Style="{StaticResource DateWatermarkTextBoxStyle}" 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="/Platanus;component/Images/calendar_hover.png"
  35. NormalImage="/Platanus;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. Style="{DynamicResource CalendarStyle}" 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. Style="{DynamicResource CalendarStyle}" 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" Style="{StaticResource ImageLinkButton}" 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. <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
  77. <Setter Property="BorderThickness" Value="1"/>
  78. <Setter Property="BorderBrush" Value="#dcdfe6"/>
  79. <Setter Property="Foreground" Value="#333333"/>
  80. <Setter Property="OverridesDefaultStyle" Value="True"/>
  81. <Setter Property="Template">
  82. <Setter.Value>
  83. <ControlTemplate TargetType="{x:Type Button}">
  84. <Border x:Name="border" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" ClipToBounds="True">
  85. <ContentPresenter
  86. RecognizesAccessKey="True"
  87. Margin="{TemplateBinding Padding}"
  88. SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
  89. HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  90. VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  91. </Border>
  92. <ControlTemplate.Triggers>
  93. <MultiTrigger>
  94. <MultiTrigger.Conditions>
  95. <Condition Property="IsPressed" Value="false"/>
  96. <Condition Property="IsMouseOver" Value="true"/>
  97. </MultiTrigger.Conditions>
  98. <Setter Property="BorderBrush" Value="#409eff"/>
  99. <Setter Property="Foreground" Value="#409eff"/>
  100. </MultiTrigger>
  101. </ControlTemplate.Triggers>
  102. </ControlTemplate>
  103. </Setter.Value>
  104. </Setter>
  105. </Style>
  106. </Button.Style>
  107. </Button>
  108. </StackPanel>
  109. </Grid>
  110. </Popup>
  111. </Grid>

紧接着就是修改Calendar的样式了。通常情况下,自定义控件模板只需要在Visual Studio的设计窗口或者Blend中选中控件,然后右键菜单中编辑模板即可。可能由于Calendar中的部分元素(CalendarButtonCalendarDayButton)是后台代码生成,这个方法编辑Calendar模板副本生成的CalendarStyle不包含完整的可视化树结构,无法对样式进一步修改。幸运的是微软官方文档公开了控件的默认样式和模板,在此基础上进行修改即可。通过官方文档可以发现Calendar完整的可视化树中包含了四个类型控件CalendarCalendarItemCalendarButtonCalendarDayButton。其中CalendarDayButton对应的就是日历中具体的“天”,管理着具体的“天”的状态,比如选中状态、不可选状态等,这也是我们主要修改的地方,接下来看下CalendarDayButton的样式。(其他几个元素的样式和模板参照官方文档修改即可)

  1. <Style x:Key="CalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}">
  2. <Setter Property="MinWidth" Value="5" />
  3. <Setter Property="MinHeight" Value="5" />
  4. <Setter Property="Width" Value="42"/>
  5. <Setter Property="Height" Value="42"/>
  6. <Setter Property="FontSize" Value="12" />
  7. <Setter Property="HorizontalContentAlignment" Value="Center" />
  8. <Setter Property="VerticalContentAlignment" Value="Center" />
  9. <Setter Property="BorderThickness" Value="0"/>
  10. <Setter Property="Template">
  11. <Setter.Value>
  12. <ControlTemplate TargetType="{x:Type CalendarDayButton}">
  13. <Grid Height="26" MouseUp="Grid_MouseUp">
  14. <Border x:Name="SelectedBackground" Background="#f2f6fc" Visibility="Collapsed">
  15. <Border.CornerRadius>
  16. <MultiBinding Converter="{StaticResource SelectedDatesConverter}">
  17. <Binding/>
  18. <Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
  19. <Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
  20. </MultiBinding>
  21. </Border.CornerRadius>
  22. </Border>
  23. <Grid Width="22" Height="22">
  24. <Rectangle x:Name="StartStopBackground" Fill="#409eff" RadiusX="11" RadiusY="11" >
  25. <Rectangle.Visibility>
  26. <MultiBinding Converter="{StaticResource SelectedDatesConverter}">
  27. <Binding/>
  28. <Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
  29. <Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
  30. <Binding Path="IsInactive" RelativeSource="{RelativeSource AncestorType={x:Type CalendarDayButton}}"/>
  31. </MultiBinding>
  32. </Rectangle.Visibility>
  33. </Rectangle>
  34. <Border
  35. Background="{TemplateBinding Background}"
  36. BorderBrush="{TemplateBinding BorderBrush}"
  37. BorderThickness="{TemplateBinding BorderThickness}" />
  38. <Rectangle
  39. x:Name="HighlightBackground"
  40. Grid.ColumnSpan="2"
  41. Fill="#FFBADDE9"
  42. Opacity="0"
  43. RadiusX="11"
  44. RadiusY="11" />
  45. <ContentPresenter
  46. x:Name="NormalText"
  47. HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
  48. VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  49. TextElement.Foreground="#FF333333" />
  50. <Path
  51. x:Name="Blackout"
  52. Grid.ColumnSpan="2"
  53. Margin="3"
  54. HorizontalAlignment="Stretch"
  55. VerticalAlignment="Stretch"
  56. 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"
  57. Fill="#FF000000"
  58. Opacity="0"
  59. RenderTransformOrigin="0.5,0.5"
  60. Stretch="Fill" />
  61. <Rectangle
  62. x:Name="DayButtonFocusVisual"
  63. Grid.ColumnSpan="2"
  64. IsHitTestVisible="false"
  65. RadiusX="11"
  66. RadiusY="1"
  67. Stroke="#FF45D6FA"
  68. Visibility="Collapsed" />
  69. </Grid>
  70. </Grid>
  71. <ControlTemplate.Triggers>
  72. <Trigger Property="IsInactive" Value="True">
  73. <Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
  74. <Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
  75. </Trigger>
  76. <Trigger Property="IsBlackedOut" Value="true">
  77. <Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
  78. <Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
  79. </Trigger>
  80. <MultiTrigger>
  81. <MultiTrigger.Conditions>
  82. <Condition Property="IsInactive" Value="false"/>
  83. <Condition Property="IsSelected" Value="true"/>
  84. </MultiTrigger.Conditions>
  85. <MultiTrigger.Setters>
  86. <Setter Property="Visibility" Value="Visible" TargetName="SelectedBackground"/>
  87. </MultiTrigger.Setters>
  88. </MultiTrigger>
  89. <MultiTrigger>
  90. <MultiTrigger.Conditions>
  91. <Condition Property="IsInactive" Value="false"/>
  92. <Condition Property="IsBlackedOut" Value="false"/>
  93. <Condition Property="IsMouseOver" Value="true"/>
  94. </MultiTrigger.Conditions>
  95. <MultiTrigger.Setters>
  96. <Setter Property="Opacity" Value="0.5" TargetName="HighlightBackground"/>
  97. </MultiTrigger.Setters>
  98. </MultiTrigger>
  99. <MultiTrigger>
  100. <MultiTrigger.Conditions>
  101. <Condition Property="IsInactive" Value="false"/>
  102. <Condition Property="IsToday" Value="true"/>
  103. </MultiTrigger.Conditions>
  104. <MultiTrigger.Setters>
  105. <Setter Property="TextElement.Foreground" Value="#409eff" TargetName="NormalText"/>
  106. </MultiTrigger.Setters>
  107. </MultiTrigger>
  108. <MultiTrigger>
  109. <MultiTrigger.Conditions>
  110. <Condition Property="IsInactive" Value="false"/>
  111. <Condition Property="Visibility" Value="Visible" SourceName="StartStopBackground"/>
  112. </MultiTrigger.Conditions>
  113. <MultiTrigger.Setters>
  114. <Setter Property="TextElement.Foreground" Value="#ffffff" TargetName="NormalText"/>
  115. </MultiTrigger.Setters>
  116. </MultiTrigger>
  117. </ControlTemplate.Triggers>
  118. </ControlTemplate>
  119. </Setter.Value>
  120. </Setter>
  121. </Style>

样式中用到一个MultiBinding绑定CalendarDayButton以及前边提到的两个依赖属性:HoverStartHoverEnd,然后通过MultiValueConverter转换器比较CalendarDayButton是否处于选中的日期范围,根据不同的状态设置其背景样式和字体颜色。SelectedDatesConverter的实现如下:

  1. public class SelectedDatesConverter : IMultiValueConverter
  2. {
  3. public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
  4. {
  5. if (targetType.Name == "CornerRadius")
  6. {
  7. if (values.Length < 3) return new CornerRadius(0);
  8. if (values[0].Equals(values[1])) return new CornerRadius(13, 0, 0, 13);
  9. else if (values[0].Equals(values[2])) return new CornerRadius(0, 13, 13, 0);
  10. else return new CornerRadius(0);
  11. }
  12. else
  13. {
  14. if (values.Length < 3) return Visibility.Collapsed;
  15. if ((values[0].Equals(values[1]) || values[0].Equals(values[2])) && System.Convert.ToBoolean(values[3]) == false) return Visibility.Visible;
  16. else return Visibility.Collapsed;
  17. }
  18. }
  19. public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
  20. {
  21. throw new NotImplementedException();
  22. }
  23. }

最后就是在后台代码中根据日历的SelectedDatesChanged事件设置HoverStartHoverEnd的值,以此来控制DateTimePicker中选中日期的样式。

总结

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

原文链接:https://www.cnblogs.com/czwy/p/17641458.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号