How to show the tapstrips bottom inside the DocumentHost?

[Inseok]

Hi,
A RadPaneGroup inside the DocumentHost will show the 'tab strip' on the 'Top' by default.
But I'd like to show every RadPaneGroup's tab strips to Bottom as non-DocumentHost group.

I tried these,
1) Using DocumentHost;
- edit styles and templates; couldn't find the way.
2) Set the HasDocumentHost to False;
- It works great, but after remove all the panes, the pane can not cover full area of container again.

regards,

[Konstantina]

Hello Inseok,

You can move the headers of the Pane into the DocumentHost at the bottom by editing the RadPaneGroup's template. You can easily achieve this with Expression Blend. Just drop a Docking control into the design surface, right-click it and choose from the menu Edit Template->Edit a Copy. After that repeat that step for the RadPaneGroup. Blend will generate all the needed resources. Find the
"PaneGroupDocumentTemplate" and in the Grid switch the Row number of the <ContentControl x:Name="ContentBackground".../> and the  <Grid x:Name="Header" .../>. Also don't forget to adjust the RowDefiniton's Height according to the switch. The row with the Header should have Height="Auto", and the one with the Content, Height="*".

Hope this information helps.

All the best,
Konstantina
the Telerik team

[Inseok]

Hi, Konstantina.
※Note: I edited previous post because I've solved the problem. And I'm going to attach the right code snippet, instead.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:Telerik_Windows_Controls_TabControl="clr-namespace:Telerik.Windows.Controls.TabControl;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:Telerik_Windows_Controls_Primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Navigation"
    x:Class="RadControlsSilverlightApp1.DocumentHostTest"
    mc:Ignorable="d"
    d:DesignHeight="305" d:DesignWidth="490">

    <UserControl.Resources>
        <CornerRadius x:Key="PaneGroup_PaneFrame_CornerRadius">2 2 2 0</CornerRadius>
        <ControlTemplate x:Key="PaneGroup_PaneFrameTemplate" TargetType="ContentControl">
            <Border
            x:Name="Root"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{StaticResource PaneGroup_PaneFrame_CornerRadius}">

                <ContentPresenter />

            </Border>
        </ControlTemplate>
        <Style x:Key="PaneGroup_PaneFrameStyle" TargetType="ContentControl">
            <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
        </Style>
        <LinearGradientBrush x:Key="PaneHeader_Background_Focused" EndPoint="0 1">
            <GradientStop Color="#FFABABAB" Offset="0"/>
            <GradientStop Color="#FFF2F2F2" Offset="1"/>
        </LinearGradientBrush>
        <ControlTemplate x:Key="RadPaneGroupControlBottomTemplate" TargetType="telerik:RadPaneGroup">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" MinHeight="20" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>


                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled" />
                        <VisualState x:Name="Normal" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource PaneHeader_Background_Focused}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="AutoCollapseStates">
                        <VisualState x:Name="SingleItem">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsContainer" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="TwoOrMoreItems" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="PaneHeaderVisibilityStates">
                        <VisualState x:Name="PaneHeaderHidden">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="PaneHeaderVisible" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ResizerStates">
                        <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="ContentBackground" Storyboard.TargetProperty="Margin" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="4 0 0 0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsContainer" Storyboard.TargetProperty="Margin" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="4 -5 0 0" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <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="ContentBackground" Storyboard.TargetProperty="Margin" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0 4 0 0" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="HideResizer" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!--Content-->
                <ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                Style="{StaticResource PaneGroup_PaneFrameStyle}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <!--Header-->
                        <Border Grid.Row="0" Visibility="{Binding SelectedItem.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}" >
                            <telerik:PaneHeader x:Name="HeaderElement"
                            Grid.Row="0"
                            MinHeight="16" SelectedPane="{TemplateBinding SelectedPane}" />
                        </Border>

                        <ContentPresenter x:Name="ContentElement" Grid.Row="1"

                        ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                    </Grid>
                </ContentControl>

                <!--Items-->
                <Border x:Name="ItemsContainer" Grid.Row="1" Margin="0 -5 0 0" Padding="0 0 1 0">
                    <ItemsPresenter x:Name="ItemsPresenterElement" />
                </Border>

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


            </Grid>


        </ControlTemplate>

        <!-- Begin Resources for DocumentTabChromeStyle -->
        <LinearGradientBrush x:Key="PaneTabBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF6F6F6" Offset="0"/>
            <GradientStop Color="#FFD2D2D2" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabOuterBorder_Normal" Color="#FF848484"/>
        <SolidColorBrush x:Key="PaneTabInnerBorder_Normal" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabInnerBorder_Disabled" Color="#FFE0E0E0"/>
        <SolidColorBrush x:Key="PaneTabOuterBorder_Disabled" Color="#FF989898"/>
        <SolidColorBrush x:Key="PaneTabBackground_Disabled" Color="#FFE0E0E0"/>
        <SolidColorBrush x:Key="PaneTabInnerBorder_Highlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorder_Highlighted" Color="#FF848484"/>
        <LinearGradientBrush x:Key="PaneTabBackground_Highlighted" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorder_Selected" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorder_Selected" Color="#FF848484"/>
        <LinearGradientBrush x:Key="PaneTabBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFFAFAFA" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorder_SelectedHighlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorder_SelectedHighlighted" Color="#FFFFC92B"/>
        <LinearGradientBrush x:Key="PaneTabBackground_SelectedHighlighted" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFFAFAFA" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorderVertical_Normal" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorderVertical_Normal" Color="#FF848484"/>
        <LinearGradientBrush x:Key="PaneTabBackgroundVertical_Normal" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FFF6F6F6" Offset="0"/>
            <GradientStop Color="#FFD2D2D2" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorderVertical_Highlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorderVertical_Highlighted" Color="#FF848484"/>
        <LinearGradientBrush x:Key="PaneTabBackgroundVertical_Highlighted" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorderVertical_Selected" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorderVertical_Selected" Color="#FF848484"/>
        <LinearGradientBrush x:Key="PaneTabBackgroundVertical_Selected" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFFAFAFA" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PaneTabInnerBorderVertical_SelectedHighlighted" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="PaneTabOuterBorderVertical_SelectedHighlighted" Color="#FFFFC92B"/>
        <LinearGradientBrush x:Key="PaneTabBackgroundVertical_SelectedHighlighted" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFFAFAFA" Offset="1"/>
        </LinearGradientBrush>
        <!-- End of Resources for DocumentTabChromeStyle -->

        <!-- TabItem chrome button style -->
        <Style x:Key="DocumentTabChromeStyle" TargetType="Telerik_Windows_Controls_Chromes:ButtonChrome">
            <Setter Property="Background" Value="{StaticResource PaneTabBackground_Normal}"/>
            <Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Telerik_Windows_Controls_Chromes:ButtonChrome">
                        <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorder_Disabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorder_Disabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackground_Disabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Highlighted">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorder_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorder_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackground_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorder_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorder_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackground_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedHighlighted">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorder_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorder_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackground_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NormalVertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorderVertical_Normal}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorderVertical_Normal}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackgroundVertical_Normal}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="HighlightedVertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorderVertical_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorderVertical_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackgroundVertical_Highlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedVertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorderVertical_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorderVertical_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackgroundVertical_Selected}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedHighlightedVertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabInnerBorderVertical_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabOuterBorderVertical_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="OuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabBackgroundVertical_SelectedHighlighted}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="InnerBorder" BorderBrush="{StaticResource PaneTabInnerBorder_Normal}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Pane BottomTemplate Radius -->
        <CornerRadius x:Key="PaneTabBottomUnpinnedCornerRadius">2</CornerRadius>
        <CornerRadius x:Key="PaneTabBottomPinnedCornerRadius">0 0 2 2</CornerRadius>

        <!-- Pane BottomTemplate -->
        <ControlTemplate x:Key="PaneBottomTemplate" TargetType="telerik:RadPane">
            <Grid x:Name="wrapper" Margin="0 4 -1 0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0.33"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="ChromePinned">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0 0 0 0"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="PinnedStates">
                        <VisualState x:Name="Unpinned">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ChromeUnpinned">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pinned">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ChromePinned">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="ContentBorder">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0 0 0 2"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ChromeUnpinned" BorderThickness="1" CornerRadius="{StaticResource PaneTabBottomUnpinnedCornerRadius}" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" Style="{StaticResource DocumentTabChromeStyle}" Visibility="Collapsed"/>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ChromePinned" BorderThickness="1 0 1 1" CornerRadius="{StaticResource PaneTabBottomPinnedCornerRadius}" Margin="0 1 0 2" RenderSelected="{TemplateBinding IsSelected}" RenderHighlighted="{TemplateBinding IsMouseOver}" Style="{StaticResource DocumentTabChromeStyle}" Visibility="Collapsed"/>
                <Border x:Name="ContentBorder">
                    <Telerik_Windows_Controls_Primitives:TabItemContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="6 3" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </Grid>
        </ControlTemplate>

        <Style x:Key="RadPaneBottomStyle" TargetType="telerik:RadPane">
            <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneBottomTemplate}"/>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadDocking>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer Orientation="Vertical">
                    <telerik:RadSplitContainer>
                        <telerik:RadPaneGroup
                                          DocumentHostTemplate="{StaticResource RadPaneGroupControlBottomTemplate}">
                            <telerik:RadPane Header="Pane 1" Style="{StaticResource RadPaneBottomStyle}" />
                            <telerik:RadPane Header="Pane 2" Style="{StaticResource RadPaneBottomStyle}" />
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>

                    <telerik:RadSplitContainer>
                        <telerik:RadPaneGroup
                                          DocumentHostTemplate="{StaticResource RadPaneGroupControlBottomTemplate}">
                            <telerik:RadPane Header="Pane 1" Style="{StaticResource RadPaneBottomStyle}" />
                            <telerik:RadPane Header="Pane 2" Style="{StaticResource RadPaneBottomStyle}" />
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>

                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

            <telerik:RadSplitContainer>
                <telerik:RadPaneGroup TabStripPlacement="Bottom">
                    <telerik:RadPane Header="Pane 1" Style="{StaticResource RadPaneBottomStyle}"/>
                    <telerik:RadPane Header="Pane 2" Style="{StaticResource RadPaneBottomStyle}"/>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>

    </Grid>
