自定义滚动条(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文件中开干。

下面是上图显示的窗体标题及滚动视图代码：

 <Grid Background="#FF222222">
         <Grid.RowDefinitions>
             <RowDefinition Height="60"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="0">
             <TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/>
         </Grid>
         <ScrollViewer Grid.Row="1">
             <Grid Height="1000"/>
         </ScrollViewer>
     </Grid>

下面是上面未添加样式时代码的效果：

除了标题还看得过去，滚动条丑到爆有木有？下面开始添加样式，即覆盖滚动条默认的样式：

 <Window.Resources>
         <ResourceDictionary>
             <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate>
                             <Grid x:Name="Grid">
                                 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
                                            Height="Auto" Fill="Transparent"/>
                                 <Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch" Width="Auto" Height="Auto"
                                         Background="{TemplateBinding Background}"/>
                             </Grid>
                             <ControlTemplate.Triggers>
                                 <Trigger Property="Tag" Value="Horizontal">
                                     <Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
                                     <Setter TargetName="Rectangle1" Property="Height" Value="7"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>

             <!--SCROLLBARS-->
             <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                 <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
                 <Setter Property="Foreground" Value="#AAA8341A"/>
                 <Setter Property="Background" Value="DarkGray"/>
                 <Setter Property="Width" Value="10"/>
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="{x:Type ScrollBar}">
                             <Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
                                 <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
                                     <Track.Thumb>
                                         <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
                                                Style="{DynamicResource ScrollThumbs}"/>
                                     </Track.Thumb>
                                     <Track.IncreaseRepeatButton>
                                         <RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
                                     </Track.IncreaseRepeatButton>
                                     <Track.DecreaseRepeatButton>
                                         <RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
                                     </Track.DecreaseRepeatButton>
                                 </Track>
                             </Grid>

                             <ControlTemplate.Triggers>
                                 <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
                                     <Setter Value="{DynamicResource ButtonSelectBrush}"
                                             TargetName="Thumb" Property="Background"/>
                                 </Trigger>
                                 <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
                                     <Setter Value="{DynamicResource DarkBrush}"
                                             TargetName="Thumb" Property="Background"/>
                                 </Trigger>

                                 <Trigger Property="IsEnabled" Value="False">
                                     <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
                                 </Trigger>
                                 <Trigger Property="Orientation" Value="Horizontal">
                                     <Setter TargetName="GridRoot" Property="LayoutTransform">
                                         <Setter.Value>
                                             <RotateTransform Angle="-90"/>
                                         </Setter.Value>
                                     </Setter>
                                     <Setter TargetName="PART_Track" Property="LayoutTransform">
                                         <Setter.Value>
                                             <RotateTransform Angle="-90"/>
                                         </Setter.Value>
                                     </Setter>
                                     <Setter Property="Width" Value="Auto"/>
                                     <Setter Property="Height" Value="12"/>
                                     <Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
                                     <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
                                     <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>
         </ResourceDictionary>
     </Window.Resources>

下面是整个MainWindow.xaml的代码，您直接copy到您的测试工程中就可以用了：

 <Window x:Class="ScrollBar.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:ScrollBar"
         mc:Ignorable="d"
         Title="MainWindow" Height="450" Width="300" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
     <Window.Resources>
         <ResourceDictionary>
             <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate>
                             <Grid x:Name="Grid">
                                 <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
                                            Height="Auto" Fill="Transparent"/>
                                 <Border x:Name="Rectangle1" CornerRadius="10 0 0 10" HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch" Width="Auto" Height="Auto"
                                         Background="{TemplateBinding Background}"/>
                             </Grid>
                             <ControlTemplate.Triggers>
                                 <Trigger Property="Tag" Value="Horizontal">
                                     <Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
                                     <Setter TargetName="Rectangle1" Property="Height" Value="7"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>

             <!--SCROLLBARS-->
             <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                 <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
                 <Setter Property="Foreground" Value="#AAA8341A"/>
                 <Setter Property="Background" Value="DarkGray"/>
                 <Setter Property="Width" Value="10"/>
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="{x:Type ScrollBar}">
                             <Grid x:Name="GridRoot" Width="12" Background="{x:Null}">
                                 <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
                                     <Track.Thumb>
                                         <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
                                                Style="{DynamicResource ScrollThumbs}"/>
                                     </Track.Thumb>
                                     <Track.IncreaseRepeatButton>
                                         <RepeatButton x:Name="PageUp" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="True"/>
                                     </Track.IncreaseRepeatButton>
                                     <Track.DecreaseRepeatButton>
                                         <RepeatButton x:Name="PageDown" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="True"/>
                                     </Track.DecreaseRepeatButton>
                                 </Track>
                             </Grid>

                             <ControlTemplate.Triggers>
                                 <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
                                     <Setter Value="{DynamicResource ButtonSelectBrush}"
                                             TargetName="Thumb" Property="Background"/>
                                 </Trigger>
                                 <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
                                     <Setter Value="{DynamicResource DarkBrush}"
                                             TargetName="Thumb" Property="Background"/>
                                 </Trigger>

                                 <Trigger Property="IsEnabled" Value="False">
                                     <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
                                 </Trigger>
                                 <Trigger Property="Orientation" Value="Horizontal">
                                     <Setter TargetName="GridRoot" Property="LayoutTransform">
                                         <Setter.Value>
                                             <RotateTransform Angle="-90"/>
                                         </Setter.Value>
                                     </Setter>
                                     <Setter TargetName="PART_Track" Property="LayoutTransform">
                                         <Setter.Value>
                                             <RotateTransform Angle="-90"/>
                                         </Setter.Value>
                                     </Setter>
                                     <Setter Property="Width" Value="Auto"/>
                                     <Setter Property="Height" Value="12"/>
                                     <Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
                                     <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
                                     <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
                                 </Trigger>
                             </ControlTemplate.Triggers>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>
         </ResourceDictionary>
     </Window.Resources>
     <Grid Background="#FF222222">
         <Grid.RowDefinitions>
             <RowDefinition Height="60"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="0">
             <TextBlock Margin="10" Text="Custom ScrollBar" Foreground="#FFEEEEEE" FontSize="33" FontFamily="Script MT Bold" VerticalAlignment="Center"/>
         </Grid>
         <ScrollViewer Grid.Row="1">
             <Grid Height="1000"/>
         </ScrollViewer>
     </Grid>
 </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主题