Styling the RadPane Header

[Pablo]

Hi all, 

We've been trying to stylish the rad pane header following the online documentation with no success. Could you please elaborate a bit more on how to do that, or even provide a sample where this is achieved (this would be great ;-) )? We're a bit of newbies in WPF complex tunning and any support is highly appreciated. 

We're using SL 4 and ExpressionBlend 4. 

Regards,

Pablo.

[Dani]

Hi Pablo,

In order to style the PaneHeader of RadPaneGroup, you need to generate and modify the style of the PaneHeader. You can gain access to that style and the ControlTemplate of the PaneHeader by editing the style of its containing element first - RadPaneGroupStyle.

I attach here an example. You can search for "NOTE" to find a few useful bits of information.

Hope this will be helpful.


All the best,
Dani
the Telerik team

[Pablo]

Hi Dani,

thanks for your help! We'll take a look at it and get back with any additional questions.

BR,

Pablo.

[Pablo]

Hello Dani,

Thanks for the sample. After inspecting it, we have two questions:

1. How to completely hide the RadPane Header? We are trying to build an environment with two panels docked on the left side of the layout that may be hidden/pinned (these two should show the header), and the rest of the space is used by only one RadPane. Becouse it will always be only one we'd like to hide its Pane Header if possible. 
2. How to remove the border of the radpane? We'd like remove the border completely (or hide it) if possible.
3. How to change the background color of the radpane header? I guess this is included in the sample, but if you could provide the shortcut on where to look at it would be great.

Thank you very much for your support. Regards,

Pablo.

[Dani]

Hi Pablo,

I have attached an updated version of the same project. Hope it will help.

1. The PaneHeader is now hidden for the DocumentHost (the RadPane in the middle). This is done by setting an additional DocumentPaneStyle to RadDocumentPane and hiding the content of the PaneDocumentHostTemplate. Furthermore, the header of the PaneGroupDocumentTemplate is also hidden.

2. The Border is removed in the PaneHeaderTemplate by setting BorderThickness of the main containing Border to 0.

3. The background of the PaneHeader can be easily chnaged in the PaneHeaderStyle1 by an ordinary Style Setter for the Background.

Let me know if you need a hand with further customizations.

All the best,
Dani
the Telerik team

[YK]

Hi,
I am using the RadDocumentPane int he RadPaneGroup container. By default I am hiding the Header by using the Visibility property provided Visibility="Collapsed". But my reqirement is to hide the Header by default and provide a button at the top left corner, which by clicking shows the Header. The reason I need to show the Header by using the click is I need to have access for undocking the pane and the reason for not showing the header is to conserve the space on the layout.
So basically here's my question
How can I show and hide the header of the raddocumentpane depending on the button click (would liek to know if there another way of achieving this say by using radpane etc.)
Any pointers would be really appreciated
Thanks
YK

[Dani]

Hi,

You can easily implement such a functionality by adding a CheckBox or a ToggleButton in the template of RadPaneGroup. Data-bind the visibility of the header to the IsChecked property of the added element.

Consider the following implementation:

<ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{StaticResource PaneGroup_PaneFrameStyle}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0" Visibility="{Binding IsChecked, ElementName=test, Mode=TwoWay, Converter={StaticResource BoolToVisConverter}}">
                            <Border Grid.Row="0" Visibility="{Binding SelectedItem.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                                <telerik:PaneHeader x:Name="HeaderElement" MinHeight="16" Grid.Row="0" SelectedPane="{TemplateBinding SelectedPane}"
                                telerik:StyleManager.Theme="{StaticResource Theme}" Margin="22 0 0 0"/>
                            </Border>
                        </Border>

                        <CheckBox x:Name="test" HorizontalAlignment="Left" VerticalAlignment="Center" IsChecked="True" />

                        <Grid Grid.Row="1">
                            <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Visibility="{Binding IsContentPreserved, Converter={StaticResource InvertBoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Grid x:Name="ContentElementsPanel" Visibility="{Binding IsContentPreserved, Converter={StaticResource BoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Grid>
                    </Grid>
                </ContentControl>

Hope this helps.

Kind regards,
Dani
the Telerik team

[Wade]

If I'm just changing the background color of the pane header, can I get by with just

<ControlTemplate x:Key="PaneHeaderTemplate" TargetType="telerik:PaneHeader" /><br>
<br>
    <Style x:Key="PaneHeaderStyle" TargetType="telerik:PaneHeader"><br>
        <Setter Property="Template" Value="{StaticResource PaneHeaderTemplate}"/><br>
        <Setter Property="Background" Value="Yellow"/><br>
    </Style>

Or do I have to have all that other gobbledygook that comes with the default template?

Thanks

Wade

[Masha]

Hi Pablo,

I prepared an illustrative sample of how you can customize the Style of RadPaneHeaders. You should modify background property of PaneHeaderStyle. I hope this will help with the styling issues you are experiencing.

Kind regards,
Maria
the Telerik team

[Barry]

In less I'm missing something, this doesn't change the style of the pane header when it is floating or auto-hidden. How do you do that? I want the style to stay the same no matter where it is or what it is doing...

[Masha]

Hello Barry,

The background of the PaneHeader can be easily changed in the PaneHeaderStyle by an ordinary Style Setter for the Background. This will affect and background color even if the pane is auto hidden. Keep in mind you need to modify the control template if you want to change the background color of PaneHeader in its focus state. For floating windows you need to modify the background property of ToolWindowStyle.

If you have any further questions, do not hesitate to contact us again.

Regards,
Masha
Telerik

[Barry]

Masha,

No matter what I do to the style, it does not affect the auto hidden pane. The one that isn't pinned is always the same default style. What am I doing wrong?

 I don't care about floating panes...

[Masha]

Hello Barry,

It is hard to say what causing the problem only from the screenshot. Could I ask you to send a support ticket and  attach the sample project there as well. This will be of great help for us for pinpointing the problem.

I am glad to assist you further.

Regards,
Masha
Telerik

[koen]

I'm struggling with the same issue. I can not get to the style of the auto hidden pane. Do you have a solution for the problem?

Kind regards,

Koen Meijer

EDIT: I found the solution: The RadPaneHeader has to be styled implicity. When I changed 

<Style x:Key="PaneHeaderStyle1" TargetType="telerik:PaneHeader">
to 
<Style TargetType="telerik:PaneHeader">

the auto hidden pane is also styled.