[Solved] How to change control template?

[Pavel]

Hi!

I would like to remove header and border from RadDatePicker. How it can be done?
And also change the popup background (I use inline display type) to transparent. 

Thank you!

[Ivaylo Gergov]

Hi Pavel,

You can change the header of the selector popup through the RadDatePicker.SelectorHeader property. Also, to change its background and border, you can use the RadDatePicker.SelectorBackgroundStyle property. Here's an example: 

<telerikInput:RadDatePicker DisplayMode="Inline" SelectorHeader="">
    <telerikInput:RadDatePicker.SelectorBackgroundStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
    </telerikInput:RadDatePicker.SelectorBackgroundStyle>
</telerikInput:RadDatePicker>

I hope this helps.


Regards,
Ivaylo Gergov
Telerik

 

 

[Pavel]

Thank you! But what about control template?

[Rosy Topchiyska]

Hello Pavel,

I have attached a project where I have included all styles used by the RadDatePicker control so that you can edit them as per your needs.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Pavel]

Thank you! One additional question. 

Is there a way to put this code into the style? I tried few Targets without any success.

<Input:RadTimePicker.Resources>
<Style TargetType="telerikDTP:DateTimePickerButton">
<Setter Property="FontSize" Value="18"/>
</Style>
</Input:RadTimePicker.Resources>

[Rosy Topchiyska]

Hi Pavel,

The DateTimePickerButton Style could be edited either in the Resources of the RadDatePicker control (like in the snippet you have sent us), or directly in the ControlTemplate in the Style of the RadDatePicker control:

<Style TargetType="telerik:RadDatePicker" BasedOn="{StaticResource BaseDateTimePickerStyle}"
       x:Key="RadDatePickerControlTemplate1">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadDatePicker">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentControl Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding HeaderStyle}" IsTabStop="False" Visibility="{Binding DisplayMode, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DisplayModeConverter}}"/>
                    <telerikDTP:DateTimePickerButton FontSize="18" x:Name="PART_PickerButton" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="{Binding DisplayMode, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DisplayModeConverter}}"/>
                    <Popup x:Name="PART_Popup" IsOpen="{TemplateBinding IsOpen}" IsLightDismissEnabled="True">
                        <Border x:Name="PART_SelectorLayoutRoot" Style="{TemplateBinding SelectorBackgroundStyle}">
                            <Grid>
                                <Grid.RowDefinitions>

 If this is not what you wish to accomplish could you please elaborate a bit more on your scenario?

I look forward to your reply.

Regards,
Rosy Topchiyska
Telerik