文章目录

• 前言
• 一、ScrollBar的组成
• • 1.纵向滚动条
  • 2.横向滚动条
• 二、如何自定义？
• • 1.行按钮
  • • （1）上行按钮
    • （2）下行按钮
    • （3）左行按钮
    • （4）右行按钮
  • 2.页按钮
  • • （1）上页按钮
    • （2）下页按钮
    • （3）左页按钮
    • （4）右页按钮
  • 3.滑块
  • 4.轨道
  • • （1）纵向轨道
    • （2）横向轨道
• 三、具体步骤
• • 1.确定参数
  • 2.定义Style
  • • （1）定义触发器
    • （2）绑定参数
    • （3）绑定Template
    • 示例代码
  • 3.定义Template
  • • （1）纵向Template
    • （2）横向Template
• 四、如何使用？
• • 1.定义Style
  • 2.设置参数
  • 示例代码
• 五、具体例子
• • 1.仿移动端滚动条
  • 2.音量调节滚动条
  • 3.加减按钮滚动条
• 总结

前言

一、ScrollBar的组成

ScrollBar由6个部分组成。两个行按钮、两个页按钮、一个滑块、一个轨道。

1.纵向滚动条

一个简单的纵向滚动条如下：

纵向滚动组成如下：

2.横向滚动条

对于横向滚动条的组成部分也是一样的，相当于纵向滚动条顺时针旋转90度，这里不做具体说明。

二、如何自定义？

1.行按钮

行按钮可以是任意按钮类型，且在ScrollBar内不受布局位置的限制，可以任意摆放。标识行按钮的方式是Command绑定ScrollBar的LineCommand。
LineCommand有4种分别是：LineUpCommand、LineDownCommand、LineLeftCommand、LineRightCommand，共4个方向，分别两两对于纵向和横向的ScrollBar。
代码如下（示例）：

（1）上行按钮

绑定ScrollBar.LineUpCommand即为上行按钮。

<RepeatButton Command="ScrollBar.LineUpCommand" />  

（2）下行按钮

绑定ScrollBar.LineDownCommand即为上行按钮。

<RepeatButton Command="ScrollBar.LineDownCommand" />

（3）左行按钮

绑定ScrollBar.LineLeftCommand即为上行按钮。

<RepeatButton Command="ScrollBar.LineLeftCommand" />

（4）右行按钮

绑定ScrollBar.LineRightCommand即为上行按钮。

<RepeatButton Command="ScrollBar.LineRightCommand" />

2.页按钮

页按钮相对于行按钮有布局的要求，需要放在Track标签的Track.DecreaseRepeatButton或中Track.IncreaseRepeatButton标签中（Track是轨道标签第4节会说明）。
页按钮只能是RepeatButton类型，并且Command绑定ScrollBar的PageCommand。PageCommand有4钟，分别是LineUpCommand、LineDownCommand、LineLeftCommand、LineRightCommand，共4个方向，分别两两对于纵向和横向的ScrollBar。
代码如下（示例）：

（1）上页按钮

放在Track.DecreaseRepeatButton标签里并绑定ScrollBar.PageUpCommand即为上页按钮。

<Track.DecreaseRepeatButton>
    <RepeatButton Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>

（2）下页按钮

放在Track.IncreaseRepeatButton标签里并绑定ScrollBar.PageDownCommand即为下页按钮。

<Track.IncreaseRepeatButton>
    <RepeatButton Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>

（3）左页按钮

放在Track.DecreaseRepeatButton标签里并绑定ScrollBar.PageLeftCommand即为上页按钮。

<Track.DecreaseRepeatButton>
    <RepeatButton Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>

（4）右页按钮

放在Track.IncreaseRepeatButton标签里并绑定ScrollBar.PageRightCommand即为下页按钮。

<Track.IncreaseRepeatButton>
    <RepeatButton Command="ScrollBar.PageRightCommand" />    
</Track.IncreaseRepeatButton>

3.滑块

滑块必须是Thumb类型的标签，位置页必须放在Track的Track.Thumb子标签中（Track是轨道标签第4节会说明）。Thumb有Template属性，所以可以自定义样式。

<Track.Thumb>
    <Thumb/>      
</Track.Thumb>

Thumb的长度是自动计算的。其计算公式是：

thumbSize = (viewportSize/(maximum–minimum+viewportSize))×trackLength

如果想要Thumb固定长度，直接设置是没有效果的，必须先将Track的ViewportSize设置为NaN：

<Track ViewportSize="NaN" /> 

注：Thumb的长度是指，纵向滚动条Thumb的Height、横向滚动条Thumb的Width

4.轨道

ScrollBar的轨道是Track类型的标签，Track中包含了三部分：DecreaseRepeatButton、Thumb、IncreaseRepeatButton，分别对应页按钮和滑块。Track的Name属性必须设为 “PART_Track”，否则内部的按钮是无法控制滚动条的。

（1）纵向轨道

<Track Name="PART_Track"  >
    <Track.DecreaseRepeatButton>
        <RepeatButton Command="ScrollBar.PageUpCommand"/>
    </Track.DecreaseRepeatButton>
    <Track.Thumb>
        <Thumb/>
    </Track.Thumb>
    <Track.IncreaseRepeatButton>
        <RepeatButton  Command="ScrollBar.PageRightCommand"/>
    </Track.IncreaseRepeatButton>
</Track>

（2）横向轨道

<Track  Name="PART_Track"  >
    <Track.DecreaseRepeatButton>
        <RepeatButton Command="ScrollBar.PageLeftCommand"/>
    </Track.DecreaseRepeatButton>
    <Track.Thumb>
        <Thumb/>
    </Track.Thumb>
    <Track.IncreaseRepeatButton>
        <RepeatButton  Command="ScrollBar.PageRightCommand"/>
    </Track.IncreaseRepeatButton>
