RadPane header background

[Jonathan]

Hi,

I'm having some issues with setting the background color of my RadPanes' headers.

I've created four different data templates (I have four panes that each have a different icon in the header) like this:

<DataTemplate x:Key="ChecklistTitleTemplate">
    <Grid Background="#efa1b6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />
        <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />
    </Grid>
</DataTemplate>

 

I'm then applying the template like this:

<telerik:RadPane Header="Checklista" Content="..." TitleTemplate="{StaticResource ChecklistTitleTemplate}" telerik:RadDocking.SerializationTag="Checklist" ContextMenuTemplate="{x:Null}">

However the background isn't covering the entire pane header. See the attached screenshot to see what I mean.

Thanks,
Jonathan

<DataTemplate x:Key="ChecklistTitleTemplate">

    <Grid Background="#efa1b6">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />

        <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />

    </Grid>

</DataTemplate>

<DataTemplate x:Key="ChecklistTitleTemplate">

    <Grid Background="#efa1b6">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="../../icons/icon_checklist.png" Width="30" Height="30" />

        <ContentPresenter Grid.Column="1" Content="{Binding}" Margin="10,0,0,0" />

    </Grid>

</DataTemplate>

[Masha]

Hello Jonathan,

In order to achieve the desired approach you need to use PaneHeaderStyle of RadDocking control and modify its background property as you wish:

<Style TargetType="telerik:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}">
 ...
</Style>

I hope this helps.


Regards,
Masha
Telerik

 

 

[Jonathan]

Hi Masha,

What does the XAML look like when using a PaneHeader control? Since I have four panes, each with a different header background color, I unfortunately can't create one style targeting all PaneHeaders.

[Masha]

Hi Jonathan,

If you want to have differently colored PaneHeaders you need to use DataTemplate property exactly as you did. In that case you need to make a small modification inside the ControlTemplate of the PaneHeader style.

I've attached a sample project where the ControlTemplate is modified in Office_Black theme using implicit styling approach.

I hope it helps.

Regards,
Masha
Telerik

 

 

[Jonathan]

Thanks Masha, that's exactly what I needed. I never would have figured that out!