如何编辑 ScrollViewer 滚动条的样式？

Question

我已经知道如何通过编辑模板的副本来编辑 ScrollViewer 的模板。但是如何编辑 Scrollbar-that's-inside-the-ScrollViewer 的样式？

_{（我想要的是按照答案中的建议更改其 FadeOut 动画的 BeginTime。我不想更改所有滚动条' 应用程序中的行为。）}

如果有某种方法可以在代码中而不是 XAML 中执行此操作，那就太好了。

Answer 1

首先编辑滚动条的样式模板并将其放置在您的页面资源中然后使用密钥 ("customScrollBar") 来识别此资源

Here 是要编辑的 ScrollBar 样式模板。

编辑适合您的开始时间。

<Storyboard>
    <FadeOutThemeAnimation BeginTime="1" TargetName="HorizontalPanningRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="VerticalPanningRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="HorizontalRoot" />
    <FadeOutThemeAnimation BeginTime="1" TargetName="VerticalRoot" />
</Storyboard>

并添加以下滚动查看器样式

 <Style x:Key="customScrollViewer" TargetType="ScrollViewer">
        <Setter Property="HorizontalScrollMode" Value="Auto" />
        <Setter Property="VerticalScrollMode" Value="Auto" />
        <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="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>
                                        <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" Style="{StaticResource customScrollBar}"
                                                 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}" />
                            <Border x:Name="ScrollBarSeparator"
              Grid.Row="1"
              Grid.Column="1"
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

请注意我是如何在上面的 ScrollViewer 中添加 "customScrollBar" 样式的。

如何编辑 ScrollViewer 滚动条的样式？

How to edit the Style of a Scrollbar of a ScrollViewer?

c#

xaml

win-universal-app

uwp

uwp-xaml