Scrollbar / ScrollViewer disable AutoHide

[xperia-droid]

Hi, I'm using the ScrollViewer / Scrollbar on many places in my app.
As my mouse scroll wheel is almost defect I use mostly the ScrollViewer to scroll trough the app.
The problem that I have with it is, I have to wait for the hover animation, so that the scrollbar get's wider and then I can use the slider to change the position of the app.

Is there any way to disable the hover feature and use directly the wider Scrollviewer?

[xperia-droid]

I have found an solution by myself.

In my Project I added an folder called "Styles". In this folder I added an Ressource Dictionary called "CustomScrollbar.xaml".

In the App.xaml I have added this line in the section "<ResourceDictionary.MergedDictionaries>":

In the MainWindow.xaml I had already an ScrollViewer. In the XAML-Designer I searched the "Style" component. In the Rightclick context menu I used the function "Convert in a new ressource" and set the name to "ScrollViewerCustom" and defined it in the "CustomScrollBar.xaml".

Then in the file "CustomScrollBar.xaml" appeared many styles regarding the scrollviewer.
I checked trough the code and got many StoryBoard errors.

After I understand what they are used for I removed all the ControlTemplate.Ressources section which contained only the StoryBoard sections. And I removed the corresponding Storyboard Triggers in the ControlTemplate.Triggers section.

Furthermore I removed the autohide Scrollviewer Template and the corresponding Trigger.

This is my final "CustomScrollBar.xaml", if anyone is interested:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:hc="clr-namespace:HandyControl.Controls;assembly=HandyControl">

    <Style x:Key="ScrollBarBaseRepeatButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarBaseThumbVertical" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">

                    <Border Background="Transparent" Width="{TemplateBinding Width}">
                        <Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}" HorizontalAlignment="Right" Height="{TemplateBinding Height}" RadiusX="4" RadiusY="4" SnapsToDevicePixels="True" Width="7" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource SecondaryTextBrush}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource PrimaryTextBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarBaseThumbHorizontal" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Background="Transparent" Height="{TemplateBinding Height}">
                        <Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}" Height="7" RadiusX="4" RadiusY="4" SnapsToDevicePixels="True" VerticalAlignment="Bottom" Width="{TemplateBinding Width}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource SecondaryTextBrush}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource PrimaryTextBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarBaseStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Width" Value="8"/>
        <Setter Property="MinWidth" Value="8"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <hc:SimplePanel x:Name="Bg" SnapsToDevicePixels="true">
                        <Border Background="{TemplateBinding Background}"/>
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource ScrollBarBaseRepeatButton}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource ScrollBarBaseRepeatButton}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Background="{TemplateBinding Foreground}" Style="{StaticResource ScrollBarBaseThumbVertical}"/>
                            </Track.Thumb>
                        </Track>
                    </hc:SimplePanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Height" Value="8"/>
                <Setter Property="MinHeight" Value="8"/>
                <Setter Property="BorderThickness" Value="0,1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <hc:SimplePanel x:Name="Bg" SnapsToDevicePixels="true">
                                <Border Background="{TemplateBinding Background}"/>
                                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource ScrollBarBaseRepeatButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource ScrollBarBaseRepeatButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Background="{TemplateBinding Foreground}" Style="{StaticResource ScrollBarBaseThumbHorizontal}"/>
                                    </Track.Thumb>
                                </Track>
                            </hc:SimplePanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    <ControlTemplate x:Key="ScrollViewerNativeBaseControlTemplate" TargetType="{x:Type ScrollViewer}">

        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanHorizontallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" CanVerticallyScroll="False" Grid.Column="0" Content="{TemplateBinding Content}" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" Grid.RowSpan="2" Grid.Row="0"/>
            <ScrollBar x:Name="PART_VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity=".8" Grid.Row="0" Style="{StaticResource ScrollBarBaseStyle}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
            <ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity=".8" Orientation="Horizontal" Grid.Row="1" Style="{StaticResource ScrollBarBaseStyle}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
        </Grid>

    </ControlTemplate>
    <Style x:Key="ScrollViewerCustom" TargetType="{x:Type ScrollViewer}">
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="{Binding (ScrollViewer.VerticalScrollBarVisibility), RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template" Value="{StaticResource ScrollViewerNativeBaseControlTemplate}"/>
    </Style>
</ResourceDictionary>

With this the Scrollviewer is always 7 pixels wide and you don't have to hover it, to get wide enough to be able to scroll with the mouse cursor.

Example: