How do you disable the left and right arrow RadPane template that shows up when using custom styles?

[Alexandru]

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

<Window x:Class="RadDockingTests.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" 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>

[Masha]

Hello Alexandru,

In order to remove the Scroll arrows in RadPane header you need to modify the ControlTemplate of 
DocumentHostTemplate. Look for RepeatButtons named LeftScrollButtonElement and RightScrollButtonElement. The issue occurs because the arrows are binded to the ComputedHorizontalScrollBarVisibility property and when the RadPaneGroup is reloaded the arrow visibility becomes true.

The approach is demonstrated in the attached project using Implicit Styling mechanism.
I hope this helps.


Regards,
Masha
Telerik