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

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

1 Answer 53 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Alexandru
Top achievements
Rank 1
Alexandru asked on 04 Mar 2014, 02:32 AM
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"
        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>

1 Answer, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 06 Mar 2014, 12:28 PM
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

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Tags
Docking
Asked by
Alexandru
Top achievements
Rank 1
Answers by
Masha
Telerik team
Share this question
or