XAML设置WPF控件ScrollViewer卷滚条颜色与尺寸

初用C#与WPF，我对XAML的感觉是灵活但复杂。我只想改变ScrollViewer卷滚条的颜色，但模板案例看得我眼花缭乱。啃了一天，去其繁盛，留其必备，终于调出一个方便修改卷滚条各部分，包括ScrollViewer右下角颜色，的资源。使用时，直接修改前面提取出的参数即可。

代码如下：

<Window x:Class="ScrollBarColor.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:ScrollBarColor"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>

        <!--ScrollViewer参数设置-->
        
        <!--卷滚条厚度，即水平卷滚条高度，或垂直卷滚条宽度，最小为8，最小值可从后面的MyScrollViewer中修改-->
        <sys:Double x:Key="ScrollBarThickness">18</sys:Double>
        <!--卷滚条中间滑块厚度-->
        <sys:Double x:Key="ThumbThickness">16</sys:Double>

        <!--卷滚条两端箭头形状路径-->
        <sys:String x:Key="UpArrowPath">M 0 4 L 8 4 L 4 0 Z</sys:String>
        <sys:String x:Key="DownArrowPath">M 0 0 L 4 4 L 8 0 Z</sys:String>
        <sys:String x:Key="LeftArrowPath">M 4 0 L 4 8 L 0 4 Z</sys:String>
        <sys:String x:Key="RightArrowPath">M 0 0 L 4 4 L 0 8 Z</sys:String>

        <!--卷滚条背景色-->
        <Brush x:Key="ScrollBarBackground">#FF2e2e2e</Brush>

        <!--中间滑块颜色-->
        <Brush x:Key="ThumbColor">#FF4d4d4d</Brush>
        <!--鼠标移入后中间滑块颜色-->
        <Brush x:Key="MouseOver_ThumbColor">#FF999999</Brush>
        <!--鼠标压下后中间滑块颜色-->
        <Brush x:Key="MouseDown_ThumbColor">red</Brush>

        <!--卷滚条两端箭头颜色-->
        <Brush x:Key="ArrowKeyColor">#FF4d4d4d</Brush>
        <!--鼠标移入后卷滚条两端箭头颜色-->
        <Brush x:Key="MouseOver_ArrowKeyColor">#FF999999</Brush>
        <!--鼠标压下后卷滚条两端箭头颜色-->
        <Brush x:Key="MouseDown_ArrowKeyColor">#FF00FF00</Brush>

        <!--卷滚条两端箭头按钮背景色-->
        <Brush x:Key="ArrowKeyBackground">#00000000</Brush>
        <!--鼠标移入后卷滚条两端箭头按钮背景色-->
        <Brush x:Key="MouseOver_ArrowKeyBackground">Red</Brush>
        <!--鼠标压下后卷滚条两端箭头按钮背景色-->
        <Brush x:Key="MouseDown_ArrowKeyBackground">Blue</Brush>

        <!--卷滚条两端箭头按钮背景边框色-->
        <Brush x:Key="ArrowKeyBackgroundBorderColor">#00000000</Brush>
        <!--鼠标移入后卷滚条两端箭头按钮背景边框色-->
        <Brush x:Key="MouseOver_ArrowKeyBackgroundBorderColor">#FF00ff00</Brush>
        <!--鼠标压下后卷滚条两端箭头按钮背景边框色-->
        <Brush x:Key="MouseDown_ArrowKeyBackgroundBorderColor">#FFff0000</Brush>

        <!--ScrollViewer控件右下角颜色-->
        <Brush x:Key="RightBottomCornerColor">#FF2e2e2e</Brush>
        <!--ScrollViewer控件右下角边框颜色-->
        <Brush x:Key="RightBottomCornerBorderColor">#FF4d4d4d</Brush>

        <Style x:Key="MyScrollViewer" TargetType="ScrollViewer">
            <Style.Resources>
                 <!--卷滚条最小厚度-->
                <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">8</sys:Double>
                <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">8</sys:Double> 
            </Style.Resources>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  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" Grid.Row="1" Fill="{StaticResource RightBottomCornerColor}" Stroke="{StaticResource RightBottomCornerBorderColor}" />
                            <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" Orientation="Vertical" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" />
                            <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>                 
                </Setter.Value>
             </Setter>
        </Style>
        
        <!--卷滚条两端按钮-->
        <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border x:Name="border" BorderThickness="1" BorderBrush="{StaticResource ArrowKeyBackgroundBorderColor}" Background="{StaticResource ArrowKeyBackground}">
                            <Path x:Name="arrow" Fill="{StaticResource ArrowKeyColor}" HorizontalAlignment="Center" VerticalAlignment="Center"  Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="arrow" Property="Fill" Value="{StaticResource MouseOver_ArrowKeyColor}"/>
                                <Setter TargetName="border" Property="Background" Value="{StaticResource MouseOver_ArrowKeyBackground}"/>
                                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource MouseOver_ArrowKeyBackgroundBorderColor}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="arrow" Property="Fill" Value="{StaticResource MouseDown_ArrowKeyColor}"/>
                                <Setter TargetName="border" Property="Background" Value="{StaticResource MouseDown_ArrowKeyBackground}"/>
                                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource MouseDown_ArrowKeyBackgroundBorderColor}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--pageButton为滑块上下的空白部分，点击可翻页-->
        <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
            <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="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border x:Name="thumbBorder" CornerRadius="0"  Background= "{StaticResource ThumbColor}"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True" >
                                <Setter TargetName="thumbBorder" Property="Background" Value="{StaticResource MouseOver_ThumbColor}"/>
                            </Trigger>
                            <Trigger Property="IsMouseCaptured" Value="True" >
                                <Setter TargetName="thumbBorder" Property="Background" Value="{StaticResource MouseDown_ThumbColor}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--垂直卷滚条-->
        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition MaxHeight="{StaticResource ScrollBarThickness}"/>
                    <!--上箭头区域-->
                    <RowDefinition Height="0.00001*" />
                    <!--中间滑块区域-->
                    <RowDefinition MaxHeight="{StaticResource ScrollBarThickness}" />
                    <!--下箭头区域-->
                </Grid.RowDefinitions>

                <!--垂直卷滚条背景色, 跨越3个区域-->
                <Border Grid.RowSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarBackground}" />

                <!--上箭头 RepeatButton压下后可连续发出click事件，让卷滚条不断移动-->
                <RepeatButton Grid.Row="0"
                  Style="{StaticResource ScrollBarLineButton}" 
                  Height="{StaticResource ScrollBarThickness}"
                  Command="ScrollBar.LineUpCommand"
                  Content="{StaticResource UpArrowPath}" />

                <!--中间区域-->
                <Track x: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="0,0,0,0" Width="{StaticResource ThumbThickness}"></Thumb>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                      Command="ScrollBar.PageDownCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>

                <!--下箭头-->
                <RepeatButton Grid.Row="2"
                  Style="{StaticResource ScrollBarLineButton}"
                  Height="{StaticResource ScrollBarThickness}"
                  Command="ScrollBar.LineDownCommand"
                  Content="{StaticResource DownArrowPath}" />
                <!--内容为绘制上下箭头的path代码-->
            </Grid>
        </ControlTemplate>

        <!--水平卷滚条-->
        <ControlTemplate x:Key="HorizontalScrollBar"
                 TargetType="{x:Type ScrollBar}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <!--左箭头区域-->
                    <ColumnDefinition MaxWidth="{StaticResource ScrollBarThickness}" />
                    <!--中间区域-->
                    <ColumnDefinition Width="0.00001*" />
                    <!--右箭头区域-->
                    <ColumnDefinition MaxWidth="{StaticResource ScrollBarThickness}" />
                </Grid.ColumnDefinitions>
                <!--轨道背景色-->
                <Border Grid.ColumnSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarBackground}" />
                <RepeatButton Grid.Column="0"
                  Style="{StaticResource ScrollBarLineButton}"
                  Width="{StaticResource ScrollBarThickness}"
                  Command="ScrollBar.LineLeftCommand"
                  Content="{StaticResource LeftArrowPath}" />
                <Track x: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,0,0,0" Height="{StaticResource ThumbThickness}"></Thumb>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <RepeatButton Grid.Column="2"
                  Style="{StaticResource ScrollBarLineButton}"
                  Width="{StaticResource ScrollBarThickness}"
                  Command="ScrollBar.LineRightCommand"
                  Content="{StaticResource RightArrowPath}" />
            </Grid>
        </ControlTemplate>

        <!--卷滚条设置-->
        <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto" />
                    <Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
                    <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width" Value="{StaticResource ScrollBarThickness}" />
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Style="{StaticResource MyScrollViewer}">
            <Canvas Width="1000" Height="500">
                <Rectangle Height="411" Fill="Green" Width="791" Canvas.Left="90" Canvas.Top="106"/>
            </Canvas>
        </ScrollViewer>
    </Grid>
</Window>