Creating a ScrollViewer ScrollBar is always visible by overriding or styling.

Question

I am trying to get the ScrollBar for the ScrollViewer to be always visible, so it appears not only when trying to scroll through a text view, and therefore the user knows that there is something else to view. At first, for some reason, I thought that I just needed to change the color that the brush requires, but actually the ScrollBar disappears and disappears, so I need to change the ScrollViewer or ScrollBar template.

I found the ScrollViewer template that I just posted in the App.Resources section, but I don’t know how to edit it, so the ScrollBar just displays 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 to remove various pieces of code, but as a result, the ScrollBar just disappears altogether.

Answer 1

To achieve the expected result, you need to change the Scrollbar style, since the scrollviewer is made from a scrollbar.

Scroll bar

  <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

Answer 2

Why don't you just set the VerticalScrollBarVisibility and / or HorizontalScrollBarVisibility your ScrollViewer instance to Visible , and not remove the style-fading behavior?

 <ScrollViewer VerticalScrollBarVisibility="Visible"> <!-- ScrollViewer Content --> </ScrollViewer> 

EDIT AFTER COMMENTS:

I think I came up with a “solution”. I'm not sure if this is the best way to achieve this, but it seems to give the result you want.

Create your own style for the ScrollViewer , then make one for the most vertical / horizontal ScrollBar (using Blend, as I previously expected). When 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 makes the ScrollBar disappear when it doesn't interact, meaning it will always be visible.

Here is the corresponding ScrollViewer XAML (I cannot fit all of this in response). Please note that ScrollViewer is configured to use my custom style ScrollViewerStyle1 , then in this style VerticalScrollBar set to my ScrollBar custom style ScrollBarCustomStyle1 , where NoIndicator VisualState changes. You can do the same with the horizontal scrollbar 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"/>