Title row not visible when RadPaneGroup TabStripPlacement="Top"

[tomas]

Hello Miroslav.

I would like to make place RadPane Tab on Top.

I have read that you did not expected it, thus title row with pin/unpin menu is not visible. It is a shame. I need this feature to work. 

I have read that it is possible to change these templates:
LeftTemplate, TopTemplate, RightTemplate, BottomTemplate, DocumentHostTemplate 
I know nothing about it and documentation contains complete blank page: http://www.telerik.com/help/silverlight/raddocking-required-parts.html.

Can you help me somehow please?

Also It is not clear for me, what is the purpose of the DocumentHost class. There is no such part on http://www.telerik.com/help/silverlight/raddocking-structure.html.

Thank you very much.

Tom

[Miroslav Nedyalkov]

Hi Tomas,

First of all I want to apologize for the poor documentation, but we worked a lot on it and it will be improved for the Q3 release (this week) and I hope it will be more helpful than now.

Currently the TopTemplate property is set to DocumentHostTemplate property by default, but you could change it. By design the Docking control has two types of PaneGroups - PaneGroups that are in DocumentHost (with the tab items on the top) and groups that are not in the DocumentHost (with tab items on the bottom). This is the reason we didn't implemented all orientations of the PaneGroup. We will consider implementing them all for future, but currently you will need to implement the TopTemplate control template and set the TabStripPlacement to Top. Here is an example of what I mean:

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <telerik:Office_BlackTheme x:Key="Theme" />
        <LinearGradientBrush x:Key="PaneHeader_Background_Focused" EndPoint="0 1">
            <GradientStop Offset="0" Color="#FF969EA8" />
            <GradientStop Offset="1" Color="#FFC7CCCF" />
        </LinearGradientBrush>
        <!--PaneGroup TopTemplate-->
        <ControlTemplate x:Key="PaneGroupTopTemplate"
                TargetType="telerikDocking:RadPaneGroup">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" MinHeight="20" />
                </Grid.RowDefinitions>

                <!--Content-->
                <ContentControl x:Name="ContentBackground"
                                Grid.Row="1"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                    <ContentControl.Template>
                        <ControlTemplate
                                TargetType="ContentControl">
                            <Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{TemplateBinding Background}"
                                    BorderThickness="{TemplateBinding BorderThickness}">

                                <ContentPresenter />

                            </Border>
                        </ControlTemplate>
                    </ContentControl.Template>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!--Header-->
                        <dock:PaneHeader x:Name="HeaderElement"
                                telerik:StyleManager.Theme="{StaticResource Theme}" Grid.Row="0"
                                MinHeight="16" SelectedPane="{TemplateBinding SelectedPane}">
                        </dock:PaneHeader>
                        <ContentPresenter x:Name="ContentElement" Grid.Row="1"
                                Content="{TemplateBinding SelectedContent}"
                                ContentTemplate="{TemplateBinding SelectedContentTemplate}">
                        </ContentPresenter>
                    </Grid>
                </ContentControl>

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

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

                <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>

            </Grid>

        </ControlTemplate>
    </Grid.Resources>

        <telerikDocking:RadDocking
            Grid.Row="1">
        <telerikDocking:RadSplitContainer InitialPosition="DockedTop" Orientation="Horizontal">
            <telerikDocking:RadPaneGroup TopTemplate="{StaticResource PaneGroupTopTemplate}" TabStripPlacement="Top"
                    telerikDocking:ProportionalStackPanel.RelativeSize="400, 200">
                <telerikDocking:RadPane Header="pane" />
                <telerikDocking:RadPane Header="pane" />
                <telerikDocking:RadPane Header="pane" />
                <telerikDocking:RadPane Header="pane" />
            </telerikDocking:RadPaneGroup>
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane Header="pane" />
            </telerikDocking:RadPaneGroup>
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane Header="pane" />
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>

        <telerikDocking:RadDocking.DocumentHost>
            <telerikDocking:RadSplitContainer InitialPosition="DockedTop"
                    Orientation="Horizontal">
                <telerikDocking:RadPaneGroup
                        telerikDocking:ProportionalStackPanel.RelativeSize="400, 200">
                    <telerikDocking:RadPane Header="pane" />
                </telerikDocking:RadPaneGroup>
                <telerikDocking:RadPaneGroup>
                    <telerikDocking:RadPane Header="pane" />
                </telerikDocking:RadPaneGroup>
                <telerikDocking:RadPaneGroup>
                    <telerikDocking:RadPane Header="pane" />
                </telerikDocking:RadPaneGroup>
            </telerikDocking:RadSplitContainer>
        </telerikDocking:RadDocking.DocumentHost>
    </telerikDocking:RadDocking>
</Grid>

Kind 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.

[tomas]

Thank you Miroslav.

It is still too difficult for me.

I am waiting for the completion of the documentation.

Thanks Tom