如何始终显示滚动条?

本文介绍了如何始终显示滚动条?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何在 UWP 应用中始终显示滚动条?

How to always show the scrollbar in a UWP app?

滚动条总是在几秒钟后消失.

The scrollbar always disappears after a few seconds.

我已尝试设置 ScrollViewer.VerticalScrollBarVisibility="Visible"，但滚动条仍然消失.

I have tried setting ScrollViewer.VerticalScrollBarVisibility="Visible", but the scrollbar still disappears.

我查看了 Xaml UI 基础示例，不管我设置了什么属性，滚动条也会在这里消失.

I have had a look at the Xaml UI Basics sample, and the scroll bars also disappear here regardless of what properties I set.

此答案适用于 Windows Phone 8 建议修改滚动查看器模板，但这似乎有点过分.

This answer for Windows Phone 8 suggests modifying the scroll viewer template, but that seems like overkill.

有什么想法吗?

推荐答案

对于 UWP 使用此样式

For UWP use this style

<!-- In default here i enabled horizontal scrollbar visibility and mode you can disable it if you want --> <Style x:Key="MyScrollViewerStyle" TargetType="ScrollViewer"> <Setter Property="HorizontalScrollMode" Value="Enabled"/> <Setter Property="VerticalScrollMode" Value="Enabled"/> <Setter Property="IsHorizontalRailEnabled" Value="True"/> <Setter Property="IsVerticalRailEnabled" Value="True"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="ZoomMode" Value="Disabled"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="VerticalScrollBarVisibility" Value="Visible"/> <Setter Property="HorizontalScrollBarVisibility" Value="Visible"/> <Setter Property="Padding" Value="0"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ScrollViewer"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ScrollingIndicatorStates"> <VisualState x:Name="TouchIndicator"> <Storyboard> <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="MouseIndicator"> <Storyboard> <FadeInThemeAnimation TargetName="ScrollBarSeparator"/> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar"> <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.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/> <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/> <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/> <Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="1" Grid.Row="1"/> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

然后在您的滚动查看器中引用它

Then reference it in your scrollviewer

<ScrollViewer Style="{StaticResource MyScrollViewerStyle}" Height="680" Width="480" HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Source="/Assets/wallpaper.jpg"/> <!-- or your items --> </ScrollViewer>