XAMLでスクロールバーをカスタマイズ時のResourcesDictionary

リソースディクショナリーで使うときは、下記を追加でsysが使えたのでメモ

xmlns:sys="clr-namespace:System;assembly=mscorlib"

Resourcesは参考サイトのコピペ、自分メモ用に拝借です

        <!-- スクロールバーの幅 -->
        <sys:Double x:Key="ScrollBarSize">12</sys:Double>
        <!-- ボタンの長さ -->
        <sys:Double x:Key="ScrollBarRepeatButtonSize">16</sys:Double>
        <!-- スクロールバーのマージン -->
        <sys:Double x:Key="ScrollBarMarginSize">5</sys:Double>
        <!-- スクロールバーの色-->
        <SolidColorBrush x:Key="ScrollBarColorBrush" Color="#66ffffff" />
        <!-- ボーダーの色 -->
        <SolidColorBrush x:Key="ScrollBarBorderBrush" Color="#66ffffff" />
        <!-- トラック（レーン）の色 -->
        <SolidColorBrush x:Key="ScrollBarTrackBrush" Color="#33ffffff" />
        <!-- 三角の色 -->
        <SolidColorBrush x:Key="ScrollBarHilightBrush" Color="#ccffffff" />
        <!-- ボタンを押した時の色 -->
        <SolidColorBrush x:Key="ScrollBarPressedBrush" Color="#99ffffff" />
        <!-- 使用不可の色 -->
        <SolidColorBrush x:Key="ScrollBarDisabledBrush" Color="#44ffffff" />

        <!-- 終端の三角ボタンのスタイル -->
        <Style x:Key="ScrollBarRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border x:Name="Border" Margin="0" CornerRadius="0"  Background="{StaticResource ScrollBarColorBrush}" BorderBrush="{StaticResource ScrollBarBorderBrush}" BorderThickness="1">
                            <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource ScrollBarHilightBrush}" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ScrollBarPressedBrush}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{StaticResource ScrollBarDisabledBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- トラック（レーン）のスタイル -->
        <Style x:Key="ScrollBarTrackStyle" 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="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border CornerRadius="0"  Background="{StaticResource ScrollBarColorBrush}" BorderBrush="{StaticResource ScrollBarBorderBrush}" BorderThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- カスタムスクロールバーのスタイル -->
        <Style x:Key="CustomScrollBarStyle" TargetType="{x:Type ScrollBar}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <!-- 縦向きのスクロールバー -->
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width" Value="{StaticResource ScrollBarSize}"/>
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Margin">
                        <Setter.Value>
                            <Thickness Left="0" Top="{StaticResource ScrollBarMarginSize}" Right="{StaticResource ScrollBarMarginSize}" Bottom="{StaticResource ScrollBarMarginSize}" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
                                        <RowDefinition/>
                                        <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
                                    </Grid.RowDefinitions>
                                    <Border Grid.RowSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarTrackBrush}" />
                                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarRepeatButtonStyle}" Height="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
                                    <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}"  Command="ScrollBar.PageUpCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="0,1,0,1"/>
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageDownCommand" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <RepeatButton Grid.Row="2" Style="{StaticResource ScrollBarRepeatButtonStyle}" Height="{StaticResource ScrollBarRepeatButtonSize}"  Command="ScrollBar.LineDownCommand"  Content="M 0 0 L 4 4 L 8 0 Z"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <!-- 横向きのスクロールバー -->
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto"/>
                    <Setter Property="Height" Value="{StaticResource ScrollBarSize}" />
                    <Setter Property="Margin">
                        <Setter.Value>
                            <Thickness Left="{StaticResource ScrollBarMarginSize}" Top="0" Right="{StaticResource ScrollBarMarginSize}" Bottom="{StaticResource ScrollBarMarginSize}" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Grid.ColumnSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarTrackBrush}" />
                                    <RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarRepeatButtonStyle}" Width="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
                                    <Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="false">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}"  Command="ScrollBar.PageLeftCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="1,0,1,0"/>
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageRightCommand" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarRepeatButtonStyle}" Width="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

##参考サイト

XAML：StaticResourceとStyleの利用
https://qiita.com/code0327/items/e1eeaec9687fa5acef80

[WPF] WPF でスクロールバーのデザインをカスタマイズ
http://gootara.org/library/2016/06/wpf-scb.html