Styling RadPane

[Rodney]

Hello,

I am trying to change the styling of RadPanes. I ultimately want to also change the shape of the tabs, but for now I am just trying to customize the colors of the tabs, text, and border of the pane.

I tried putting a RadDocking with a RadPaneGroup and two RadPanes in Blend. I can see the tabs, but when I click on the RadDocking item in the Objects and Timeline, I only see an option to edit a copy of the Template, not the Style. Using the Object > Edit Style menu only show the Create Empty option enabled.

I would appreciate any help as I won't have any hair left to pull out soon. Thanks.

[Masha]

Hello Rodney,

To customize the colors on the tabs,  text and border of RadPanes,  you will have to edit the style of the RadPane control. Select RadPane in Objects and Timeline, right-click it and choose from the menu Edit Template-> Edit A Copy. Then  Blend will generate all the necessary templates and resources and you can easily modify them. I've attached a project to this post with generated xaml for RadPanes.

You can read more about styling the RadPane here:
http://www.telerik.com/help/wpf/raddocking-styling-the-radpane.html

Hope this hepls.

Kind regards,
Maria
the Telerik team

[Rodney]

Thank you.

I was able to change the color of everything except for the border area around the content of the Pane.

Is this inheriting from elsewhere? The border looks like a basic raised white bevel about 5 or 6 pixels wide. I would really like to override.

I also just want to note that the linked information for styling RadPanes also describes editing a copy of the RadPane Style in Blend, which was the exact problem I was referring to (as only an option for editing the template copy is available). I just want to bring attention to it in case the documentation is out of date.

Thanks again.

[Rodney]

I've attached an image to show the border that I am having trouble restyling. Thanks.

[Masha]

Hello Rodney,

To customize the border area around the content of RadPane, you will have to edit the style of the RadPaneGroup.  Select RadPaneGroup in Objects and Timeline, right-click it and choose from the menu Edit Template-> Edit A Copy. Find the following:

<ControlTemplate TargetType="{x:Type ContentControl}">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0,2,2,2">
<Border x:Name="BorderLayer3" BorderBrush="Red" BorderThickness="2" CornerRadius="0,1,1,1">
<Border x:Name="BorderLayer2" BorderBrush="Red" BorderThickness="2" CornerRadius="0">
<Border x:Name="BorderLayer1" BorderBrush="#FF848484" BorderThickness="1" CornerRadius="0">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</Border>
</Border>
</Border>
                        </Border>
                    </ControlTemplate>

and modify border to the colour of your choice.

Regards,
Maria
the Telerik team

[Rodney]

Thank you.

[Spurk]

Hi Maria,

I'm struggling with applying a custom theme to the RadPane (nested in a RadPaneGroup and RadDocking control).  What I've discovered is that it seems that the RadPanes do not apply a style if they are outside the DocumentHost element.  As soon as I moved the RadSplitContainer in your example project out of document host and into the root of RadDocking, all of the styles failed to apply.  Is this normal behaviour?

[Masha]

Hello Sheldon,

RadPaneStyle has four different control templates depending on the position it occupies in the  RadDocikng control.

<Setter Property="LeftTemplate" Value="{StaticResource PaneTemplate}" />
<Setter Property="TopTemplate" Value="{StaticResource PaneTemplate}" />
<Setter Property="RightTemplate" Value="{StaticResource PaneTemplate}" />
<Setter Property="BottomTemplate" Value="{StaticResource PaneBottomTemplate}" />
<Setter Property="DocumentHostTemplate" Value="{StaticResource PaneDocumentHostTemplate}" />

To reflect changes everywhere you need to modify all the templates. The changes described in previous post was made only for DocumentHostTemplate.

Hope this helps.

Greetings,
Maria
the Telerik team

[Wade]

The documentation in the linked help file is either out of date or inaccurate. Nothing is displayed in the triggers panel in Blend when editing the template.

[Masha]

Hi Wade,

Thank you for your feedback. In the near future, we will update this article with the new documentation of styling RadDocking control.

Meanwhile, if you have any questions about styling RadPanes do not hesitate to contact us.

Greetings,
Maria
the Telerik team