This is a migrated thread and some comments may be shown as answers.

Styling panes and pane groups

4 Answers 206 Views

Docking

This is a migrated thread and some comments may be shown as answers.

David asked on 07 Nov 2013, 12:36 AM

desired.jpg

observed.jpg

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

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

</Grid>

</Window>

4 Answers, 1 is accepted

answered on 11 Nov 2013, 01:29 PM

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

answered on 11 Nov 2013, 04:11 PM

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

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>

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

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

</ContentControl>

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

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

<Grid Grid.Row="0" x:Name="Header">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

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