在C# WPF下自定义滚动条ScrollViewer样式的操作

315 阅读 0 评论 208 点赞

我是靠谱客的博主激情蜻蜓，这篇文章主要介绍在C# WPF下自定义滚动条ScrollViewer样式的操作，现在分享给大家，希望可以做个参考。

一、实现对ScrollViewer样式的自定义主要包括：

1、滚动条宽度设置

2、滚动条颜色

3、滚动条圆角

4、滚动条拉动时的效果mouseover

二、实现效果：

三、实现方法

1、创建资源字典（ ResourceDictionary）文件

由于style代码比较多，之间在控件文件中加载style比较混乱，也不利于其它窗口复用，这里单独创建了ScrollViewDictionary.xaml文件代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
    <!--View区域背景色-->
    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
      <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
      <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
      <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource MyScrollBarStyle}"/>
    </Grid>
  </ControlTemplate>
 
  
  <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
 
  <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <!--滚动条颜色、圆角等设置-->
  <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
          <!--滚动条颜色和圆角设置-->
          <Rectangle Name="thumbRect" Fill="#03ffea" RadiusX="3" RadiusY="3"/>
          <!--鼠标拉动滚动条时的颜色-->
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
    <Setter Property="Background" Value="AliceBlue"/>
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<!--滚动条宽度-->
    <Setter Property="Width" Value="8"/>
    <Setter Property="MinWidth" Value="6"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollBar}">
          <!--滚动条背景色--> 
          <Grid x:Name="Bg" Background="#001f55" SnapsToDevicePixels="true" Width="8">
            <Grid.RowDefinitions>
              <RowDefinition />
            </Grid.RowDefinitions>
            <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
              <Track.DecreaseRepeatButton>
                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
              </Track.DecreaseRepeatButton>
              <Track.IncreaseRepeatButton>
                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
              </Track.IncreaseRepeatButton>
              <Track.Thumb>
                <Thumb Style="{StaticResource ScrollBarThumb}"/>
              </Track.Thumb>
            </Track>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Style.Triggers>
      <Trigger Property="Orientation" Value="Horizontal">
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="Height" Value="6"/>
        <Setter Property="MinHeight" Value="6"/>
        <Setter Property="Background" Value="AliceBlue"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
              <Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
                  <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                  </Track.DecreaseRepeatButton>
                  <Track.IncreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                  </Track.IncreaseRepeatButton>
                  <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumb}" />
                  </Track.Thumb>
                </Track>
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Trigger>
    </Style.Triggers>
  </Style>
</ResourceDictionary>

2、在窗口中引用资源字典

复制代码

1
2
3
4
5
6
7
<Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ScrollViewDictionary.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>    
  </Window.Resources>

3、scrollViewer中使用新样式

复制代码

1
2
3
4
<ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
      <StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
      </StackPanel>
    </ScrollViewer>

自定义完成，以上是所有步骤和代码，可以根据自己程序的整体设计来更改颜色、宽度、圆角等效果。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持靠谱客。如有错误或未考虑完全的地方，望不吝赐教。