ScrollViewer in Windows 8: always show vertical scrollbar

问题

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

回答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>

回答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.

回答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

来源：https://stackoverflow.com/questions/10602896/scrollviewer-in-windows-8-always-show-vertical-scrollbar