</Track>

三、具体步骤

1.确定参数

第一步需要确定有哪些参数是可以自己控制的，否则将缺乏灵活性。比如有两个页面需要滚动条，样式是一样的，唯一的区别是滑块宽度不同，为此自定义两个不同的滚动条，显然是不合理的。更好的做法应该是，设置一个滑块宽度的参数，在不同页面使用不同的参数。
参数的定义可以根据具体使用需求，以及对ScrollBar可拓展性要求来确定。
一般可定义如下参数（示例）：

<!--纵向滚动条宽度-->
<sys:Double x:Key="VerticalScrollBarThickness">4</sys:Double>
<!--纵向轨道背景色-->
<SolidColorBrush x:Key="VerticalTrackBackgroundBrush" Color="White" />
<!--纵向滑块颜色-->
<SolidColorBrush x:Key="VerticalTrackThumbBackgroundBrush" Color="#cccccc" />
<!--纵向滑块圆角-->
<CornerRadius x:Key="VerticalThumbCornerRadius" ></CornerRadius>

<!--横向滚动条宽度-->
<sys:Double x:Key="HorizontalScrollBarThickness">4</sys:Double>
<!--横向轨道背景色-->
<SolidColorBrush x:Key="HorizontalTrackBackgroundBrush" Color="White" />
<!--横向滑块颜色-->
<SolidColorBrush x:Key="HorizontalTrackThumbBackgroundBrush" Color="#cccccc" />
<!--横向滑块圆角-->
<CornerRadius x:Key="HorizontalThumbCornerRadius"  ></CornerRadius>

2.定义Style

常规方法中，带ScrollBar的控件是无法获取到其ScrollBar对象并通过标签设置其属性的。在Style中自定义ScrollBar是比较好的方式。
定义Style标签有如下步骤：

（1）定义触发器

定义两个触发器，判段Orientation的属性，值为Vertical则设置纵向滚动条相关的属性值，反之值为Horizontal则设置横向向滚动条相关的属性值。

（2）绑定参数

在上一节中有定义一些参数。在Style中就需要使用这些参数，一定要使用DynamicResource 去引用参数对象，否则将无法在页面使用时重新赋值。

（3）绑定Template

编写两个Template分别为VerticalScrollBar、HorizontalScrollBar（下一节有具体说明）。根据ScrollBar的Orientation属性来分别绑定不同的Template。

示例代码

<Style x:Key="ScrollStyle_Example" TargetType="ScrollBar">
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Width" Value="Auto" />
            <Setter Property="Height" Value="{DynamicResource HorizontalScrollBarThickness}" />
            <Setter Property="Template" Value="{DynamicResource HorizontalScrollBar}" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Width" Value="{DynamicResource VerticalScrollBarThickness}" />
            <Setter Property="Height" Value="Auto" />
            <Setter Property="Template" Value="{DynamicResource VerticalScrollBar}" />
        </Trigger>
    </Style.Triggers>
</Style>

3.定义Template

一个完整的ScrollBar.Template有6个部分，即文章开头提到的：两个行按钮、两个页按钮、一个滑块、一个轨道。

（1）纵向Template

对于纵向的Template代码如下（示例）：

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type RangeBase}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="40"/>
                <RowDefinition Height="*"/>
                <RowDefinition MaxHeight="40"/>
            </Grid.RowDefinitions>
             <!--上行按钮-->
            <RepeatButton  Command="ScrollBar.LineUpCommand"/>
             <!--轨道-->
            <Track Name="PART_Track" Grid.Row="1">
                <Track.DecreaseRepeatButton>
                    <!--上页按钮-->
                    <RepeatButton Command="ScrollBar.PageUpCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <!--滑块-->
                    <Thumb />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <!--下页按钮-->
                    <RepeatButton Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <!--下行按钮-->
            <RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand"/>
        </Grid>
 </ControlTemplate>

（2）横向Template

对于横向的Template代码如下（示例）：

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type RangeBase}">
        <Grid>
           <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition  Width="40"/>
            </Grid.ColumnDefinitions>
            <!--左行按钮-->
            <RepeatButton  Command="ScrollBar.LineLeftCommand"/>
            <!--轨道-->
            <Track Name="PART_Track" Grid.Column="1">
                <Track.DecreaseRepeatButton>
                    <!--左页按钮-->
                    <RepeatButton Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <!--滑块-->
                    <Thumb />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <!--右页按钮-->
                    <RepeatButton Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <!--右行按钮-->
            <RepeatButton Grid.Column="2" Command="ScrollBar.LineRightCommand"/>
        </Grid>
</ControlTemplate>

四、如何使用？

在Resources标签中使用自定义滚动条。

1.定义Style

定义一个新的StyleTargetType为ScrollBar，BasedOn上述自定义的ScrollBar Style，不能设置x:key值。

<Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollStyle_Example}"></Style>

2.设置参数

根据第三章第1小节确定的参数，设置需要的参数值。比如将纵向滚动条宽度设为4像素：

<sys:Double x:Key="VerticalScrollBarThickness">4</sys:Double>

示例代码

以ListBox为例：

<ListBox>
    <ListBox.Resources>
        <!--替换ListBox中滚动条的样式-->
        <Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollStyle_Gray}"></Style>
        <!--纵向滚动条宽度为4像素-->
        <sys:Double x:Key="VerticalScrollBarThickness">4</sys:Double>
        <!--横向滚动条高度为4像素-->
        <sys:Double x:Key="HorizontalScrollBarThickness">4</sys:Double>
    </ListBox.Resources>
</ListBox>

五、具体例子

1.仿移动端滚动条

2.音量调节滚动条

3.加减按钮滚动条

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。