wpf - スクロールバーのrepeatButtonを画像に変更してから親指を動かす方法。WPF xaml

Question

xaml に画像を挿入する必要があります。親指が上にある場合は1番目の画像のようにする必要があります。では、どうやってそれを行うのですか？すでに 2 つの画像 (黄色の矢印を上に、灰色の矢印を下に) を配置しましたが、別の 2 つの画像 (黄色の矢印を下に、灰色の矢印を上に) をどこに配置しますか? これまでの私のコード:

<Window x:Class="Scroll4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <SolidColorBrush x:Key="Background" Color="Gray" />

    <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <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="Panel.ZIndex" Value="1" />
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Opacity" Value="0.7" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Name="Border"
              CornerRadius="3"
              Background="{StaticResource Background}"
              BorderBrush="Transparent"
              BorderThickness="1" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource Background}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="60"/>
                <RowDefinition Height="*"/>
                <RowDefinition MaxHeight="60"/>
            </Grid.RowDefinitions>
            <Border
                Grid.RowSpan="3"
                CornerRadius="2"
                Background="#F8F8F8"/>

            <RepeatButton                        
                Focusable="False" Content="Up"
           Height="60"
           Command="ScrollBar.LineUpCommand">
                <RepeatButton.Template>
                    <ControlTemplate>
                        <DockPanel>
                            <Image Source="/Scroll4;component/Resources/bg.slide-up-active.png"/>
                            <ContentPresenter/>
                        </DockPanel>
                    </ControlTemplate>
                </RepeatButton.Template>
            </RepeatButton>
            <Track
           Name="PART_Track"
           Grid.Row="1"

           IsDirectionReversed="True">
                <Track.DecreaseRepeatButton>
                    <RepeatButton
                        Style="{StaticResource ScrollBarPageButton}"
                     Margin="3,2,3,2"
                     Command="ScrollBar.PageUpCommand"/>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumb}">  
                    </Thumb>
                    </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                    <RepeatButton
                        Style="{StaticResource ScrollBarPageButton}"
                     Margin="3,2,3,2"
                     Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
           Grid.Row="2"
                Focusable="False"
           Height="60"

           Command="ScrollBar.LineDownCommand"
           Content="Down">
                <RepeatButton.Template>
                    <ControlTemplate>
                        <DockPanel>
                            <Image Source="/Scroll4;component/Resources/bg.slide-down-disabled.png"/>
                        </DockPanel>
                    </ControlTemplate>
                </RepeatButton.Template>
              </RepeatButton>

        </Grid>
    </ControlTemplate>
    <Style TargetType="ScrollBar">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="60"/>
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>


<Grid >
    <ScrollViewer Margin="89,94,183.4,90.8" RenderTransformOrigin="0.792,0.806" >

        <Image Source="/Scroll4;component/Resources/Football_grass.jpg"
               Stretch="Fill" Height="500" />

    </ScrollViewer>

</Grid>