Windows 8 中的 ScrollViewer：始终显示垂直滚动条答案

【问题标题】：ScrollViewer in Windows 8: always show vertical scrollbarWindows 8 中的 ScrollViewer：始终显示垂直滚动条
【发布时间】：2012-05-15 14:25:49
【问题描述】：

如何总是在滚动查看器中显示垂直滚动条？

它会在几秒钟内消失，但我想让滚动可用时一直可见

感谢您的帮助

【问题讨论】：

标签： xaml windows-8 windows-runtime winrt-xaml

【解决方案1】：

我认为 Windows 8 Consumer Preview 中的控件可能存在错误，因为以下内容应该正常工作：

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

作为一种解决方法，您可以修改 ScrollViewer 的模板：

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

... ResourceDictionary 中的其他地方 - 修改后的标准 ScrollViewer 模板，删除了“NoIndicator”VisualState。

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

【讨论】：

你如何为 wp8 做到这一点？它在FadeOutThemeAnimation 上给出错误
我会尝试提取 ScrollViewer 的模板，看看是否有任何可以修改的内容以获得该效果。模板不跨平台兼容。或者，您可以实现自己的指标。

【解决方案2】：

在混合中：您可以通过编辑 VerticalScrollBar 的模板使其可见，该模板是 ScrollViewers 模板的一部分，该模板本身也是 ListBox 模板的一部分。

将 VerticalScrollBar 的 Visibility 设置为 Visible，将其不透明度设置为 100%，然后它将永久可见。

【讨论】：

【解决方案3】：

我只用 HTML/CSS/JavaScript 开发了商店应用程序，我在那里遇到了同样的问题。

我希望滚动条即使在将光标移开时也始终显示。

我在 CSS 中找到了这个解决方案：

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

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

【讨论】：