自定義滾動條(Custom ScrollBar)

1、先看效果

2、本文背景

設計師給的效果圖中，滾動條的樣式好好看呀，可是手上現有的控件庫很差改呀，那我本身從新實現樣式吧。

3、代碼實現

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

4、文章參考

參考：
Design com WPF ：     https://www.youtube.com/watch?v=aQeXth-1B0I&t=350s

5、代碼下載

文章中代碼已經所有貼出，自定義滾動條，主要是改變滾動條的Track樣式，也即Track的Thumb、IncreaseRepeatButton、DecreaseRepeatButton三個成員的樣式，您get到了嗎？