删除 RadDatePicker 的 RadCalendar 内的边框

Posted 2023-02-22

技术标签:

【中文标题】删除 RadDatePicker 的 RadCalendar 内的边框【英文标题】：Remove borders inside RadCalendar of RadDatePicker 【发布时间】：2020-10-21 13:31:14 【问题描述】：

如何在 WPF 中删除 RadDatePicker 内的边框？

我的意思是RadCalendar内部的这些灰色垂直和水平线。

【问题讨论】：

【参考方案1】：

为了改变控件的视觉外观，你必须改变它们的默认样式或控件模板。如果你已经为 WPF 安装了 Telerik UI，你可以在这里找到控件的默认样式：

C:\Program Files (x86)\Progress\<Your Telerik Version Folder>\Themes.Implicit\WPF40

从您的屏幕截图中，我猜您正在使用 Fluent 主题。 RadDatePicker 的资源可以在\Fluent\Themes\Telerik.Windows.Controls.Input.xaml 中找到。

您在屏幕截图中描述的边框实际上是日历控件的背景。它似乎只是一个边框，因为日历中的按钮有一个边距，使背景可见。

如下所示，LayoutRoot Grid 在CalendarButton 的控件模板中定义了一个边距。

<ControlTemplate TargetType="calendar:CalendarButton">
   <Grid x:Name="LayoutRoot" Background="Transparent" Margin="StaticResource CalendarButtonMargin">
   <!-- ...other template code. -->
</ControlTemplate>

为了去除边距，复制CalendarButtonStyle样式并去除其中的Margin。

<Style x:Key="MyCalendarButtonStyle" TargetType="calendar:CalendarButton">
   <Setter Property="materialControls:MaterialAssist.CornerRadius" Value="0"/>
   <Setter Property="materialControls:MaterialAssist.MouseOverBrush" Value="telerik:FluentResource ResourceKey=MouseOverBrush"/>
   <Setter Property="materialControls:MaterialAssist.PressedBrush" Value="telerik:FluentResource ResourceKey=PressedBrush"/>
   <Setter Property="materialControls:MaterialAssist.FocusBrush" Value="telerik:FluentResource ResourceKey=AccentFocusedBrush"/>
   <Setter Property="materialControls:MaterialAssist.CheckedBrush" Value="telerik:FluentResource ResourceKey=AccentBrush"/>
   <Setter Property="FontFamily" Value="telerik:FluentResource ResourceKey=FontFamily"/>
   <Setter Property="FontSize" Value="telerik:FluentResource ResourceKey=FontSize"/>
   <Setter Property="Foreground" Value="telerik:FluentResource ResourceKey=MarkerBrush"/>
   <Setter Property="Background" Value="telerik:FluentResource ResourceKey=PrimaryBackgroundBrush"/>
   <Setter Property="BorderBrush" Value="telerik:FluentResource ResourceKey=PrimaryBackgroundBrush"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="MinWidth" Value="38"/>
   <Setter Property="MinHeight" Value="38"/>
   <Setter Property="FontWeight" Value="Normal"/>
   <Setter Property="FocusVisualStyle" Value="x:Null"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="calendar:CalendarButton">
            <Grid x:Name="LayoutRoot" Background="Transparent" Margin="0">
               <Border x:Name="BorderVisual"
                                Background="TemplateBinding Background"
                                BorderThickness="TemplateBinding BorderThickness"
                                BorderBrush="TemplateBinding BorderBrush"
                                CornerRadius="TemplateBinding materialControls:MaterialAssist.CornerRadius"/>
               <materialControls:FluentControl x:Name="Fluent" BorderThickness="TemplateBinding BorderThickness" CornerRadius="TemplateBinding materialControls:MaterialAssist.CornerRadius" IsSmartClipped="True">
                  <ContentControl x:Name="Content"
                                    Margin="TemplateBinding Padding"
                                    Foreground="TemplateBinding Foreground"
                                    ContentTemplate="TemplateBinding ContentTemplate"
                                    FontFamily="TemplateBinding FontFamily"
                                    FontSize="TemplateBinding FontSize"
                                    ContentTemplateSelector="TemplateBinding ContentTemplateSelector"
                                    ContentStringFormat="TemplateBinding ContentStringFormat"
                                    HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
                                    IsTabStop="False"
                                    VerticalAlignment="TemplateBinding VerticalContentAlignment"
                                    Content="TemplateBinding Content"/>
               </materialControls:FluentControl>
               <Border x:Name="FocusVisual"
                                Background="x:Null"
                                Visibility="Collapsed"
                                IsHitTestVisible="False"
                                BorderThickness="telerik:FluentResource ResourceKey=FocusThickness"
                                BorderBrush="TemplateBinding materialControls:MaterialAssist.FocusBrush"
                                CornerRadius="TemplateBinding materialControls:MaterialAssist.CornerRadius"/>
               <Border x:Name="SelectedVisual"
                                Background="x:Null"
                                Visibility="Collapsed"
                                IsHitTestVisible="False"
                                BorderThickness="telerik:FluentResource ResourceKey=FocusThickness"
                                BorderBrush="telerik:FluentResource ResourceKey=IconBrush"
                                CornerRadius="TemplateBinding materialControls:MaterialAssist.CornerRadius"/>
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="IsFromCurrentView" Value="False">
                  <Setter TargetName="BorderVisual" Property="Background" Value="telerik:FluentResource ResourceKey=AlternativeBrush"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="telerik:FluentResource ResourceKey=AlternativeBrush"/>
               </Trigger>
               <Trigger Property="IsKeyboardFocusWithin" Value="True">
                  <Setter TargetName="FocusVisual" Property="Visibility" Value="Visible"/>
               </Trigger>
               <Trigger Property="ButtonType" Value="TodayDate">
                  <Setter TargetName="BorderVisual" Property="Background" Value="telerik:FluentResource ResourceKey=AccentMouseOverBrush"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="telerik:FluentResource ResourceKey=AccentMouseOverBrush"/>
                  <Setter Property="materialControls:MaterialAssist.CheckedBrush" Value="telerik:FluentResource ResourceKey=AccentPressedBrush"/>
                  <Setter Property="materialControls:MaterialAssist.MouseOverBrush" Value="telerik:FluentResource ResourceKey=AccentMouseOverBrush"/>
                  <Setter Property="Foreground" Value="telerik:FluentResource ResourceKey=MarkerInvertedBrush"/>
               </Trigger>
               <Trigger Property="IsMouseOver" Value="True">
                  <Setter TargetName="BorderVisual" Property="Background" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.MouseOverBrush), Mode=OneWay"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.MouseOverBrush), Mode=OneWay"/>
               </Trigger>
               <Trigger Property="IsPressed" SourceName="Fluent" Value="True">
                  <Setter TargetName="BorderVisual" Property="Background" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.PressedBrush), Mode=OneWay"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.PressedBrush), Mode=OneWay"/>
               </Trigger>
               <Trigger Property="IsEnabled" Value="False">
                  <Setter TargetName="Content" Property="Opacity" Value="telerik:FluentResource ResourceKey=DisabledOpacity"/>
               </Trigger>
               <Trigger Property="IsSelected" Value="True">
                  <Setter Property="Foreground" Value="telerik:FluentResource ResourceKey=MarkerInvertedBrush"/>
                  <Setter TargetName="FocusVisual" Property="Visibility" Value="Collapsed"/>
                  <Setter TargetName="BorderVisual" Property="Background" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.CheckedBrush), Mode=OneWay"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=(materialControls:MaterialAssist.CheckedBrush), Mode=OneWay"/>
               </Trigger>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="IsSelected" Value="True"/>
                     <Condition Property="ButtonType" Value="TodayDate"/>
                  </MultiTrigger.Conditions>
                  <Setter TargetName="FocusVisual" Property="Visibility" Value="Visible"/>
               </MultiTrigger>
               <Trigger Property="ButtonType" Value="WeekNumber">
                  <Setter TargetName="Fluent" Property="IsEnabled" Value="False"/>
                  <Setter TargetName="BorderVisual" Property="Background" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=Background, Mode=OneWay"/>
                  <Setter TargetName="BorderVisual" Property="BorderBrush" Value="Binding RelativeSource=RelativeSource TemplatedParent, Path=Background, Mode=OneWay"/>
                  <Setter Property="Foreground" Value="telerik:FluentResource ResourceKey=AccentBrush"/>
               </Trigger>
               <Trigger Property="ButtonType" Value="WeekName">
                  <Setter TargetName="Fluent" Property="IsEnabled" Value="False"/>
                  <Setter TargetName="Content" Property="Foreground" Value="telerik:FluentResource ResourceKey=MarkerBrush"/>
                  <Setter TargetName="Content" Property="FontWeight" Value="SemiBold"/>
                  <Setter TargetName="LayoutRoot" Property="Margin" Value="0"/>
                  <Setter TargetName="BorderVisual" Property="Visibility" Value="Collapsed"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

