自定义滚动条(Custom ScrollBar)
作者：互联网
时间如流水，只能流去不流回！
点赞再看，养成习惯，这是您给我创作的动力！
本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。
阅读导航：
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
设计师给的效果图中，滚动条的样式好好看呀，但是手上现有的控件库不好改呀，那我自己重新实现样式吧。
三、代码实现
小编使用.Net Core 3.1创建的WPF工程，创建名称为“ScrollBar”的解决方案后，不添加任何用户控件，直接在MainWindow.xaml文件中开干。
下面是上图显示的窗体标题及滚动视图代码：
1 <Grid Background="#FF222222"> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="60"/> 4 <RowDefinition Height="*"/> 5 </Grid.RowDefinitions> 6 <Grid Grid.Row="0"> 7 <TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/> 8 </Grid> 9 <ScrollViewer Grid.Row="1"> 10 <Grid Height="1000"/> 11 </ScrollViewer> 12 </Grid>
下面是上面未添加样式时代码的效果：
除了标题还看得过去，滚动条丑到爆有木有？下面开始添加样式，即覆盖滚动条默认的样式：
1 <Window.Resources>
2 <ResourceDictionary>
3 <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
4 <Setter Property="Template">
5 <Setter.Value>
6 <ControlTemplate>
7 <Grid x:Name="Grid">
8 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
9 Height="Auto" Fill="Transparent"/>
10 <Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
11 VerticalAlignment="Stretch" Width="Auto" Height="Auto"
12 Background="{TemplateBinding Background}"/>
13 </Grid>
14 <ControlTemplate.Triggers>
15 <Trigger Property="Tag" Value="Horizontal">
16 <Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
17 <Setter TargetName="Rectangle1" Property="Height" Value="7"/>
18 </Trigger>
19 </ControlTemplate.Triggers>
20 </ControlTemplate>
21 </Setter.Value>
22 </Setter>
23 </Style>
24
25 <!--SCROLLBARS-->
26 <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
27 <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
28 <Setter Property="Foreground" Value="#AAA8341A"/>
29 <Setter Property="Background" Value="DarkGray"/>
30 <Setter Property="Width" Value="10"/>
31 <Setter Property="Template">
32 <Setter.Value>
33 <ControlTemplate TargetType="{x:Type ScrollBar}">
34 <Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
35 <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
36 <Track.Thumb>
37 <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
38 Style="{DynamicResource ScrollThumbs}"/>
39 </Track.Thumb>
40 <Track.IncreaseRepeatButton>
41 <RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
42 </Track.IncreaseRepeatButton>
43 <Track.DecreaseRepeatButton>
44 <RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
45 </Track.DecreaseRepeatButton>
46 </Track>
47 </Grid>
48
49 <ControlTemplate.Triggers>
50 <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
51 <Setter Value="{DynamicResource ButtonSelectBrush}"
52 TargetName="Thumb" Property="Background"/>
53 </Trigger>
54 <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
55 <Setter Value="{DynamicResource DarkBrush}"
56 TargetName="Thumb" Property="Background"/>
57 </Trigger>
58
59 <Trigger Property="IsEnabled" Value="False">
60 <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
61 </Trigger>
62 <Trigger Property="Orientation" Value="Horizontal">
63 <Setter TargetName="GridRoot" Property="LayoutTransform">
64 <Setter.Value>
65 <RotateTransform Angle="-90"/>
66 </Setter.Value>
67 </Setter>
68 <Setter TargetName="PART_Track" Property="LayoutTransform">
69 <Setter.Value>
70 <RotateTransform Angle="-90"/>
71 </Setter.Value>
72 </Setter>
73 <Setter Property="Width" Value="Auto"/>
74 <Setter Property="Height" Value="12"/>
75 <Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
76 <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
77 <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
78 </Trigger>
79 </ControlTemplate.Triggers>
80 </ControlTemplate>
81 </Setter.Value>
82 </Setter>
83 </Style>
84 </ResourceDictionary>
85 </Window.Resources>
下面是整个MainWindow.xaml的代码，您直接copy到您的测试工程中就可以用了：
1 <Window x:Class="ScrollBar.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 xmlns:local="clr-namespace:ScrollBar"
7 mc:Ignorable="d"
8 Title="MainWindow" Height="450" Width="300" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
9 <Window.Resources>
10 <ResourceDictionary>
11 <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
12 <Setter Property="Template">
13 <Setter.Value>
14 <ControlTemplate>
15 <Grid x:Name="Grid">
16 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
17 Height="Auto" Fill="Transparent"/>
18 <Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
19 VerticalAlignment="Stretch" Width="Auto" Height="Auto"
20 Background="{TemplateBinding Background}"/>
21 </Grid>
22 <ControlTemplate.Triggers>
23 <Trigger Property="Tag" Value="Horizontal">
24 <Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
25 <Setter TargetName="Rectangle1" Property="Height" Value="7"/>
26 </Trigger>
27 </ControlTemplate.Triggers>
28 </ControlTemplate>
29 </Setter.Value>
30 </Setter>
31 </Style>
32
33 <!--SCROLLBARS-->
34 <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
35 <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
36 <Setter Property="Foreground" Value="#AAA8341A"/>
37 <Setter Property="Background" Value="DarkGray"/>
38 <Setter Property="Width" Value="10"/>
39 <Setter Property="Template">
40 <Setter.Value>
41 <ControlTemplate TargetType="{x:Type ScrollBar}">
42 <Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
43 <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
44 <Track.Thumb>
45 <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
46 Style="{DynamicResource ScrollThumbs}"/>
47 </Track.Thumb>
48 <Track.IncreaseRepeatButton>
49 <RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
50 </Track.IncreaseRepeatButton>
51 <Track.DecreaseRepeatButton>
52 <RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
53 </Track.DecreaseRepeatButton>
54 </Track>
55 </Grid>
56
57 <ControlTemplate.Triggers>
58 <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
59 <Setter Value="{DynamicResource ButtonSelectBrush}"
60 TargetName="Thumb" Property="Background"/>
61 </Trigger>
62 <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
63 <Setter Value="{DynamicResource DarkBrush}"
64 TargetName="Thumb" Property="Background"/>
65 </Trigger>
66
67 <Trigger Property="IsEnabled" Value="False">
68 <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
69 </Trigger>
70 <Trigger Property="Orientation" Value="Horizontal">
71 <Setter TargetName="GridRoot" Property="LayoutTransform">
72 <Setter.Value>
73 <RotateTransform Angle="-90"/>
74 </Setter.Value>
75 </Setter>
76 <Setter TargetName="PART_Track" Property="LayoutTransform">
77 <Setter.Value>
78 <RotateTransform Angle="-90"/>
79 </Setter.Value>
80 </Setter>
81 <Setter Property="Width" Value="Auto"/>
82 <Setter Property="Height" Value="12"/>
83 <Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
84 <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
85 <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
86 </Trigger>
87 </ControlTemplate.Triggers>
88 </ControlTemplate>
89 </Setter.Value>
90 </Setter>
91 </Style>
92 </ResourceDictionary>
93 </Window.Resources>
94 <Grid Background="#FF222222">
95 <Grid.RowDefinitions>
96 <RowDefinition Height="60"/>
97 <RowDefinition Height="*"/>
98 </Grid.RowDefinitions>
99 <Grid Grid.Row="0">
100 <TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/>
101 </Grid>
102 <ScrollViewer Grid.Row="1">
103 <Grid Height="1000"/>
104 </ScrollViewer>
105 </Grid>
106 </Window>
四、文章参考
参考：
Design com WPF ： https://www.youtube.com/watch?v=aQeXth-1B0I&t=350s
五、代码下载
文章中代码已经全部贴出，自定义滚动条，主要是改变滚动条的Track样式，也即Track的Thumb、IncreaseRepeatButton、DecreaseRepeatButton三个成员的样式，您get到了吗？
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/2019/12/it-technology/csharp/wpf/custom-scrollbar.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。
本站使用 wpcom 的 JustNews主题
标签：Dotnet9,自定义,样式,代码,滚动条,ScrollBar,dotnet9,com 来源： https://www.cnblogs.com/Dotnet9-com/p/12077686.html