This is a migrated thread and some comments may be shown as answers.

Styling RadPane

9 Answers 492 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Rodney
Top achievements
Rank 1
Rodney asked on 07 Jul 2012, 08:09 PM
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.

9 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 09 Jul 2012, 12:25 PM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Rodney
Top achievements
Rank 1
answered on 09 Jul 2012, 06:25 PM
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.
0
Rodney
Top achievements
Rank 1
answered on 09 Jul 2012, 10:13 PM
I've attached an image to show the border that I am having trouble restyling. Thanks.
0
Masha
Telerik team
answered on 10 Jul 2012, 08:15 AM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Rodney
Top achievements
Rank 1
answered on 10 Jul 2012, 04:20 PM
Thank you.
0
Spurk
Top achievements
Rank 1
answered on 10 Oct 2012, 06:54 PM
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?
0
Masha
Telerik team
answered on 17 Oct 2012, 06:25 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Wade
Top achievements
Rank 1
answered on 24 Jan 2013, 05:05 PM
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.
0
Masha
Telerik team
answered on 29 Jan 2013, 08:52 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Docking
Asked by
Rodney
Top achievements
Rank 1
Answers by
Masha
Telerik team
Rodney
Top achievements
Rank 1
Spurk
Top achievements
Rank 1
Wade
Top achievements
Rank 1
Share this question
or