通过覆盖或样式使ScrollViewer的ScrollBar始终可见
我正在尝试让ScrollViewer的ScrollBar始终可见，因此它不仅会在我尝试滚动文本视图时出现，因此用户知道还有更多要查看的内容。 起初，由于某种原因，我认为我只需要更改需要刷子覆盖的颜色，但实际上，ScrollBar正在淡入淡出，因此需要更改ScrollViewer或ScrollBar的模板。
我找到了ScrollViewer的模板，我刚放在App.Resources部分，但我不知道如何编辑它，所以ScrollBar一直都是可见的：
<Style 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="Enabled" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="VerticalScrollBarVisibility" 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">
<VisualStateGroup.Transitions>
<VisualTransition From="MouseIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
Storyboard.TargetProperty="IndicatorMode">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
Storyboard.TargetProperty="IndicatorMode">
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="TouchIndicator" To="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
Storyboard.TargetProperty="IndicatorMode">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
Storyboard.TargetProperty="IndicatorMode">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<ScrollingIndicatorMode>None</ScrollingIndicatorMode>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
</Storyboard>
</VisualState>
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeInThemeAnimation 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}"
Orientation="Vertical"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{TemplateBinding VerticalOffset}"
ViewportSize="{TemplateBinding ViewportHeight}"
HorizontalAlignment="Right"/>
<ScrollBar x:Name="HorizontalScrollBar"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Grid.Row="1"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}" />
<!-- Change the opacity below, to zero. otherwise, the right and bottom border end up showing up as a single pixel lit on the screen even if the scroll is disabled. -->
<Border x:Name="ScrollBarSeparator"
Grid.Row="1"
Grid.Column="1"
Opacity="0"
BorderThickness="0,0,1,1"
Background="{StaticResource ScrollBarTrackBackgroundThemeBrush}"
BorderBrush="{StaticResource ScrollBarTrackBorderThemeBrush}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我尝试删除代码的各个部分，但结果是，ScrollBar完全消失了。
2 个答案:
答案 0 :(得分：4)
为什么不将VerticalScrollBarVisibility的{{1}}和/或HorizontalScrollBarVisibility ScrollViewer设置为Visible，而不是删除褪色风格的行为？
<ScrollViewer VerticalScrollBarVisibility="Visible">
<!-- ScrollViewer Content -->
</ScrollViewer>
评论后编辑：
我想我想出了一个＆＃34;解决方案＆＃34;。我不确定它是否是实现这一目标的最佳方式，但似乎可以提供您想要的结果。
为ScrollViewer创建一个自定义样式，然后为垂直/水平ScrollBar本身创建一个（使用Blend，这是我之前所假设的）。
获得默认样式的副本后，请编辑以下行：
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0" TargetName="HorizontalPanningRoot"/>
<FadeOutThemeAnimation BeginTime="0" TargetName="VerticalPanningRoot"/>
<Fade**In**ThemeAnimation BeginTime="0" TargetName="HorizontalRoot"/>
<Fade**In**ThemeAnimation BeginTime="0" TargetName="VerticalRoot"/>
</Storyboard>
</VisualState>
我的猜测是，这会导致ScrollBar在未与其互动时淡入，这意味着它始终可见。
这里是相关的ScrollViewer XAML（我无法在答案中完成整个过程）。请注意，ScrollViewer设置为使用我的自定义样式ScrollViewerStyle1，然后在该样式中VerticalScrollBar设置为我的ScrollBar自定义样式ScrollBarCustomStyle1，其中NoIndicator VisualState }被修改了。如果需要，您可以对水平滚动条执行相同操作。
ScrollViewer样式：
<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}" Style="{StaticResource ScrollBarStyle1}"/>
<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" BorderBrush="{ThemeResource ScrollBarTrackBorderThemeBrush}" BorderThickness="0,0,1,1" Background="{ThemeResource ScrollBarTrackBackgroundThemeBrush}" Grid.Column="1" Grid.Row="1"/>
答案 1 :(得分：3)
要获得预期效果，您需要更改滚动条的样式，因为滚动条是由滚动条组成的。
工作滚动条
<x:Double x:Key="ScrollBarMinThemeWidth">7</x:Double>
<x:Double x:Key="ScrollBarMinThemeHeight">7</x:Double>
<x:Double x:Key="ScrollBarPanningThumbThemeHeight">2.4</x:Double>
<x:Double x:Key="ScrollBarPanningThumbThemeWidth">2.4</x:Double>
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="{ThemeResource ScrollBarMinThemeWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ScrollBarMinThemeHeight}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Root" Background="Red">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualState x:Name="TouchIndicator">
<!--<Storyboard>
<FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot"/>
<FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot"/>
</Storyboard>-->
</VisualState>
<VisualState x:Name="MouseIndicator"/>
<VisualState x:Name="NoIndicator">
<!--<Storyboard>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot"/>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot"/>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalPanningRoot" MinWidth="53">
<Rectangle x:Name="HorizontalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" HorizontalAlignment="Left" Height="{ThemeResource ScrollBarPanningThumbThemeHeight}" MinWidth="{ThemeResource ScrollBarMinThemeWidth}"/>
</Grid>
<Grid x:Name="VerticalPanningRoot" MinHeight="53">
<Rectangle x:Name="VerticalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" MinHeight="{ThemeResource ScrollBarMinThemeHeight}" VerticalAlignment="Top" Width="{ThemeResource ScrollBarPanningThumbThemeWidth}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ScrollViewer Height="300" Margin="30" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock FontSize="20" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum."/>
</ScrollViewer>
<强>结果
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？