删除 RadDatePicker 的 RadCalendar 内的边框

Question

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

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

Answer 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。