关注小程序 找一找教程网-随时随地学编程

Net Core教程

C# wpf ScrollBar自定义详解

文章目录

  • 前言
  • 一、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提供了大量能使我们快速便捷地处理数据的函数和方法。