然后创建一个使用CalendarButton 样式的RadCalendar 样式。

<Style x:Key="MyCalendarStyle" TargetType="telerik:RadCalendar" BasedOn="StaticResource x:Type telerik:RadCalendar">
   <Setter Property="DayButtonStyle" Value="StaticResource MyCalendarButtonStyle"/>
   <Setter Property="MonthButtonStyle" Value="StaticResource MyCalendarButtonStyle"/>
   <Setter Property="YearButtonStyle" Value="StaticResource MyCalendarButtonStyle"/>
   <Setter Property="DecadeButtonStyle" Value="StaticResource MyCalendarButtonStyle"/>
</Style>

然后创建一个使用RadCalendar 样式的RadDatePicker 样式。

<Style x:Key="MyDatePickerStyle" TargetType="x:Type telerik:RadDatePicker" BasedOn="StaticResource x:Type telerik:RadDatePicker">
   <Setter Property="CalendarStyle" Value="StaticResource MyCalendarStyle"/>
</Style>

现在您可以将这种样式应用到任何日期选择器上。

<telerik:RadDatePicker Style="StaticResource MyDatePickerStyle"/>

如果您希望将此样式应用于范围内的所有RadDatePickers，您可以添加一个隐式样式。

<Style TargetType="x:Type telerik:RadDatePicker" BasedOn="StaticResource MyDatePickerStyle"/>

这是生成的日历的屏幕截图。

有关RadDatePicker 样式的更多信息，您可以参考documentation。

【讨论】：

谢谢！这就是解决方案！ :D

以上是关于删除 RadDatePicker 的 RadCalendar 内的边框的主要内容，如果未能解决你的问题，请参考以下文章

无法从 Javascript 检索 RadDatePicker 对象

向 RadDatePicker 添加自定义属性

如何使用数据库检索日期设置 raddatepicker 日期

验证 RadDatePicker (Telerik Controls) 的日历控制

Telerik 中的日期格式问题：RadDatePicker

我们如何在 Radwindow 弹出窗口中打开 raddatepicker 弹出窗口