Styling panes and pane groups

5 posts, 1 answers
  1. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 06 Nov 2013 Link to this post

    HI there,

    We are trying to style our panes and pane groups.  In this example, we're trying to change the BorderBrush to a linear gradient.

    Looking at this with Snoop, I can see that the RadPaneGroup as well as a ContentControl named ContentBackground have the correct BorderBrush.  However, a Border named "Root" has a solid-color brush as its border, and this is apparently what we see.

    Are there other styles we'd need to override?  If we change PaneGroup_PaneFrame_Brush in Telerik.Windows.Controls.Docking.xaml, we do see the desired change show up, but we'd like to change the border in a way that is compatible with the use of implicit styles described here:  http://www.telerik.com/help/wpf/styling-apperance-implicit-styles-overview.html

    Strangely, even copying the entire (albeit small) ControlTemplate in which PaneGroup_PaneFrame_Brush is used doesn't correctly override this behavior.

    What are we doing wrong, what don't we understand, or how to we restyle the BorderBrush here?

    Thanks,
    -David

    Example code:

    <Window x:Class="WpfApplication1.MainWindow"
            Title="MainWindow">
        <Window.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Telerik.Windows.Controls.xaml" />
                    <ResourceDictionary Source="Telerik.Windows.Controls.Docking.xaml" />
                </ResourceDictionary.MergedDictionaries>
     
                <Thickness x:Key="PaneGroup_BorderThickness">3</Thickness>
     
                <LinearGradientBrush x:Key="PaneGroup_BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF809EAD" Offset="0"/>
                    <GradientStop Color="#FFADAFB2" Offset="1"/>
                </LinearGradientBrush>
             
                <Style BasedOn="{StaticResource RadPaneGroupStyle}" TargetType="telerik:RadPaneGroup">
                    <Setter Property="BorderThickness" Value="{StaticResource PaneGroup_BorderThickness}" />
                    <Setter Property="BorderBrush" Value="{StaticResource PaneGroup_BorderBrush}" />
                </Style>
     
                <LinearGradientBrush x:Key="PaneGroup_PaneFrame_Brush" EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF809EAD" Offset="0"/>
                    <GradientStop Color="#FFADAFB2" Offset="1"/>
                </LinearGradientBrush>
     
                <ControlTemplate x:Key="PaneGroup_PaneFrameTemplate" TargetType="ContentControl">
                    <Border x:Name="Root" BorderBrush="{StaticResource PaneGroup_PaneFrame_Brush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource PaneGroup_PaneFrame_CornerRadius}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
     
                <Style BasedOn="{StaticResource PaneGroup_PaneFrameStyle}" TargetType="ContentControl">
                    <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
                </Style>
     
     
            </ResourceDictionary>
        </Window.Resources>
         
        <Grid>
            <telerik:RadDocking Name="u_rd_Docking" BorderThickness="4" Grid.Row="1">
     
                <telerik:RadSplitContainer InitialPosition="DockedTop" Height="700" >
                    <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="24,100" >
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 1" >
                                <Rectangle Width="50" Height="100" Fill="BlanchedAlmond" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
     
                    <telerik:RadSplitContainer Orientation="Vertical" telerik:ProportionalStackPanel.RelativeSize="42.5,100" >
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 2" >
                                <Rectangle Width="125" Height="50" Fill="Aqua" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
     
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 3" >
                                <Rectangle Width="125" Height="50" Fill="Red" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                     
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>
    </Window>



  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 11 Nov 2013 Link to this post

    Hello David,

    The easiest way to achieve the described approach is to modify the  PangeGroup_PaneFrameTemplate to be like:
    <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>
    This way everything will work as expected.

    Otherwise you need to copy the control template of PaneGroupDocumentTemplate and PaneGroupBottomTemplate template and call them again inside RadPangeGroupStyle which should be below all other defined resources.
    <Style BasedOn="{StaticResource RadPaneGroupStyle}" TargetType="telerik:RadPaneGroup">
     <Setter Property="BorderThickness" Value="{StaticResource PaneGroup_BorderThickness}" />
     <Setter Property="BorderBrush" Value="{StaticResource PaneGroup_BorderBrush}" />
     <Setter Property="Template" Value="{StaticResource PaneGroupBottomTemplate}" />
     <Setter Property="BottomTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
     <Setter Property="TopTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
     <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
     <Setter Property="LeftTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
      <Setter Property="RightTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
    </Style>

    I hope it helps.

    Regards,
    Masha
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 11 Nov 2013 Link to this post

    Hi Masha,

    I have done as you said.  However, we still don't see our different brush showing up.  The updated xaml is copied below.  What else do we need to do, please?

    thanks!

    -David

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns:sys="clr-namespace:System;assembly=mscorlib"
            xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
            xmlns:telerikTabControl="clr-namespace:Telerik.Windows.Controls.TabControl;assembly=Telerik.Windows.Controls.Navigation"
            xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
            xmlns:dock="clr-namespace:Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"
     
            Title="MainWindow">
        <Window.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Telerik.Windows.Controls.xaml" />
                    <ResourceDictionary Source="Telerik.Windows.Controls.Docking.xaml" />
                </ResourceDictionary.MergedDictionaries>
     
                <Thickness x:Key="PaneGroup_BorderThickness">3</Thickness>
     
                <LinearGradientBrush x:Key="PaneGroup_BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF809EAD" Offset="0"/>
                    <GradientStop Color="#FFADAFB2" Offset="1"/>
                </LinearGradientBrush>
             
                <LinearGradientBrush x:Key="PaneGroup_PaneFrame_Brush" EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF809EAD" Offset="0"/>
                    <GradientStop Color="#FFADAFB2" Offset="1"/>
                </LinearGradientBrush>
     
     
                <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 BasedOn="{StaticResource PaneGroup_PaneFrameStyle}" TargetType="ContentControl">
                    <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
                </Style>
     
     
                <ControlTemplate x:Key="PaneGroupBottomTemplate" TargetType="telerikDocking:RadPaneGroup">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled" />
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"></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">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </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">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </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:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation BeginTime="00:00:00" To="4" Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="MinWidth" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBackground" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>4 0 0 0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsContainer" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>4 -5 0 0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ResizerTop">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="VerticalAlignment" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Top</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="HorizontalAlignment" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Placement" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Dock>Top</Dock>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Height" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Double>4</sys:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="(Grid.RowSpan)" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="(Grid.Row)" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>0</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBackground" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0 4 0 0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HideResizer" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" MinHeight="20" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <!--Content -->
                        <ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" Style="{StaticResource PaneGroup_PaneFrameStyle}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <!--Header-->
                                <Border Grid.Row="0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.PaneHeaderVisibility}">
                                    <dock:PaneHeader x:Name="HeaderElement" Grid.Row="0" MinHeight="16" SelectedPane="{TemplateBinding SelectedPane}" />
                                </Border>
                                <Grid Grid.Row="1">
                                    <ContentPresenter x:Name="ContentElement" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,           Converter={StaticResource InvertedBooleanToVisibilityConverter}}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
                                    <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}" />
                                </Grid>
                            </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>
                        <dock:RadGridResizer x:Name="DockResizer" Grid.RowSpan="2" Placement="Left" ShowsPreview="True" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Left" />
                    </Grid>
                </ControlTemplate>
     
     
     
                <ControlTemplate x:Key="PaneGroupDocumentTemplate" TargetType="telerikDocking:RadPaneGroup">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled" />
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DropDownDisplayStates">
                                <VisualState x:Name="DropDownButtonCollapsed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownButtonVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ResizerStates">
                                <VisualState x:Name="ResizerLeft">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation BeginTime="00:00:00" To="4" Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="MinWidth" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsPresenterElement" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>4 2 0 2</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBackground" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>4 0 0 0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ResizerTop">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Visibility" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="VerticalAlignment" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Top</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="HorizontalAlignment" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Placement" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Dock>Top</Dock>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="Height" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Double>4</sys:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="(Grid.RowSpan)" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>1</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" Storyboard.TargetProperty="(Grid.Row)" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Int32>0</sys:Int32>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Margin" Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0 4 0 0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HideResizer" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!--Content -->
                        <ContentControl x:Name="ContentBackground" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{StaticResource PaneGroup_DocumentFrameStyle}">
                            <Grid>
                                <ContentPresenter x:Name="ContentElement" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,           Converter={StaticResource InvertedBooleanToVisibilityConverter}}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
                                <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}" />
                            </Grid>
                        </ContentControl>
                        <!--TabStrip-->
                        <Grid Grid.Row="0" x:Name="Header">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <RepeatButton x:Name="LeftScrollButtonElement" Style="{StaticResource PaneGroup_LeftScrollButtonStyle}" Grid.Column="0" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}" />
                            <ScrollViewer x:Name="ScrollViewerElement" Grid.Column="1" Margin="0 -2" HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="ScrollViewer">
                                        <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="0 0 1 0" />
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <ItemsPresenter x:Name="ItemsPresenterElement" Margin="0 2" />
                            </ScrollViewer>
                            <RepeatButton x:Name="RightScrollButtonElement" Style="{StaticResource PaneGroup_RightScrollButtonStyle}" Grid.Column="2" Visibility="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScrollViewerElement}" />
                            <ToggleButton x:Name="DropDownButtonElement" Style="{StaticResource PaneGroup_PaneMenuButtonStyle}" Visibility="Collapsed" Grid.Column="3" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                <telerikNavigation:RadContextMenu.ContextMenu>
                                    <telerikTabControl:DropDownMenu x:Name="DropDownMenuElement" IsOpen="{Binding IsChecked, ElementName=DropDownButtonElement, Mode=TwoWay, FallbackValue=False}" StaysOpen="False" Placement="Bottom" ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}" ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}" DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}" Style="{TemplateBinding DropDownStyle}"></telerikTabControl:DropDownMenu>
                                </telerikNavigation:RadContextMenu.ContextMenu>
                            </ToggleButton>
                            <telerik:RadButton x:Name="CloseButton" Grid.Column="4" Style="{StaticResource PaneGroup_CloseButtonStyle}" Command="telerikDocking:RadDockingCommands.Close" Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"></telerik:RadButton>
                        </Grid>
                        <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.RowSpan="2" />
                    </Grid>
                </ControlTemplate>
     
     
     
                <Style BasedOn="{StaticResource RadPaneGroupStyle}" TargetType="telerik:RadPaneGroup">
                    <Setter Property="BorderThickness" Value="{StaticResource PaneGroup_BorderThickness}" />
                    <Setter Property="BorderBrush" Value="{StaticResource PaneGroup_BorderBrush}" />
                    <Setter Property="Template" Value="{StaticResource PaneGroupBottomTemplate}" />
                    <Setter Property="BottomTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
                    <Setter Property="TopTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
                    <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneGroupDocumentTemplate}" />
                    <Setter Property="LeftTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
                    <Setter Property="RightTemplate" Value="{StaticResource PaneGroupBottomTemplate}" />
                </Style>
     
     
            </ResourceDictionary>
        </Window.Resources>
         
        <Grid>
            <telerik:RadDocking Name="u_rd_Docking" BorderThickness="4" Grid.Row="1">
     
                <telerik:RadSplitContainer InitialPosition="DockedTop" Height="700" >
                    <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="24,100" >
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 1" >
                                <Rectangle Width="50" Height="100" Fill="BlanchedAlmond" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
     
                    <telerik:RadSplitContainer Orientation="Vertical" telerik:ProportionalStackPanel.RelativeSize="42.5,100" >
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 2" >
                                <Rectangle Width="125" Height="50" Fill="Aqua" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
     
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Pane 3" >
                                <Rectangle Width="125" Height="50" Fill="Red" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                     
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>
    </Window>
  5. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Nov 2013 Link to this post

    Hi David,

    You have missed to add PaneGroup_PaneFrameStyle.
    I've demonstrated the approach in the attached project.

    I hope this would be helpful.

    Regards,
    Masha
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 14 Nov 2013 Link to this post

    Okay, thanks.

    It seems like the difference is:

    <Style x:Key="PaneGroup_PaneFrameStyle" TargetType="ContentControl">
        <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
    </Style>

    vs.

    <Style BasedOn="{StaticResource PaneGroup_PaneFrameStyle}" TargetType="ContentControl">
        <Setter Property="Template" Value="{StaticResource PaneGroup_PaneFrameTemplate}" />
    </Style>

    This gets our borders working the way we intend.

    Thanks!!

    -David
Back to Top
UI for WPF is Visual Studio 2017 Ready