Remove border around RadDocumentPane

11 posts, 0 answers
  1. Heidi
    Heidi avatar
    6 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    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
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 27 May 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Heidi
    Heidi avatar
    6 posts
    Member since:
    Mar 2011

    Posted 27 May 2011 Link to this post

    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?
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 28 May 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Deepak Shakya
    Deepak Shakya avatar
    118 posts
    Member since:
    Aug 2007

    Posted 20 May 2012 Link to this post

    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?
  7. Deepak Shakya
    Deepak Shakya avatar
    118 posts
    Member since:
    Aug 2007

    Posted 21 May 2012 Link to this post

    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.

  8. Deepak Shakya
    Deepak Shakya avatar
    118 posts
    Member since:
    Aug 2007

    Posted 21 May 2012 Link to this post

    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.
  9. Dani
    Admin
    Dani avatar
    848 posts

    Posted 23 May 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  10. Deepak Shakya
    Deepak Shakya avatar
    118 posts
    Member since:
    Aug 2007

    Posted 24 May 2012 Link to this post

    Hi Dani,

    Thanks for the solution. It makes sense now. 
  11. Bharat
    Bharat avatar
    4 posts
    Member since:
    May 2012

    Posted 10 Aug 2012 Link to this post

    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).
  12. Masha
    Admin
    Masha avatar
    355 posts

    Posted 10 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner