Discussion: Scrollbar thickness is smaller in ControlsV2

[zadjii-msft]

The Terminal moved to Controlsv2 with Terminal 1.13, and has received a whole plethora of feedback about the new thickness (width) of the scrollbars. The thread on our side tracking this is: microsoft/terminal#12395. Some verbatims:

The vertical scroll bar was sufficiently narrow so as to make it difficult to use. And, IIRC, someone recently asked about making it wider (I'll second that, a little late). In 1.13.10336.0 it's even narrower than it was previously. Things don't seem to be going in the right direction.

Windows Terminal is still an important test ground for WinUI

If that's so, I'm confident that those developers are paying close attention to feedback here.

And if feedback should be directed to them that would seem to be the job of the WindowsTerminal team (not mine).

At this point they can simply remove it, since it's 99% impossible to grab it with the mouse with sufficient reaction time to be useful.

i.imgur.com/6Gh2QIa.png

What a mockery, microsoft!

... it's 99% impossible to grab it with the mouse with sufficient reaction time to be useful.

I'll have to agree here. The new 1.13 update brings in a lot of (breaking) changes for Windows 10 users (which according to Microsoft is still supported till 2025). I never had UI problems with Preview updates before, but it is very un-Microsoft-y to neglect old-gen (here, Windows 10) users with usability stuff like this.

I personally do not consider the new scrollbars as optimal for mouse usage.

Please correct me if I'm wrong, but isn't the whole point of having a scroll bar, to facilitate mouse usage? I presume it's going to be problematic even for Windows 11 users (if the width is as narrow there as Windows 10).

We're tracking "adding a setting to control the scrollbar width" in microsoft/terminal#9218, though we don't have any immediate plans to get to that. Regardless, we've got a lot of negative community feedback already about the new scrollbar width, so I figured we should echo the sentiment upstream.

[StephenLPeters]

@chigy FYI

[s-h-a-d-o-w]

I just reported this as a feature request for an app that uses WinUI and was told to report it here instead.

Thin scrollbars (as well as rounded corners - but I digress...) are somewhat of an accessibility nightmare because they are clearly designed not be used in the first place. You're supposed to use a scroll wheel, not a ridiculously thin scroll bar. But not everybody can. Or not easily.

Why is it such a big deal (since it's been 2+ years) to make the scrollbar width consistent with other native Windows apps, such as Explorer or Task Manager?

[yaira2]

To expand on to this feedback, we could theoretically add an to Files to override the width, but we'd prefer if it was handled via WinUI.

[NicholasChrzan]

Why not override the base style for the scroll bar using the older base style from either UWP or older. We kept the look and feel of our scrollbars the same by using that approach.

[NicholasChrzan]

<!-- Default style for Windows.UI.Xaml.Controls.Primitives.ScrollBar -->
<Style TargetType="ScrollBar">
    <Setter Property="MinWidth"
            Value="12" />
    <Setter Property="MinHeight"
            Value="12" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Foreground"
            Value="Transparent" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid x:Name="Root">
                    <Grid.Resources>
                        <ControlTemplate x:Key="RepeatButtonTemplate"
                                         TargetType="RepeatButton">
                            <Grid x:Name="Root"
                                  Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                        <ControlTemplate x:Key="HorizontalIncrementTemplate"
                                         TargetType="RepeatButton">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltAltHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlDisabledBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <FontIcon x:Name="Arrow"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          Glyph="&#xE0E3;"
                                          Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                          FontSize="6"
                                          MirroredWhenRightToLeft="True" />
                            </Grid>
                        </ControlTemplate>
                        <ControlTemplate x:Key="HorizontalDecrementTemplate"
                                         TargetType="RepeatButton">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltAltHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlDisabledBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <FontIcon x:Name="Arrow"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          Glyph="&#xE0E2;"
                                          Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                          FontSize="6"
                                          MirroredWhenRightToLeft="True" />
                            </Grid>
                        </ControlTemplate>
                        <ControlTemplate x:Key="VerticalIncrementTemplate"
                                         TargetType="RepeatButton">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltAltHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlDisabledBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <FontIcon x:Name="Arrow"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          Glyph="&#xE0E5;"
                                          Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                          FontSize="6" />
                            </Grid>
                        </ControlTemplate>
                        <ControlTemplate x:Key="VerticalDecrementTemplate"
                                         TargetType="RepeatButton">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltAltHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlDisabledBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <FontIcon x:Name="Arrow"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          Glyph="&#xE0E4;"
                                          Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                          FontSize="6" />
                            </Grid>
                        </ControlTemplate>
                        <ControlTemplate x:Key="VerticalThumbTemplate"
                                         TargetType="Thumb">
                            <Rectangle x:Name="ThumbVisual"
                                       Fill="{ThemeResource SystemControlForegroundBaseLowBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0"
                                                                 To="0"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 Storyboard.TargetName="ThumbVisual" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Rectangle>
                        </ControlTemplate>
                        <ControlTemplate x:Key="HorizontalThumbTemplate"
                                         TargetType="Thumb">
                            <Rectangle x:Name="ThumbVisual"
                                       Fill="{ThemeResource SystemControlForegroundBaseLowBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0"
                                                                 To="0"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 Storyboard.TargetName="ThumbVisual" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Rectangle>
                        </ControlTemplate>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="0.5"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Storyboard.TargetName="Root" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                                   Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPanningThumb"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{ThemeResource SystemControlDisabledChromeHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalPanningThumb"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{ThemeResource SystemControlDisabledChromeHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ScrollingIndicatorStates">
                            <VisualState x:Name="TouchIndicator">
                                <Storyboard>
                                    <FadeInThemeAnimation TargetName="HorizontalPanningRoot" />
                                    <FadeInThemeAnimation TargetName="VerticalPanningRoot" />
                                    <FadeOutThemeAnimation TargetName="HorizontalRoot" />
                                    <FadeOutThemeAnimation TargetName="VerticalRoot" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalRoot"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalRoot"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseIndicator">
                                <Storyboard>
                                    <FadeInThemeAnimation TargetName="HorizontalRoot" />
                                    <FadeInThemeAnimation TargetName="VerticalRoot" />
                                    <FadeOutThemeAnimation TargetName="HorizontalPanningRoot" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPanningRoot"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <FadeOutThemeAnimation TargetName="VerticalPanningRoot" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalPanningRoot"
                                                                   Storyboard.TargetProperty="Visibility"
                                                                   Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                   Storyboard.TargetName="HorizontalRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>True</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible"
                                                                   Storyboard.TargetName="VerticalRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>True</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NoIndicator">
                                <Storyboard>
                                    <FadeOutThemeAnimation BeginTime="0"
                                                           TargetName="HorizontalPanningRoot" />
                                    <FadeOutThemeAnimation BeginTime="0"
                                                           TargetName="VerticalPanningRoot" />
                                    <FadeOutThemeAnimation BeginTime="0"
                                                           TargetName="HorizontalRoot" />
                                    <FadeOutThemeAnimation BeginTime="0"
                                                           TargetName="VerticalRoot" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalRoot"
                          IsHitTestVisible="False">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="HorizontalTrackRect"
                                   Grid.ColumnSpan="5"
                                   Margin="0"
                                   StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}"
                                   Fill="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                                   Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" />
                        <RepeatButton x:Name="HorizontalSmallDecrease"
                                      Grid.Column="0"
                                      MinHeight="12"
                                      IsTabStop="False"
                                      Interval="50"
                                      Margin="0"
                                      Template="{StaticResource HorizontalDecrementTemplate}"
                                      Width="12"
                                      VerticalAlignment="Center" />
                        <RepeatButton x:Name="HorizontalLargeDecrease"
                                      Grid.Column="1"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch"
                                      IsTabStop="False"
                                      Interval="50"
                                      Template="{StaticResource RepeatButtonTemplate}"
                                      Width="0" />
                        <Thumb x:Name="HorizontalThumb"
                               Grid.Column="2"
                               Background="{ThemeResource SystemControlForegroundChromeHighBrush}"
                               Template="{StaticResource HorizontalThumbTemplate}"
                               Height="12"
                               MinWidth="12"
                               AutomationProperties.AccessibilityView="Raw" />
                        <RepeatButton x:Name="HorizontalLargeIncrease"
                                      Grid.Column="3"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch"
                                      IsTabStop="False"
                                      Interval="50"
                                      Template="{StaticResource RepeatButtonTemplate}" />
                        <RepeatButton x:Name="HorizontalSmallIncrease"
                                      Grid.Column="4"
                                      MinHeight="12"
                                      IsTabStop="False"
                                      Interval="50"
                                      Margin="0"
                                      Template="{StaticResource HorizontalIncrementTemplate}"
                                      Width="12"
                                      VerticalAlignment="Center" />
                    </Grid>
                    <Grid x:Name="HorizontalPanningRoot"
                          MinWidth="24">
                        <Border x:Name="HorizontalPanningThumb"
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Left"
                                Background="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}"
                                BorderThickness="0"
                                Height="2"
                                MinWidth="32"
                                Margin="0,2,0,2" />
                    </Grid>
                    <Grid x:Name="VerticalRoot"
                          IsHitTestVisible="False">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="VerticalTrackRect"
                                   Grid.RowSpan="5"
                                   Margin="0"
                                   StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}"
                                   Fill="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                                   Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" />
                        <RepeatButton x:Name="VerticalSmallDecrease"
                                      Height="12"
                                      MinWidth="12"
                                      IsTabStop="False"
                                      Interval="50"
                                      Margin="0"
                                      Grid.Row="0"
                                      Template="{StaticResource VerticalDecrementTemplate}"
                                      HorizontalAlignment="Center" />
                        <RepeatButton x:Name="VerticalLargeDecrease"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch"
                                      Height="0"
                                      IsTabStop="False"
                                      Interval="50"
                                      Grid.Row="1"
                                      Template="{StaticResource RepeatButtonTemplate}" />
                        <Thumb x:Name="VerticalThumb"
                               Grid.Row="2"
                               Background="{ThemeResource SystemControlForegroundChromeHighBrush}"
                               Template="{StaticResource VerticalThumbTemplate}"
                               Width="12"
                               MinHeight="12"
                               AutomationProperties.AccessibilityView="Raw" />
                        <RepeatButton x:Name="VerticalLargeIncrease"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch"
                                      IsTabStop="False"
                                      Interval="50"
                                      Grid.Row="3"
                                      Template="{StaticResource RepeatButtonTemplate}" />
                        <RepeatButton x:Name="VerticalSmallIncrease"
                                      Height="12"
                                      MinWidth="12"
                                      IsTabStop="False"
                                      Interval="50"
                                      Margin="0"
                                      Grid.Row="4"
                                      Template="{StaticResource VerticalIncrementTemplate}"
                                      HorizontalAlignment="Center" />
                    </Grid>
                    <Grid x:Name="VerticalPanningRoot"
                          MinHeight="24">
                        <Border x:Name="VerticalPanningThumb"
                                VerticalAlignment="Top"
                                HorizontalAlignment="Right"
                                Background="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}"
                                BorderThickness="0"
                                Width="2"
                                MinHeight="32"
                                Margin="2,0,2,0" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>