Remove border around RadDocumentPane

[Heidi]

Hello,

Today I'm trying to style our implementation of the RadDocumentPane. In the attached image, you can see how it looks like.

I have managed to remove all unnecessary borders from the RadDocking. Now I'd like to have the RadDocumentPane appear without its gray borders. So you would only see the tabpanels next to the unpinned pane on the left, not the gray border around it.

I have tried to set properties of RadDocking, RadPaneGroup and RadDocumentPane, like BorderThickness=0, Background=Transparent, Padding=0 and Margin=0. All just lump hacks that need to be implemented more elegantly later on.

I have also tried to set
telerik:RadDocumentPane.DocumentHostTemplate="{StaticResource PaneTemplate}"
and made this PaneTemplate easy-peasy, just a ControlTemplate with a <ContentPresenter /> and it still gives me the borders.

I have replaced the content in it (the tabpanels) with just a simple TextBlock saying 'Hello World' but still, I get a border around it.

So, with all this, the gray 3x border with the 1px black line persists. Why?
Leaving the RadDocumentPane content-less shows no borders at all. When I place content in it, it suddenly appears with margin around it, this gray border and it's little black line.

I'd like to remove it, in XAML as I don't do anything programmaticaly.

Any help on this is welcome!

Heidi Ulrich

[Dani]

Hello Heidi,

You could easily remove or modify the DocumentPane borders by following these steps:
- generate the style for the RadPaneGroup of RadDocumentPane
- inside, find the ContentControl x:Name="ContentBackground" and edit its current template

The template of that ContentControl should look like this:

<ControlTemplate x:Key="PaneGroup_DocumentFrameTemplate" TargetType="ContentControl">
            <Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource PaneGroup_DocumentFrameL4_CornerRadius}">
                <Border x:Name="BorderLayer3" BorderBrush="{StaticResource PaneGroup_DocumentFrameL3_Brush}" BorderThickness="{StaticResource PaneGroup_DocumentFrameL3_Thickness}" CornerRadius="{StaticResource PaneGroup_DocumentFrameL3_CornerRadius}">
                    <Border x:Name="BorderLayer2" BorderBrush="{StaticResource PaneGroup_DocumentFrameL2_Brush}" BorderThickness="{StaticResource PaneGroup_DocumentFrameL2_Thickness}" CornerRadius="{StaticResource PaneGroup_DocumentFrameL2_CornerRadius}">
                        <Border x:Name="BorderLayer1" BorderBrush="{StaticResource PaneGroup_DocumentFrameL1_Brush}" BorderThickness="{StaticResource PaneGroup_DocumentFrameL1_Thickness}" CornerRadius="{StaticResource PaneGroup_DocumentFrameL1_CornerRadius}">
                            <ContentPresenter/>
                        </Border>
                    </Border>
                </Border>
            </Border>
        </ControlTemplate>

It basically consists of four Borders. You can play with the Opacity, set BorderThickness="0" or set th eBorderBrush to a different color to accomplish the effect you want. Also, attached is a quite a basic sample demonstrating the result of the described approach.

I hope this will give you a solution to your issue.

Regards,
Dani
the Telerik team

[Heidi]

Hello Dani,

Thank you for your help, I think we're getting in the right direction!

However, I could not completely understand where you were heading at.
I have generated a style for the RadPaneGroup that contains the RadDocumentPane.

Then, I should find the ContentControl... how do I do that?
I work with Visual Studio, not Blend. So what I've got is this:

<Style x:Key="Test" TargetType="telerik:RadPaneGroup">
</Style>

And then...
I have tried to add a Property = Template and have that Template Target at 'ContentControl'. But that is - as I assumed - a shot in the dark. I assume that there can (and will) be multiple contents inside the RadPaneGroup that inherit from ContentControl. I ran it and it doesn't give any change in the looks.

I started Blend for a split second and tried it there too, but no luck. I first had to rewire the references to the controls, but I think that's obvious. First, I cannot see the DocumentPane in my Object tree. In the Design view, I cannot select it; Blend only lets me select the parent around it. I put my cursor on it in code and yes, I got properties for it. I can see there's a style set for it... but then. My lacking knowledge of Blend may contribute to this :)

I'm getting somewhere, but at this point, stuck again. Could you help me some more?

[Dani]

Hello Heidi,

I prepared a quick movie for you to show you the steps used to produce the control template of the "ContentBackground" ContentControl. You do need to use Blend to generate the needed xaml. If you cannot use Blend for some reason, please copy and use the resources from the posted sample project.

I hope this will be helpful.

All the best,
Dani
the Telerik team

[Deepak Shakya]

Hi Dani,

Thanks for the video. I followed the steps you showed but I still get the Blue border around the Document panel. I am using Metro theme in Q1 2012 SP1 release built from source code. Also using Blend 5 Preview for Silverlight 5.

The difference is: when I go ahead to Edit the Template for "ContentBackground", it doesn't give me the option to edit the current template as shown in the video. The xaml show that it applied the style, and the style contains the Template. I tried to select the ContentBackground and Edit>Object>Edit Style. But there is no CurrentStyle active even though I can see that in XAML.

I went ahead and removed the BorderStyle for all three border layers but I still get the blue border in runtime.

Also: ContentElement under ContentBackground>Grid has a error remark saying:

ContentElement is not a ContentControl. Rightl-click and Click Make into Part.

Any help?

[Deepak Shakya]

Hi,
Since my last post, I have found few things:

1. I get an error in template if I create a copy of the template in ResourceDictionary. It is fine if I create a copy in the same document.
2. If I do not apply the Metro theme and follow the instructions in the video, it works fine and I do not see the border. But when I apply the theme, the border comes back.

[Deepak Shakya]

OK, finally I feel a bit silly discovering the issue. Looks like the blue border in DocumentHost is a feature of Metro theme, after having look at the demos for Docking. Please let me know is there is a way to get rid of the border even with the Metro theme applied.

Thanks for looking.

[Dani]

Hi Deepak,

You should modify the Metro theme for RadDocking rather than the default Office Black theme. Currently Expression Bland will generate only the default theme whenever you hit Edit Template. So in order to remove the active pane border from the DocumentHost in Metro, you need to include the resources for RadDocking Metro theme. You can obtain these from your local RadControls installation folder.

I have attached a sample demonstrating how to do this. Please, search for NOTE in the merged resource dictionary to check the visual element that carries the active pane border and hide it from the template.

Hope this will be helpful.

All the best,
Dani
the Telerik team

[Deepak Shakya]

Hi Dani,

Thanks for the solution. It makes sense now. 

[Bharat]

Thanks for the solution above.

Can you please let me know how is it possible to enable only the left border and hide all the other 3 borders ( top, right and bottom).

[Masha]

Hello Heidi,

To remove the border in RadPageGroupHost you need to change ControlTemplate with x:key= RadPaneGroupDocumentHostControlTemplate in RadDocking template.

Inside it find:

<Rectangle Stroke="{StaticResource BasicBrush}" StrokeThickness="1"  -->
               <Rectangle Stroke="{StaticResource AccentBrush}" StrokeThickness="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}" />

and replace it with:

<Border BorderThickness="1 0 0 0" BorderBrush="{StaticResource BasicBrush}" />
                <Border BorderThickness="1 0 0 0" BorderBrush="{StaticResource AccentBrush}" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}" />

I hope this will be helpful.

Greetings,
Maria
the Telerik team