ScrollViewer in Windows 8: always show vertical scrollbar - xaml

Question

How always show vertical scrollbar in the scrollviewer?
It disappear in few seconds, but I want to make scroll visible all the time when scrolling is available
Thanks for any help

Answer 1

I think there might be a bug in the control in Windows 8 Consumer Preview, since the following should normally work:
<ScrollViewer
Style="{StaticResource VerticalScrollViewerStyle}"
VerticalScrollBarVisibility="Visible"
Template="{StaticResource ScrollViewerControlTemplate1}">
As a workaround you can modify the template of the ScrollViewer:
<ScrollViewer
Style="{StaticResource VerticalScrollViewerStyle}"
Template="{StaticResource ScrollViewerControlTemplate1}">
... elsewhere in some ResourceDictionary - the modified standard ScrollViewer template with the "NoIndicator" VisualState 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 it visible by editing the template of the VerticalScrollBar which is a part of the ScrollViewers template, which is itself a part of the ListBox template.
Set the Visibility of the VerticalScrollBar to Visible, set it's opacity to 100% then it will be permanently visible.

Answer 3

I have only developed store apps in HTML/CSS/JavaScript and I experienced the same problem there.
I wanted the scroll bars to always show even when moving the cursor away.
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