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:
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: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:RadSplitContainer
>
</
telerik:RadDocking
>
</
Grid
>
</
Window
>
4 Answers, 1 is accepted
0
Hello David,
The easiest way to achieve the described approach is to modify the PangeGroup_PaneFrameTemplate to be like:
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.
I hope it helps.
Regards,
Masha
Telerik
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
>
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 >>
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 >>
0

David
Top achievements
Rank 1
Iron
Iron
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
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: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
>
<!--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
>
0
Accepted
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
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 >>
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 >>
0

David
Top achievements
Rank 1
Iron
Iron
answered on 14 Nov 2013, 05:04 PM
Okay, thanks.
It seems like the difference is:
vs.
This gets our borders working the way we intend.
Thanks!!
-David
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