Changing color of the docking pane

[Krithika S]

Hi,

I am using the trail version of the docking control of telerik to understand about the control.
We were using the grid splitter control to achieve the pane position handling. But we were impressed with the look of the docking control given by telerik and wanted to use that instead.
Find the attached ExpectedLook.jpg on the look we got with the grid splitter control.

We are not able to modify the color of the panes in the telerik control like the attached image. Also i want to know if we can have additional tabs in the main document pane.

Please provide your suggestions as soon as you can.

Thanks,
Krithika

[Krithika S]

Hi Telerik team,

We are currently evaluating various controls for docking and we really liked the control of telerik because of its flexibility.
If you could respond to this post faster it would help us in making our final decisions on the controls.

Thanks,
Krithika

[Pana]

Hello Krithika,

Most of the styling can be done in XAML by creating custom templates and styles. I have attached an example what can be done in few hours work. Of course it's just an example and it's far from implementation of your design. The attached project was designed in Blend. Although some of the Docking's elements (like the pane headers) are hard to edit in blend we distribute the full xaml templates with our release packages. Also if you are about to buy our controls you will get a lot of help and support from the telerik's team.

Thank you for your interest in our controls.

Greetings,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Krithika S]

Hi Team,

Thanks for the solution.
I could change the background colour of the docking pane using custom styles but not the header text and the pinning's control's colors.
Is that possible to change?
Find here the screenshot of my solution attached.

It would be great if you could tell me how to style a docking pane.

Thanks,
Krithika

[Krithika S]

Hi Team,

Please respond to my post as it would help us in completing our evaluation.
We'll be making our purchase decisions by Jan mid.

Thanks,
Krithika

[Pana]

Hi Krithika,

The Pane header has some problems that invalidates the XAML in Blend. We have investigated that issue and have plans to fix it for the upcoming Q1. This doesn't mean you can't style the header though. I'm attaching a project that have all the XAML for the RadDocking for Office_Black theme. You can copy the header's template and use it in your project. You can find it as:

<ControlTemplate x:Key="PaneHeaderTemplate" TargetType="dock:PaneHeader">

In the Docking.xaml file. I have changed it's color to red to see that it really is editable. The change is marked by a comment starting with 'NOTE:'

As for the styling the RadPane has template that renders Tab button. The Content and Header of the RadPane is actually displayed by the RadPaneGroup. The RadPaneGroup contains PaneHeader control that you have to edit. And you can get the template for it from the attached project.

I hope this solution works for you.

Best wishes,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Krithika S]

Hi,

I was able to change the background color of the pane using the pane group template. But I am not able to change the foreground text color ((i.e) The color of the 'Header' text).
Could you please tell me if its possible and how it can be achieved?

Thanks,
Krithika

[Pana]

Hi Krithika,

Search for the "<!-- NOTE: Here you can get the pane header's template -->" comments in the last attached project's Docking.xaml file. This is where the Header template is. Scroll down a little to the "<!-- Header -->" comment and put Foreground="White" there on the ContentControl with x:Name="TitleElement". The Foreground of the PaneGroup does not control the foreground of the header so you will have to modify the header template and use it in your project. If you fail to do so you can send us your project attached in a new ticket so we can do that change for you.

Greetings,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Krithika S]

Thanks for your input. It worked.
We purchased your telerik controls and it works really well.

Have few queries.
1. Currently the splitter between the docking panes is not visible. One has to drag his mouse and find out where the splitter is (based on the mouse cursor icon change) and then move it up or down. Can we make it visible?
2. How to change the color of the document pane?

Thanks,
Krithika

[Pana]

Hi Krithika,

I'm reattaching the same project. I've added some visual elements on the resizers. The place where the changes are is marked with:

<!-- NOTE: Splitter Template. Here are the red dots. -->

The color of the document pane can be changed by setting Background on RadPaneGroup but the background would be lost if you drag the pane. You can also set background in the RadPaneGroup's style in the Docking.xaml to affect all RadPaneGroups which will remain everywhere. These changes are marked with:

<!-- NOTE: Setting background on the RadPaneGroup helps a little but will fail if you drag a pane around -->

<!-- NOTE: You can change the background to all pane groups from here -->

I hope this helps.

Greetings,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Krithika S]

Hi,

Thanks for your reply.
But i was not able to set the background color of the document pane.

I am using the RadTreeView control. Have one question on that.
1. I am adding some child items dynamically and hence want to set the style for these items also dynamically. I am using
   

 

RadTreeViewItem tvItem = new RadTreeViewItem();

 

tvItem.Style =

this.Resources["RadTreeViewItemStyle1"] as System.Windows.Style;

 

But it doesnt work. Can you tell me why? This statement works with normal tree view control.

Thanks,
Krithika

[Pana]

Hi Krithika S,

Setting StyleManager.Theme to a controls actually searches for it's style from a bunch of ResourceDictionaries and apply it to the control so using telerik theme and a style is not possible. Only one of them would work so that may be the problem for a control to fail. Your style may fail if you set theme after that.

For that reason you may use the StyleManage.BasedOn="<your_theme>" in your styles so they can actually "extend" the one defined in the theme and workaround that problem but be very careful with it.

I'm not sure that this is the problem in your solution though. More information would come handy. I'm sorry that the attached project haven't helped you but I believe the background there is set correctly.

Best wishes,
Panayot
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.