DocumentHost border

[MW]

Hi

Is there any way to turn off this border for the 'DocumentHost' element?  The 3d thick border doesn't fit with the rest of my application.

Thanks

[MW]

Alternatively, do I have to have a DocumentHost section?

Could I split the page in half and have a 'RadSplitContainer' docked left and another docked right?  If you try this there is always the 'grey bit on the middle'.

Thanks

[Miroslav Nedyalkov]

Hi Mark,

The border you mentioned is owned by the PaneGroup control. When a group is displayed in the DocumentHost area, it changes its template. The control template that is applied is called DocumentHostTemplate. The following code demonstrates how to remove the border for a single group. If you need remove the borders of all the PaneGroups you have in your Docking control you could do the same with a custom theme for the Docking control. Here is the code:

<radDock:RadDocking>
    <radDock:RadDocking.DocumentHost>

        <radDock:RadSplitContainer x:Name="DocumentSplitPanel">
            <radDock:RadPaneGroup x:Name="DocumentPane" AllowDragReorder="False">
                <radDock:RadPaneGroup.Resources>
                    <!--<SolidColorBrush x:Key="TabControlBackground" Color="#F8F8F8" />-->
                    <SolidColorBrush x:Key="PaneGroupDocumentDarkerBorder" Color="#a0a0a0" />
                    <SolidColorBrush x:Key="PaneGroupDocumentHighlight" Color="#FFFFFF" />
                    <SolidColorBrush x:Key="PaneGroupDocumentColor" Color="#d5d9de" />
                    <SolidColorBrush x:Key="PaneGroupDocumentHeaderbackground"
                            Color="#f0f0f0" />
                </radDock:RadPaneGroup.Resources>
                <radDock:RadPaneGroup.DocumentHostTemplate>
                    <ControlTemplate TargetType="radDock:RadPaneGroup">
                        <Grid>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Disabled" />
                                    <vsm:VisualState x:Name="Normal" />
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="ResizerStates">
                                    <vsm:VisualState x:Name="ResizerLeft">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="Visibility"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="Width"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="4" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="border"
                                                    Storyboard.TargetProperty="Margin"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="4 0 0 0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="ItemsPresenterElement"
                                                    Storyboard.TargetProperty="Margin"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="6 0 0 0" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="ResizerTop">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="Visibility"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="VerticalAlignment"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="Top" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="HorizontalAlignment"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="Stretch" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="Placement"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <telerik:Dock>Top</telerik:Dock>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="Height"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="4" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="(Grid.RowSpan)"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="DockResizer"
                                                    Storyboard.TargetProperty="(Grid.Row)"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="ItemsPresenterElement"
                                                    Storyboard.TargetProperty="Margin"
                                                    Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                        Value="2 4 0 0" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="HideResizer" />
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <Rectangle
                                    Fill="{StaticResource PaneGroupDocumentHeaderbackground}"
                                    Visibility="{TemplateBinding BackgroundVisibility}"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch" />

                            <!--TabStrip-->
                            <ItemsPresenter Margin="2 0 0 0" x:Name="ItemsPresenterElement"
                                    Grid.Row="0" />

                            <!--Content-->

                            <!--<Border x:Name="border" BorderThickness="1"
                                    BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}"
                                    CornerRadius="3" Grid.Row="1">
                                <Border BorderThickness="1"
                                        BorderBrush="{StaticResource PaneGroupDocumentHighlight}"
                                        CornerRadius="2"
                                        Background="{StaticResource PaneGroupDocumentColor}">
                                    <Border
                                            BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}"
                                            Margin="2" Padding="{TemplateBinding Padding}"
                                            BorderThickness="1"
                                            Background="{TemplateBinding Background}">
                                        <ContentPresenter x:Name="ContentElement"
                                                Content="{TemplateBinding SelectedContent}"
                                                ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                                    </Border>
                                </Border>
                            </Border>-->

                            <ContentPresenter x:Name="ContentElement" Grid.Row="1"
                                    Content="{TemplateBinding SelectedContent}"
                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}" />

                            <docking:RadGridResizer x:Name="DockResizer" Placement="Left"
                                    ShowsPreview="True" Visibility="Collapsed"
                                    VerticalAlignment="Stretch" HorizontalAlignment="Left"
                                    Grid.RowSpan="2" />

                        </Grid>
                    </ControlTemplate>
                </radDock:RadPaneGroup.DocumentHostTemplate>
                <radDock:RadDocumentPane Header="ASDF">
                    <Button Content="TEST" />
                </radDock:RadDocumentPane>
            </radDock:RadPaneGroup>
        </radDock:RadSplitContainer>
    </radDock:RadDocking.DocumentHost>
