時間如流水，只能流去不流回！?

點贊再看，養成習慣，這是您給我創作的動力！?

本文 Dotnet9 https://dotnet9.com 已收錄，站長樂于分享dotnet相關技術，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己會的。

Dotnet9.com

閱讀導航：

• 一、先看效果

• 二、本文背景

• 三、代碼實現

• 四、文章參考

• 五、代碼下載

一、先看效果

二、本文背景

設計師給的效果圖中，滾動條的樣式好好看呀，但是手上現有的控件庫不好改呀，那我自己重新實現樣式吧。

三、代碼實現

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

總結

以上是生活随笔為你收集整理的自定义滚动条(Custom ScrollBar)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。