如何編輯ScrollViewer滾動條的樣式？

Question

我已經知道如何通過編輯ScrollViewer模板的副本來編輯它的模板。 但是，如何編輯Scrollbar-位於ScrollViewer的樣式內？

_{（我想按照此答案中的建議更改其FadeOut動畫的BeginTime 。我不想更改應用程序中所有Scrollbar的行為。）}

如果有某種方法可以用代碼而不是XAML來做到這一點，那就太好了。

Answer 1

首先編輯滾動條的樣式模板並將其放置在頁面資源中，然后使用鍵（“ customScrollBar”）標識此資源

這是要編輯的ScrollBar樣式模板。

用適合您的開始時間進行編輯。

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

並添加以下scrollviewer樣式

 <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”樣式的。