</UserControl>

What I expect is, a docking UI which has DocumentHost but all panes look exactly same to non-DocumentHosted panes.
Like I attached. The container left side is non-DocumentHosted, and the other side is DocumentHosted.

I edited the style and template follow instruction:
1) Append a RadDocking on the LayoutRoot.
2) Edit a copy the BottomTemplate of RadPaneGroup. Then set the DocumentHostTemplate of  RadPaneGroup to the copied template.
3) Edit a copy the BottomTemplate of RadPane. 
4) Add an empty Style of RadPane. Then append a Setter to set the DocumentHostTemplate property to the copied template.

In the result, the RadPaneGroup should be set like:

<telerik:RadPaneGroup DocumentHostTemplate="{StaticResource RadPaneGroupControlBottomTemplate}">
    <telerik:RadPane Header="Pane 1" Style="{StaticResource RadPaneBottomStyle}" />
    <telerik:RadPane Header="Pane 2" Style="{StaticResource RadPaneBottomStyle}" />
</telerik:RadPaneGroup>

Okay, now I get what I want.
Just one more thing, I should re-set the style of RadPane everytime when the pane is docked again(pane state changed). Is it right approach? If there's better way to do that, please let me know that.

Thank you.

[Konstantina]

Hi Inseok,

We are glad that you were able to achieve the desired look yourself. Thank you for sharing the solution.

When the Panes are pinned/unpinned/made floating they are taken out of the visual tree and put into a new RadPaneGroup. That is way they loose their style. To keep the style I can suggest you to apply it implicitly or to create a custom theme. You can read more how to create a custom theme in this help article.

Greetings,
Konstantina
the Telerik team