</radDock:RadDocking>

About the second question - you can remove the DocumentHost area. What happens when you remove the DocumentHost is the last SplitContainer added fills the whole space. To remove the DocumentHost area you need to change the control template of the Docking control. Here is an example how to do that:

<radDock:RadDocking x:Name="DockingScreen" Grid.Row="0">
    <radDock:RadDocking.Template>
        <ControlTemplate TargetType="radDock:RadDocking">
            <Grid x:Name="LayoutRoot">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <telerik:RadDockPanel x:Name="RootDockPanel">
                        <!--TODO Add margin to compensate for not overlapping the other auto-hide areas (everywhere)-->
                        <docking:AutoHideArea x:Name="LeftAutoHide"
                                telerik:RadDockPanel.Dock="Left" TabStripPlacement="Left"
                                TabOrientation="Vertical" />
                        <docking:AutoHideArea x:Name="RightAutoHide"
                                telerik:RadDockPanel.Dock="Right" TabStripPlacement="Right"
                                TabOrientation="Vertical" />
                        <docking:AutoHideArea x:Name="TopAutoHide"
                                telerik:RadDockPanel.Dock="Top" TabStripPlacement="Top" />
                        <docking:AutoHideArea telerik:RadDockPanel.Dock="Bottom"
                                TabStripPlacement="Bottom" x:Name="BottomAutoHide" />
                        <radDock:DockingPanel x:Name="ContentDockPanel">
                            <!--Panes comes here.-->
                            <!--<docking:DocumentHost x:Name="DocumentHost" />-->
                        </radDock:DockingPanel>
                    </telerik:RadDockPanel>
                </Border>
                <!--<Popup IsOpen="True">-->
                <Canvas x:Name="PopupPanel">
                    <docking:VisualCue x:Name="PART_DragCue" Canvas.ZIndex="999997"
                            Style="{TemplateBinding VisualCueStyle}">
                        <docking:VisualCue.RenderTransform>
                            <TranslateTransform />
                        </docking:VisualCue.RenderTransform>
                    </docking:VisualCue>
                    <docking:RootCompass x:Name="PART_RootCompass"
                            RenderTransformOrigin="0.5, 0.5"
                            Style="{TemplateBinding RootCompassStyle}"
                            Visibility="Collapsed" Canvas.ZIndex="999998">
                        <docking:RootCompass.RenderTransform>
                            <TranslateTransform />
                        </docking:RootCompass.RenderTransform>
                    </docking:RootCompass>
                    <docking:Compass x:Name="PART_Compass" RenderTransformOrigin="0.5, 0.5"
                            Style="{TemplateBinding CompassStyle}" Visibility="Collapsed"
                            Canvas.ZIndex="999999">
                        <docking:Compass.RenderTransform>
                            <TranslateTransform />
                        </docking:Compass.RenderTransform>
                    </docking:Compass>
                </Canvas>
                <!--</Popup>-->
            </Grid>
        </ControlTemplate>
    </radDock:RadDocking.Template>
        <radDock:RadSplitContainer>
        <radDock:RadPaneGroup>
            <radDock:RadPane Header="pane1">
                <Button Content="Pane1" />
            </radDock:RadPane>
        </radDock:RadPaneGroup>
        <radDock:RadPaneGroup>
            <radDock:RadPane Header="pane2">
                <Button Content="Pane2" />
            </radDock:RadPane>
        </radDock:RadPaneGroup>
        <radDock:RadPaneGroup>
            <radDock:RadPane Header="pane3">
                <Button Content="Pane3" />
            </radDock:RadPane>
        </radDock:RadPaneGroup>
    </radDock:RadSplitContainer>
