ScrollViewer on Windows 8: always show vertical scrollbar

Question

How to always show vertical scrollbar in scrollviewer?

It disappears after a few seconds, but I want the scroll to be displayed all the time when the scroll is available

Thanks for any help

Answer 1

I think there might be a bug in the control in the Windows 8 Consumer Preview, as the following should usually work:

<ScrollViewer Style="{StaticResource VerticalScrollViewerStyle}" VerticalScrollBarVisibility="Visible" Template="{StaticResource ScrollViewerControlTemplate1}"> 

As a workaround, you can change the ScrollViewer template:

 <ScrollViewer Style="{StaticResource VerticalScrollViewerStyle}" Template="{StaticResource ScrollViewerControlTemplate1}"> 

... elsewhere in ResourceDictionary - removed the modified standard ScrollViewer template with the VisualState "NoIndicator" removed.

  <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="ScrollViewer"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ScrollingIndicatorStates"> <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" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="1,0,0,0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" HorizontalAlignment="Right" /> <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="0,1,0,0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" /> <Rectangle x:Name="ScrollBarSeparator" Grid.Row="1" Grid.Column="1" Margin="1,1,0,0" StrokeThickness="1" Fill="{StaticResource ScrollBarTrackBrush}" Stroke="{StaticResource ScrollBarTrackBorderBrush}" /> </Grid> </Border> </ControlTemplate> 

Answer 2

In Blend: You can make this visible by editing the VerticalScrollBar template, which is part of the ScrollViewers template, which itself is part of the ListBox template.

Set the visibility to VerticalScrollBar to Visible , set the opacity to 100% , then it will be constantly visible.

Answer 3

I only have store apps in HTML / CSS / JavaScript, and I ran into the same problem.

I wanted the scroll bars to always be displayed even when moving the cursor.

I found this solution in CSS:

 div#overflowableDiv{ overflow-y: auto; -ms-overflow-style: scrollbar; } 

See: http://msdn.microsoft.com/en-us/library/windows/apps/hh441298.aspx