自定义滚动条(Custom ScrollBar)
Posted dotnet9-com
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义滚动条(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主题
以上是关于自定义滚动条(Custom ScrollBar)的主要内容，如果未能解决你的问题，请参考以下文章
malihu 自定义滚动条插件不适用于 Electron.js