Transparency of Dock

[Phillip Hamlyn]

Hi,

I'm using Q2 2009 SP1. I want to be able to set my RadDock background to Transparent so that the BackgroundImage of the host Form can show through it. I have used the sample code elsewhere in the thread to do this;

this.radDock1.MainDocumentContainer.BackColor = Color.Transparent;
            Telerik.WinControls.RadElement el = this.radDock1.MainDocumentContainer.RootElement.Children[0].Children[0];
            (el as Telerik.WinControls.Primitives.FillPrimitive).BackColor = this.BackColor;

but I have a couple of problems with this;
1) It picks up the BackColor of the Form but isn't truly transparent (the form's Background Image does not show through). I've tried placing a Picture box with the image on the Form, docked, and at the back of the Z Order, but again the Dock picks up the backcolour of the form, not the graphic immediately behind it.
2) I want to be able to set the individual DocumentWindow items in the RadDock so that they gradually "fade out" - the tabs being fully opaque and gradually fading to transparent until by the time they get to the bottom they are fully transparent. The reason for this is that the Dock and TabStrip is quite an "intrusive" control and seems (to me) to dominate the user interface once its been put there - I'd like to be able to make it blend into the background once the important bit (the actual tabs) are visible to the user.

Can you help ?

[Phillip Hamlyn]

Because "a picture is worth a thousand words" heres  a link to the effect I'm trying to achieve.

http://moblin.org/documentation/moblin-netbook-intro/how-get-around-moblin-netbook-ui

Note in this shot how the equivalent of the RadDock is transparent and shows the picture on the desktop. This describes the problem fully - I can set a BackgroundImage on the RadDock control, and by trial and error set many FillElements to Transparent and the picture shows through - but only at Design Time - at runtime I cannot seem to get the RadDock children to show the background image - they only show the RadDock background colour. I must be doing something wrong here.

I'll experiment a bit more, and post some images of my test app to further illustrate.

[Phillip Hamlyn]

Ok, I've narrowed the problem down to one thing - I think I need Teleriks' help on this.

I've created a form and placed a RadDock on it.
I've set the RadDock properties to Dock=Fill, Padding=10,10,10,10 and BackColor=Transparent and set a pretty picture as the RadDock.BackgroundImage. The padding area shows the background image showing through perfectly.

In the Properties Window I've set the RadDock DocumentContainer Backcolor to Transparent. This then lets the background image of the RadDock to show through.

However when I run this up at runtime, the background colours of the DocumentContainer overwrite the expected pretty picture, even though it correctly shows the picture from the background in the designer.

So to stop it doing this,  In the UI Element designer I've edited the UI elements of the RadDock.DocumentContainer and set

DocumentContainer.SplitPanelElement.ShouldPaint = false
DocumentContainer.SplitPanelElement.FillPrimitive.BackColor = Transparent
DocumentContainer.SplitPanelElement.FillPrimitive.FillStyle = Solid
DocumentContainer.SplitPanelElement.FillPrimitive.ShouldPaint = true (also tried false)

All of which show the expected (and very nice) result in the design window - but at runtime, the background image of the RadDock is not being allowed to show through.

I've even gone as far as editing the UI properties of the DocumentTabStrip and setting
DocumentTabStrip.RadTabStripElement.DockLayoutPanel.FillPrimitive.BackColor=222,232,246
DocumentTabStrip.RadTabStripElement.DockLayoutPanel.FillPrimitive.BackColor2=Transparent
DocumentTabStrip.RadTabStripElement.DockLayoutPanel.FillPrimitive.GradientStyle=Linear
DocumentTabStrip.RadTabStripElement.DockLayoutPanel.FillPrimitive.ShouldPaint=True

This gives an impressive fading out of the tabbed document so the background image slowly shows through. But again; it only works in the designer - at runtime the background image doesn't come through and the standard "blue theme" colour is displayed instead.

[Georgi]

Hi Phillip,

Thank you for your interesting question and detailed description of the problem and the steps you perform.

Here are several thoughts on your problem

- The best approach for achieving this is to create custom theme that sets the back color of RadDock (and all needed Control instances such as DocumentContainer, DocumentTabStrip, ToolTabStrip) to Transparent. The problem you are experiencing with seeing the result only at design time is because our theme support will explicitly set the back color to its value that comes from the theme (blue in this case). For more information about our theming mechanism you may refer to this help topic.

- The transparency in Windows Forms is simulated - meaning that to achieve the desired effect, a child's parent is asked to paint its portion, overlapped by child, on the child's graphics surface. That said, any transparency will lead to slower performance. The larger transparent areas you have, the slower you application will be.

- If you discard using custom themes then you should know that once you perform some docking operation - e.g. reorder tool or document windows - new ToolTabStrip/DocumentTabStrip instances are created dynamically and you should update their properties respectively in the TransactionCommitted event.

It will be of great help if you can send us a simple skeleton application that wraps the appearance you are trying to achieve.

Please, let me know whether this is of help.

All the best,
Georgi
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.

[Arun Kumar]

Hi,

I have the same problem. I am using telerik version Q2 2011 SP1. Any solution ?

[Alexander]

Hello Arun,

You can follow the approach, defined by Georgi and Phillip in this thread, to set a BackgroundImage to the RadDock control. You can update the theme you use, setting Transparent color to the control instances, used in RadDock - MainSplitContainer, InnerSplitContainer, and DocumentContainer. I have attached updated ControlDefault theme here.

Applying the updated theme, you can set the desired background image the BackgroundImage property of RadDock. The BackgroundImageLayout property allows you to customize the layout of the image.

I hope it helps you to achieve your requirements.

Kind regards,
Alexander
the Telerik team