其他分享
首页 > 其他分享> > 自定义滚动条(Custom ScrollBar)

自定义滚动条(Custom ScrollBar)

作者:互联网

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。

阅读导航:

一、先看效果

自定义滚动条(Custom ScrollBar)

二、本文背景

设计师给的效果图中,滚动条的样式好好看呀,但是手上现有的控件库不好改呀,那我自己重新实现样式吧。

三、代码实现

小编使用.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>

 

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

自定义滚动条(Custom ScrollBar)

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

 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_com”添加关注

 

如有收获,请大力转发,给Dotnet9赞助和支持,谢谢大家对dotnet技术的关注和支持 。

本站使用 wpcom 的 JustNews主题

标签:Dotnet9,自定义,样式,代码,滚动条,ScrollBar,dotnet9,com
来源: https://www.cnblogs.com/Dotnet9-com/p/12077686.html