WPF 滚动条ScrollViewer样式记录

WPF 应用程序中有两个支持滚动的预定义元素：ScrollBar 和 ScrollViewer。 ScrollViewer 控件封装了水平和垂直 ScrollBar 元素以及一个内容容器（如 Panel 元素），以便在可滚动的区域中显示其他可见元素。 必须生成自定义对象才能使用 ScrollBar 元素实现内容滚动。 不过，可以单独使用 ScrollViewer 元素，因为它是一个封装了 ScrollBar 功能的复合控件。

 

 

 

Thumb 样式

<Style x:Key="ScrollThumbStyle" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Rectangle Width="8" Fill="#4CFFFFFF" RadiusX="2" RadiusY="2">
                    </Rectangle>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ScrollBar 样式

<Style x:Key="ScrollBarStyle" TargetType="ScrollBar">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollBar">
                    <Grid Width="18" Margin="0"  x:Name="GridRoot">
                        <Track Margin="0,2" HorizontalAlignment="Right" Name="PART_Track" Width="14" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}"
                                    Value="{TemplateBinding Value}"  IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Template="{StaticResource ScrollBackgroundStyle}" Command="ScrollBar.LineUpCommand" x:Name="IncreaseRepeat" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Template="{StaticResource ScrollBackgroundStyle}" Command="ScrollBar.LineDownCommand" x:Name="DecreaseRepeat" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollThumbStyle}" >
                                </Thumb>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                    <!-- 它对 ScrollBar 使用一个模板，并将其旋转为“水平”
                    它还会更改命令，使其执行“向左”和“向右”命令，而不是执行“向上”和“向下”命令 -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Horizontal">

                            <!-- 将 ScrollBar 从“垂直”旋转为“水平” -->
                            <Setter Property="LayoutTransform" TargetName="GridRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90" />
                                </Setter.Value>
                            </Setter>

                            <!-- Track 在内部绑定到“方向”，因此我们需要将其旋转回“垂直” -->
                            <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical" />

                            <!-- 更改命令，以执行“水平”命令 -->
                            <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat" />
                            <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ScrollViewer 样式

<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                        <Grid Background="{TemplateBinding Background}">
                            <ScrollContentPresenter  Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <ScrollBar x:Name="PART_VerticalScrollBar"
                                       HorizontalAlignment="Right"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       Style="{StaticResource ScrollBarStyle}"
                                       ViewportSize="{TemplateBinding ViewportHeight}"
                                       Value="{TemplateBinding VerticalOffset}"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                            <ScrollBar x:Name="PART_HorizontalScrollBar"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Style="{StaticResource ScrollBarStyle}"
                                       VerticalAlignment="Bottom"
                                       Value="{TemplateBinding HorizontalOffset}"
                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

效果：