下面是一段整體的樣式ScrollViewer，還是想說官方文檔YYDS
1. 在xaml如此引用：
2.其中設置垂直方向上滑塊的大小關鍵就是這裏
3. sys名稱空間的引用：
xmlns:sys="clr-namespace:System;assembly=mscorlib"
4. 樣式的整體代碼：
<ControlTemplate x:Key="ScrollViewerControlTemplate1"
TargetType="{x:Type ScrollViewer}">
<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="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
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 VeticalScrollBarStyle}" />
<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}" />
</Grid>
</ControlTemplate>
<SolidColorBrush x:Key="ScrollBar.Static.Background"
Color="#FF004493" />
<SolidColorBrush x:Key="ScrollBar.Static.Border"
Color="Transparent" />
<SolidColorBrush x:Key="ScrollBar.Pressed.Glyph"
Color="#FF00E1F1" />
<SolidColorBrush x:Key="ScrollBar.MouseOver.Glyph"
Color="#FF00E1F1" />
<SolidColorBrush x:Key="ScrollBar.Disabled.Glyph"
Color="#BFBFBF" />
<SolidColorBrush x:Key="ScrollBar.Static.Glyph"
Color="#606060" />
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1"
StrokeDashArray="1 2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Background"
Color="#FF004493" />
<SolidColorBrush x:Key="ScrollBar.MouseOver.Border"
Color="Transparent" />
<SolidColorBrush x:Key="ScrollBar.Pressed.Background"
Color="#FF004493" />
<SolidColorBrush x:Key="ScrollBar.Pressed.Border"
Color="Transparent" />
<SolidColorBrush x:Key="ScrollBar.Disabled.Background"
Color="#F0F0F0" />
<SolidColorBrush x:Key="ScrollBar.Disabled.Border"
Color="#F0F0F0" />
<Style x:Key="ScrollBarButton"
TargetType="{x:Type RepeatButton}">
<Setter Property="FocusVisualStyle"
Value="{StaticResource FocusVisual}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Padding"
Value="1" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border x:Name="border"
BorderBrush="{StaticResource ScrollBar.Static.Border}"
BorderThickness="1"
Background="{StaticResource ScrollBar.Static.Background}"
SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Background"
TargetName="border"
Value="{StaticResource ScrollBar.MouseOver.Background}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{StaticResource ScrollBar.MouseOver.Border}" />
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Background"
TargetName="border"
Value="{StaticResource ScrollBar.Pressed.Background}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{StaticResource ScrollBar.Pressed.Border}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Opacity"
TargetName="contentPresenter"
Value="0.56" />
<Setter Property="Background"
TargetName="border"
Value="{StaticResource ScrollBar.Disabled.Background}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{StaticResource ScrollBar.Disabled.Border}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RepeatButtonTransparent"
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>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb"
Color="#FF00E1F1" />
<SolidColorBrush x:Key="ScrollBar.Pressed.Thumb"
Color="#FF00E1F1" />
<SolidColorBrush x:Key="ScrollBar.Static.Thumb"
Color="#FF00E1F1" />
<Style x:Key="ScrollBarThumbVertical"
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 x:Name="rectangle"
RadiusX="8"
RadiusY="8"
Fill="{StaticResource ScrollBar.Static.Thumb}"
Height="{TemplateBinding Height}"
SnapsToDevicePixels="True"
Width="{TemplateBinding Width}" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Fill"
TargetName="rectangle"
Value="{StaticResource ScrollBar.MouseOver.Thumb}" />
</Trigger>
<Trigger Property="IsDragging"
Value="true">
<Setter Property="Fill"
TargetName="rectangle"
Value="{StaticResource ScrollBar.Pressed.Thumb}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumbHorizontal"
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 x:Name="rectangle"
Fill="{StaticResource ScrollBar.Static.Thumb}"
Height="{TemplateBinding Height}"
SnapsToDevicePixels="True"
Width="{TemplateBinding Width}" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Fill"
TargetName="rectangle"
Value="{StaticResource ScrollBar.MouseOver.Thumb}" />
</Trigger>
<Trigger Property="IsDragging"
Value="true">
<Setter Property="Fill"
TargetName="rectangle"
Value="{StaticResource ScrollBar.Pressed.Thumb}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VeticalScrollBarStyle"
TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="false" />
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Background"
Value="{StaticResource ScrollBar.Static.Background}" />
<Setter Property="BorderBrush"
Value="{StaticResource ScrollBar.Static.Border}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderThickness"
Value="1,0" />
<Setter Property="Width"
Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
<Setter Property="MinWidth"
Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg"
SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.00001*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Row="1"
CornerRadius="8" />
<RepeatButton x:Name="PART_LineUpButton"
Command="{x:Static ScrollBar.LineUpCommand}"
IsEnabled="{TemplateBinding IsMouseOver}"
Style="{StaticResource ScrollBarButton}"
Visibility="Collapsed">
<Path x:Name="ArrowTop"
Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z"
Fill="{StaticResource ScrollBar.Static.Glyph}"
Margin="3,4,3,3"
Stretch="Uniform" />
</RepeatButton>
<Track x:Name="PART_Track"
IsDirectionReversed="true"
IsEnabled="{TemplateBinding IsMouseOver}"
Grid.Row="1">
<!--設置垂直滑塊的大小，實際值爲下面值的一半，也就是要100下面值需要是200-->
<Track.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">
260
</sys:Double>
</Track.Resources>
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageUpCommand}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageDownCommand}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbVertical}" />
</Track.Thumb>
</Track>
<RepeatButton x:Name="PART_LineDownButton"
Command="{x:Static ScrollBar.LineDownCommand}"
IsEnabled="{TemplateBinding IsMouseOver}"
Grid.Row="2"
Style="{StaticResource ScrollBarButton}"
Visibility="Collapsed">
<Path x:Name="ArrowBottom"
Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z"
Fill="{StaticResource ScrollBar.Static.Glyph}"
Margin="3,4,3,3"
Stretch="Uniform" />
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}"
Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowBottom"
Value="{StaticResource ScrollBar.Pressed.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}"
Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowTop"
Value="{StaticResource ScrollBar.Pressed.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}"
Value="false" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowBottom"
Value="{StaticResource ScrollBar.MouseOver.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}"
Value="false" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowTop"
Value="{StaticResource ScrollBar.MouseOver.Glyph}" />
</MultiDataTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Fill"
TargetName="ArrowTop"
Value="{StaticResource ScrollBar.Disabled.Glyph}" />
<Setter Property="Fill"
TargetName="ArrowBottom"
Value="{StaticResource ScrollBar.Disabled.Glyph}" />
</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="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}" />
<Setter Property="MinHeight"
Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}" />
<Setter Property="BorderThickness"
Value="0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg"
SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}" />
<ColumnDefinition Width="0.00001*" />
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}" />
</Grid.ColumnDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.Column="1" />
<RepeatButton x:Name="PART_LineLeftButton"
Command="{x:Static ScrollBar.LineLeftCommand}"
IsEnabled="{TemplateBinding IsMouseOver}"
Style="{StaticResource ScrollBarButton}">
<Path x:Name="ArrowLeft"
Data="M 3.18,7 C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7 z"
Fill="{StaticResource ScrollBar.Static.Glyph}"
Margin="3"
Stretch="Uniform" />
</RepeatButton>
<Track x:Name="PART_Track"
Grid.Column="1"
IsEnabled="{TemplateBinding IsMouseOver}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageRightCommand}"
Style="{StaticResource RepeatButtonTransparent}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbHorizontal}" />
</Track.Thumb>
</Track>
<RepeatButton x:Name="PART_LineRightButton"
Grid.Column="2"
Command="{x:Static ScrollBar.LineRightCommand}"
IsEnabled="{TemplateBinding IsMouseOver}"
Style="{StaticResource ScrollBarButton}">
<Path x:Name="ArrowRight"
Data="M 1.81,7 C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7 z"
Fill="{StaticResource ScrollBar.Static.Glyph}"
Margin="3"
Stretch="Uniform" />
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}"
Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowRight"
Value="{StaticResource ScrollBar.Pressed.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}"
Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowLeft"
Value="{StaticResource ScrollBar.Pressed.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}"
Value="false" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowRight"
Value="{StaticResource ScrollBar.MouseOver.Glyph}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}"
Value="true" />
<Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}"
Value="false" />
</MultiDataTrigger.Conditions>
<Setter Property="Fill"
TargetName="ArrowLeft"
Value="{StaticResource ScrollBar.MouseOver.Glyph}" />
</MultiDataTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Fill"
TargetName="ArrowLeft"
Value="{StaticResource ScrollBar.Disabled.Glyph}" />
<Setter Property="Fill"
TargetName="ArrowRight"
Value="{StaticResource ScrollBar.Disabled.Glyph}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>