ScrollViewer in Windows 8: always show vertical scrollbar

windows-8, windows-runtime, winrt-xaml, xaml

Solution

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>

Problem

Original source