删除RadCalendar of RadDatePicker内部的边框

Question

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

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

​

​

Answer 1

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

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

从你的截图中，我猜你在使用流利的主题。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>

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

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

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

<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}"/>

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

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

这是结果日历的屏幕截图。

​

​

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