Making ScrollViewer's ScrollBar always visible through overriding or styling - windows-runtime

Question

I'm trying to make the ScrollBar for the ScrollViewer to be always visible so it doesn't only appear when I try to scroll the text view and so the user knows that there is someting more to see.
At first, for some reason, I thought that I just have to change the color which needed brush overriding, but in reality, the ScrollBar is fading in and fading out, so either the ScrollViewer's or ScrollBar's template needs to be changed.
I found the ScrollViewer's template which I have just placed in the App.Resources section, but I don't know how to edit it so the ScrollBar is just visible all the time:
<Style TargetType="ScrollViewer">
<Setter Property="HorizontalScrollMode" Value="Enabled" />
<Setter Property="VerticalScrollMode" Value="Enabled" />
<Setter Property="IsHorizontalRailEnabled" Value="True" />
<Setter Property="IsVerticalRailEnabled" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="ZoomMode" Value="Enabled" />
<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>
<FadeInThemeAnimation 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"
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}" />
<!-- Change the opacity below, to zero. otherwise, the right and bottom border end up showing up as a single pixel lit on the screen even if the scroll is disabled. -->
<Border x:Name="ScrollBarSeparator"
Grid.Row="1"
Grid.Column="1"
Opacity="0"
BorderThickness="0,0,1,1"
Background="{StaticResource ScrollBarTrackBackgroundThemeBrush}"
BorderBrush="{StaticResource ScrollBarTrackBorderThemeBrush}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I tried deleting various parts of the code, but, in result, the ScrollBar just disappears altogether.

Answer 1

Why don't you just set the VerticalScrollBarVisibility and/or the HorizontalScrollBarVisibility of your instance of the ScrollViewer to Visible, as opposed to removing the fading behaviour from the style?
<ScrollViewer VerticalScrollBarVisibility="Visible">
<!-- ScrollViewer Content -->
</ScrollViewer>
EDIT AFTER COMMENT:
I think I came up with a "solution". I'm not sure if it's the best way achieving this, but it seems to give the result you want.
Create a custom style for theScrollViewer, then make one for the vertical/horizontal ScrollBar itself (using Blend, which is what I assumed you did before).
Once you have a copy of the default style, edit the following lines:
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0" TargetName="HorizontalPanningRoot"/>
<FadeOutThemeAnimation BeginTime="0" TargetName="VerticalPanningRoot"/>
<Fade**In**ThemeAnimation BeginTime="0" TargetName="HorizontalRoot"/>
<Fade**In**ThemeAnimation BeginTime="0" TargetName="VerticalRoot"/>
</Storyboard>
</VisualState>
My guess is that this literally causes the ScrollBar to fade in when it is not being interacted with, meaning it will always be visible.
Here's the relevant ScrollViewer XAML (I can't fit the whole thing in the answer). Notice that the ScrollViewer is set to use my custom style ScrollViewerStyle1, then within that style the VerticalScrollBar is set to my ScrollBar custom style ScrollBarCustomStyle1, where the NoIndicator VisualState is modified. You can do the same to the horizontal scroll bar if you need to.
ScrollViewer Style:
<ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{StaticResource ScrollBarStyle1}"/>
<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" BorderBrush="{ThemeResource ScrollBarTrackBorderThemeBrush}" BorderThickness="0,0,1,1" Background="{ThemeResource ScrollBarTrackBackgroundThemeBrush}" Grid.Column="1" Grid.Row="1"/>

Answer 2

To achieve expected result you need to change style of Scrollbar as scrollviewer is made of scrollbar.
Working scrollbar
<x:Double x:Key="ScrollBarMinThemeWidth">7</x:Double>
<x:Double x:Key="ScrollBarMinThemeHeight">7</x:Double>
<x:Double x:Key="ScrollBarPanningThumbThemeHeight">2.4</x:Double>
<x:Double x:Key="ScrollBarPanningThumbThemeWidth">2.4</x:Double>
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="{ThemeResource ScrollBarMinThemeWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ScrollBarMinThemeHeight}"/>
<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" Background="Red">
<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"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualState x:Name="TouchIndicator">
<!--<Storyboard>
<FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot"/>
<FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot"/>
</Storyboard>-->
</VisualState>
<VisualState x:Name="MouseIndicator"/>
<VisualState x:Name="NoIndicator">
<!--<Storyboard>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot"/>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot"/>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalPanningRoot" MinWidth="53">
<Rectangle x:Name="HorizontalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" HorizontalAlignment="Left" Height="{ThemeResource ScrollBarPanningThumbThemeHeight}" MinWidth="{ThemeResource ScrollBarMinThemeWidth}"/>
</Grid>
<Grid x:Name="VerticalPanningRoot" MinHeight="53">
<Rectangle x:Name="VerticalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" MinHeight="{ThemeResource ScrollBarMinThemeHeight}" VerticalAlignment="Top" Width="{ThemeResource ScrollBarPanningThumbThemeWidth}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ScrollViewer Height="300" Margin="30" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock FontSize="20" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum."/>
</ScrollViewer>
Result