I wrote code for a custom ScrollViewer style that only displays a ScrollViewer's HorizontalScroller once the mouse is over a clipped StackPanel, but this started to act strangely when I tried it under the docking controls. The first image shows what normally happens when you mouse over a clipped StackPanel (its clipped so the StackPanel simply just shows up, all is good).
However, when you drag Panel Two and re-dock it in the same spot as in the first picture (just under Panel One again) and then mouse over it...you start to see the left and right arrows and a roll out animation on the control (it rolls in from the left and also resets the ScrollViewer's HorizontallScroller to a horizontal position of 0). Please see the second image for this.
Here is the entire code for my WPF project that uses docking which I wrote (uses RadControls for WPF version 2013.3.1204.45):
However, when you drag Panel Two and re-dock it in the same spot as in the first picture (just under Panel One again) and then mouse over it...you start to see the left and right arrows and a roll out animation on the control (it rolls in from the left and also resets the ScrollViewer's HorizontallScroller to a horizontal position of 0). Please see the second image for this.
Here is the entire code for my WPF project that uses docking which I wrote (uses RadControls for WPF version 2013.3.1204.45):
<
Window
x:Class
=
"RadDockingTests.MainWindow"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
Title
=
"MainWindow"
Height
=
"350"
Width
=
"525"
>
<
Window.Resources
>
<
Style
x:Key
=
"CustomScrollViewerStyle"
TargetType
=
"ScrollViewer"
>
<
Setter
Property
=
"VerticalScrollBarVisibility"
Value
=
"Disabled"
/>
<
Style.Triggers
>
<
Trigger
Property
=
"IsMouseOver"
Value
=
"True"
>
<
Setter
Property
=
"HorizontalScrollBarVisibility"
Value
=
"Auto"
/>
</
Trigger
>
<
Trigger
Property
=
"IsMouseOver"
Value
=
"False"
>
<
Setter
Property
=
"HorizontalScrollBarVisibility"
Value
=
"Hidden"
/>
</
Trigger
>
</
Style.Triggers
>
</
Style
>
</
Window.Resources
>
<
Grid
>
<
telerik:RadDocking
Name
=
"radDocking"
>
<
telerik:RadDocking.DocumentHost
>
<
telerik:RadSplitContainer
Orientation
=
"Vertical"
>
<
telerik:RadPaneGroup
Name
=
"radPaneGroup"
>
<
telerik:RadPane
Header
=
"Pane One"
>
<
telerik:RadPane.Content
>
<
ScrollViewer
Style
=
"{StaticResource CustomScrollViewerStyle}"
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
</
StackPanel
>
</
ScrollViewer
>
</
telerik:RadPane.Content
>
</
telerik:RadPane
>
</
telerik:RadPaneGroup
>
<
telerik:RadPaneGroup
>
<
telerik:RadPane
Header
=
"Pane Two"
>
<
telerik:RadPane.Content
>
<
ScrollViewer
Style
=
"{StaticResource CustomScrollViewerStyle}"
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
<
Button
Content
=
"This is some filler content."
/>
</
StackPanel
>
</
ScrollViewer
>
</
telerik:RadPane.Content
>
</
telerik:RadPane
>
</
telerik:RadPaneGroup
>
</
telerik:RadSplitContainer
>
</
telerik:RadDocking.DocumentHost
>
</
telerik:RadDocking
>
</
Grid
>
</
Window
>