</radDock:RadDocking>

Hope this helps.

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[MW]

Thanks for your response

Unfortunately neither of the suggestions actually work, or have further issues.

The first one, removing the border, corrupts all the background colours etc or the content of the pane.  I could probably get round this by changing all the properties of each item in the pane if I really have to.

The second example just blows up becuase its still looking for a document host.  I have split my page into two panes, RadSplit docked left and RadSplit docked right.  There is now a double width splitter - if you resize using the left side it works as expected, but try and resize using the area towards the right it just blows up.

Any ideas?

[Miroslav Nedyalkov]

Hello Mark,

First of all I want to apologize for the late response.

You are right that the first solution will break some template bindings, but you can fix this. Here is the full ControlTemplate that you need to edit - just remove what you don't need in your template move the TemplateBindings where you want to apply the values of the properties:

<ControlTemplate x:Key="PaneGroupDocumentTemplate" TargetType="Docking:RadPaneGroup">
    <Grid>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualState x:Name="Disabled" />
                <vsm:VisualState x:Name="Normal" />
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="ResizerStates">
                <vsm:VisualState x:Name="ResizerLeft">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="Visibility" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="Width" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="4" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border"
                                Storyboard.TargetProperty="Margin" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="4 0 0 0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="ItemsPresenterElement"
                                Storyboard.TargetProperty="Margin" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="6 0 0 0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="ResizerTop">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="Visibility" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="VerticalAlignment" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Top" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="HorizontalAlignment" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Stretch" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="Placement" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <telerik:Dock>Top</telerik:Dock>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="Height" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="4" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="(Grid.RowSpan)" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer"
                                Storyboard.TargetProperty="(Grid.Row)" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsPresenterElement"
                                Storyboard.TargetProperty="Margin" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2 4 0 0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="HideResizer" />
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Fill="{StaticResource PaneGroupDocumentHeaderbackground}"
                Visibility="{TemplateBinding BackgroundVisibility}"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <!--TabStrip-->
        <ItemsPresenter Margin="2 0 0 0" x:Name="ItemsPresenterElement" Grid.Row="0" />

        <!--Content-->
        <Border x:Name="border" BorderThickness="1"
                BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" CornerRadius="3"
                Grid.Row="1">
            <Border BorderThickness="1"
                    BorderBrush="{StaticResource PaneGroupDocumentHighlight}" CornerRadius="2"
                    Background="{StaticResource PaneGroupDocumentColor}">
                <Border BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" Margin="2"
                        Padding="{TemplateBinding Padding}" BorderThickness="1"
                        Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="ContentElement"
                            Content="{TemplateBinding SelectedContent}"
                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                </Border>
            </Border>
        </Border>

        <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True"
                Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Left"
                Grid.RowSpan="2" />

    </Grid>
</ControlTemplate>

The part you need to edit is after the comment <!--Content-->.

About the second one - I know it doesn't work fine, but it is a work-around - it is not a supported feature of the RadDocking control. We plan to fix the issues that comes from removing the DocumentHost, so it should start working correctly soon. We've logged this in our TODO list and it should be done for the Q3 release. If it is ready earlier, it will be included in the latest internal builds. Hope this is ok for you.

Regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Brian Swiger]

Is there an easier way to do this today...simply removing the thick, gray border around a documenthost?  Thanks!

[Miroslav Nedyalkov]

Hi Brian,

This is the easiest way that comes to my mind and is applicable to the current version of the control. We will think about making such customizations easier for future, but I cannot give you any time frame.

Regards,
Miroslav Nedyalkov
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.

[Kjell]

Hi, I think the above code is out of date with the newest controls, can you provided an updated example?  Thank You!

[Pana]

Hello Kjell,

I have created an example with the RadDocking that has its Document host borders removed. It has all styles for raddocking.xaml attached so you can further style the control. If you want to find what have been changed search for "NOTE:" in docking.xaml.

Kind regards,
Pana
the Telerik team