通过覆盖或样式使ScrollViewer的ScrollBar始终可见

Question

我正在尝试让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完全消失了.

Answer 1

为了达到预期的结果，您需要更改滚动条的样式，因为滚动查看器是由滚动条组成的。

工作滚动条

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

结果