How to edit the Style of a Scrollbar of a ScrollViewer?

Question

I already know how to edit the ScrollViewer's Template by editing a copy of its template. But how do I edit the Scrollbar-that's-inside-the-ScrollViewer's Style?

_{(What I want is to change the BeginTime of its FadeOut animation as suggested in this answer. I don't want to change all Scrollbars' behavior in the app.)}

If there's some way to do this in code instead of XAML that would be great.

Answer 1

First edit the scrollbar's style template and place it in your page resource and then use a key ("customScrollBar") to identify this resource

Here is the ScrollBar style template to edit.

Edit with the begin time which suits you.

<Storyboard>
    <FadeOutThemeAnimation BeginTime="1" TargetName="HorizontalPanningRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="VerticalPanningRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="HorizontalRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="VerticalRoot" />
</Storyboard>

And add the below scrollviewer styling

 <Style x:Key="customScrollViewer" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollMode" Value="Auto" />
        <Setter Property="VerticalScrollMode" Value="Auto" />
        <Setter Property="IsHorizontalRailEnabled" Value="True" />
        <Setter Property="IsVerticalRailEnabled" Value="True" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="ZoomMode" Value="Disabled" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="MouseIndicator" To="NoIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="TouchIndicator" To="NoIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                             Storyboard.TargetProperty="IndicatorMode">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>

                                <VisualState x:Name="NoIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TouchIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseIndicator">
                                    <Storyboard>
                                        <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                           Storyboard.TargetProperty="IndicatorMode"
                                           Duration="0">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <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="ScrollContentPresenter"
                              Grid.RowSpan="2"
                              Grid.ColumnSpan="2"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Margin="{TemplateBinding Padding}" />
                            <ScrollBar x:Name="VerticalScrollBar" Style="{StaticResource customScrollBar}"
                                                 Grid.Column="1"
                                                 IsTabStop="False"
                                                 Maximum="{TemplateBinding ScrollableHeight}"
                                                 Orientation="Vertical"
                                                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                                 Value="{TemplateBinding VerticalOffset}"
                                                 ViewportSize="{TemplateBinding ViewportHeight}"
                                                 HorizontalAlignment="Right" />
                          <ScrollBar x:Name="HorizontalScrollBar"
                                 IsTabStop="False"
                                 Maximum="{TemplateBinding ScrollableWidth}"
                                 Orientation="Horizontal"
                                 Grid.Row="1"
                                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                 Value="{TemplateBinding HorizontalOffset}"
                                 ViewportSize="{TemplateBinding ViewportWidth}" />
                            <Border x:Name="ScrollBarSeparator"
              Grid.Row="1"
              Grid.Column="1"
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Do note how I've added the "customScrollBar" style in the above ScrollViewer.