Remove borders inside RadCalendar of RadDatePicker

Question

How can I remove the borders inside RadDatePicker in WPF?

I mean these grey vertical and horizontal lines inside RadCalendar.

Answer 1

In order to change the visual appearance of controls, you have to change their default style or control templates. If you have installed Telerik UI for WPF you can find the default styles for controls here:

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

From your screenshot I guess that you are using the Fluent theme. The resources for the RadDatePicker can be found in \Fluent\Themes\Telerik.Windows.Controls.Input.xaml.

What you describe in your screenshot as a border is actually the background of the calendar control. It only appears to be a border, because the buttons within the calendar have a margin that makes the background visible.

As you can see below, the LayoutRoot Grid defines a margin in the control template of CalendarButton.

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

In order to remove the margin, copy the CalendarButtonStyle style and remove the Margin in it.

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

Then create a style a RadCalendar style that uses this CalendarButton style.

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

Then create a RadDatePicker style that uses this RadCalendar style.

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

Now you can apply this style to any date picker like this.

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

If you want this style to be applied to all RadDatePickers in scope, you can add an implicit style.

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

This is a screenshot of the resulting calendar.

For more information on styling the RadDatePicker, you can refer to the documentation.