首页 > 代码库 > WPF 自定义滚动条样式

WPF 自定义滚动条样式

先看一下效果:

 

先分析一下滚动条有哪儿几部分组成:

 

滚动条总共有五部分组成:

两端的箭头按钮,实际类型为RepeatButton

Thumb 两端的空白,实际也是RepeatButton

最后就是Thumb(滑块)

 

所以如果要修改滚动条的样式,就要修改这五部分的样式。具体代码如下:

 

<!--自定义滚动条样式-->
            <SolidColorBrush x:Key="StandardBorderBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="StandardBackgroundBrush"
                             Color="#FFF" />
             
            <SolidColorBrush x:Key="HoverBorderBrush"
                             Color="#DDD" />
             
            <SolidColorBrush x:Key="SelectedBackgroundBrush"
                             Color="Gray" />
             
            <SolidColorBrush x:Key="SelectedForegroundBrush"
                             Color="White" />
             
            <SolidColorBrush x:Key="DisabledForegroundBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="NormalBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="NormalBorderBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="HorizontalNormalBrush"
                             Color="#888" />
             
            <SolidColorBrush x:Key="HorizontalNormalBorderBrush"
                             Color="#888" />

            <SolidColorBrush x:Key="GlyphBrush"
                             Color="#444" />

            <LinearGradientBrush x:Key="ListBoxBackgroundBrush"
                                 StartPoint="0,0"
                                 EndPoint="1,0.001">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="White"
                                      Offset="0.0" />
                        <GradientStop Color="White"
                                      Offset="0.6" />
                        <GradientStop Color="#DDDDDD"
                                      Offset="1.2" />
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>
             
            <LinearGradientBrush x:Key="StandardBrush"
                                 StartPoint="0,0"
                                 EndPoint="0,1">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="#FFF"
                                      Offset="0.0" />
                        <GradientStop Color="#CCC"
                                      Offset="1.0" />
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>
             
           <LinearGradientBrush x:Key="PressedBrush"
                                 StartPoint="0,0"
                                 EndPoint="0,1">
                <GradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Color="#BBB"
                                      Offset="0.0" />
                        <GradientStop Color="#EEE"
                                      Offset="0.1" />
                        <GradientStop Color="#EEE"
                                      Offset="0.9" />
                        <GradientStop Color="#FFF"
                                      Offset="1.0" />
                    </GradientStopCollection>
                </GradientBrush.GradientStops>
            </LinearGradientBrush>

            <Style x:Key="ScrollBarLineButton"
                   TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels"
                        Value="http://www.mamicode.com/True" />
                <Setter Property="OverridesDefaultStyle"
                        Value="http://www.mamicode.com/true" />
                <Setter Property="Focusable"
                        Value="http://www.mamicode.com/false" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Border Name="Border"
                                    Margin="1"
                                    CornerRadius="2"
                                    Background="{StaticResource NormalBrush}"
                                    BorderBrush="{StaticResource NormalBorderBrush}"
                                    BorderThickness="1">
                                <Path HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Fill="{StaticResource GlyphBrush}"
                                      Data="http://www.mamicode.com/{Binding Path=Content,
                RelativeSource={RelativeSource TemplatedParent}}" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsPressed"
                                         Value="http://www.mamicode.com/true">
                                    <Setter TargetName="Border"
                                            Property="Background"
                                            Value="http://www.mamicode.com/{StaticResource PressedBrush}" />
                                </Trigger>
                                <Trigger Property="IsEnabled"
                                         Value="http://www.mamicode.com/false">
                                    <Setter Property="Foreground"
                                            Value="http://www.mamicode.com/{StaticResource DisabledForegroundBrush}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ScrollBarPageButton"
                   TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels"
                        Value="http://www.mamicode.com/True" />
                <Setter Property="OverridesDefaultStyle"
                        Value="http://www.mamicode.com/true" />
                <Setter Property="IsTabStop"
                        Value="http://www.mamicode.com/false" />
                <Setter Property="Focusable"
                        Value="http://www.mamicode.com/false" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                            <Border Background="Transparent" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ScrollBarThumb"
                   TargetType="{x:Type Thumb}">
                <Setter Property="SnapsToDevicePixels"
                        Value="http://www.mamicode.com/True" />
                <Setter Property="OverridesDefaultStyle"
                        Value="http://www.mamicode.com/true" />
                <Setter Property="IsTabStop"
                        Value="http://www.mamicode.com/false" />
                <Setter Property="Focusable"
                        Value="http://www.mamicode.com/false" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Border CornerRadius="2"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ControlTemplate x:Key="VerticalScrollBar"
                             TargetType="{x:Type ScrollBar}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="18" />
                        <RowDefinition Height="0.00001*" />
                        <RowDefinition MaxHeight="18" />
                    </Grid.RowDefinitions>
                    <Border Grid.RowSpan="3"
                            CornerRadius="2"
                            Background="#F0F0F0" />
                    <RepeatButton Grid.Row="0"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Height="18"
                                  Command="ScrollBar.LineUpCommand"
                                  Content="M 0 4 L 8 4 L 4 0 Z" />
                    <Track Name="PART_Track"
                           Grid.Row="1"
                           IsDirectionReversed="true">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                          Command="ScrollBar.PageUpCommand" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}"
                                   Margin="1,0,1,0"
                                   Background="{StaticResource HorizontalNormalBrush}"
                                   BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                          Command="ScrollBar.PageDownCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Row="3"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Height="18"
                                  Command="ScrollBar.LineDownCommand"
                                  Content="M 0 0 L 4 4 L 8 0 Z" />
                </Grid>
            </ControlTemplate>

            <ControlTemplate x:Key="HorizontalScrollBar"
                             TargetType="{x:Type ScrollBar}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MaxWidth="30" />
                        <ColumnDefinition Width="0.00001*" />
                        <ColumnDefinition MaxWidth="30" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.ColumnSpan="3"
                            CornerRadius="5"
                            Background="#CCCCCC" />
                    <RepeatButton Grid.Column="0"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Width="18"
                                 
                                  Command="ScrollBar.LineLeftCommand"
                                  Content="M 4 0 L 4 8 L 0 4 Z"  Margin="10,0,2,0"/>
                               
                    <Track Name="PART_Track"
                           Grid.Column="1"
                           IsDirectionReversed="False">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                          Command="ScrollBar.PageLeftCommand" />
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}"
                                   Margin="0,1,0,1"
                                   Background="{StaticResource NormalBrush}"
                                   BorderBrush="{StaticResource NormalBorderBrush}" />
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                          Command="ScrollBar.PageRightCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Column="3"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Width="18"
                                  Margin="2,0,10,0"
                                  Command="ScrollBar.LineRightCommand"
                                  Content="M 0 0 L 4 4 L 0 8 Z" />
                </Grid>
            </ControlTemplate>
             
            <Style x:Key="{x:Type ScrollBar}"
                   TargetType="{x:Type ScrollBar}">
                <Setter Property="SnapsToDevicePixels"
                        Value="http://www.mamicode.com/True" />
                <Setter Property="OverridesDefaultStyle"
                        Value="http://www.mamicode.com/true" />
                <Style.Triggers>
                    <Trigger Property="Orientation"
                             Value="http://www.mamicode.com/Horizontal">
                        <Setter Property="Width"
                                Value="http://www.mamicode.com/Auto" />
                        <Setter Property="Height"
                                Value="http://www.mamicode.com/18" />
                        <Setter Property="Template"
                                Value="http://www.mamicode.com/{StaticResource HorizontalScrollBar}" />
                    </Trigger>
                    <Trigger Property="Orientation"
                             Value="http://www.mamicode.com/Vertical">
                        <Setter Property="Width"
                                Value="http://www.mamicode.com/18" />
                        <Setter Property="Height"
                                Value="http://www.mamicode.com/Auto" />
                        <Setter Property="Template"
                                Value="http://www.mamicode.com/{StaticResource VerticalScrollBar}" />
                    </Trigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="FavsScrollViewer"
                   TargetType="{x:Type ScrollViewer}">
                <Setter Property="OverridesDefaultStyle"
                        Value="http://www.mamicode.com/True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollViewer}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <ScrollContentPresenter Grid.Column="1" />

                                <ScrollBar Name="PART_VerticalScrollBar"
                                           Value="http://www.mamicode.com/{TemplateBinding VerticalOffset}"
                                           Maximum="{TemplateBinding ScrollableHeight}"
                                           ViewportSize="{TemplateBinding ViewportHeight}"
                                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                                <ScrollBar Name="PART_HorizontalScrollBar"
                                           Orientation="Horizontal"
                                           Grid.Row="1"
                                           Grid.Column="1"
                                           Value="http://www.mamicode.com/{TemplateBinding HorizontalOffset}"
                                           Maximum="{TemplateBinding ScrollableWidth}"
                                           ViewportSize="{TemplateBinding ViewportWidth}"
                                           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

XAML中代码为:

<ScrollViewer  Grid.Row="1"
                           RenderTransformOrigin="0.5,0.5"
                           HorizontalAlignment="Stretch"
                           Margin="0"
                           Width="Auto"
                           HorizontalScrollBarVisibility="Visible"
                           Style="{StaticResource FavsScrollViewer}"
                           Focusable="True"
                           VerticalScrollBarVisibility="Disabled"
                         >
                <WrapPanel x:Name="contentPanel"
                           Orientation="Vertical"
                           ></WrapPanel>
            </ScrollViewer>

因样式代码较多,建议先复制到项目中看一下效果,在根据滚动条的五部分内容分别研究相应的样式,本人也是知道一点总结一点,如果您有不同的简介,很高兴能和你讨论,能和大家共同进步。