How to show the tapstrips bottom inside the DocumentHost?

4 posts, 1 answers
  1. Inseok
    Inseok avatar
    12 posts
    Member since:
    Mar 2011

    Posted 17 Apr 2011 Link to this post

    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,
  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 18 Apr 2011 Link to this post

    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
    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. Inseok
    Inseok avatar
    12 posts
    Member since:
    Mar 2011

    Posted 19 Apr 2011 Link to this post

    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: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.
  5. Answer
    Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 21 Apr 2011 Link to this post

    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
    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
Back to Top