Shrlalgo.RvKits/WPFluent/Controls/Scroll/ScrollBar.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:WPFluent.Controls"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Duration x:Key="ScrollAnimationDuration">0:0:0.16</Duration>
    <Duration x:Key="ButtonHoverAnimationDuration">0:0:0.16</Duration>

    <sys:Double x:Key="LineButtonHeight">12</sys:Double>
    <sys:Double x:Key="LineButtonWidth">12</sys:Double>

    <Style TargetType="{x:Type RepeatButton}" x:Key="UiScrollBarLineButton">
        <Setter Property="Foreground" Value="{DynamicResource ControlStrongFillColorDefaultBrush}" />
        <Setter Property="Width" Value="{StaticResource LineButtonWidth}" />
        <Setter Property="Height" Value="{StaticResource LineButtonHeight}" />
        <Setter Property="FontSize" Value="11" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border
                        Background="{DynamicResource SubtleFillColorTransparentBrush}"
                        CornerRadius="6"
                        Height="{TemplateBinding Height}"
                        Margin="{TemplateBinding Margin}"
                        Width="{TemplateBinding Width}"
                        x:Name="Border">
                        <controls:SymbolIcon
                            Filled="True"
                            FontSize="{TemplateBinding FontSize}"
                            Foreground="{TemplateBinding Foreground}"
                            HorizontalAlignment="Center"
                            Margin="0,0,0,0"
                            Symbol="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
                            VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="{StaticResource ButtonHoverAnimationDuration}"
                                            From="0.0"
                                            Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Opacity)"
                                            To="1.0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="{StaticResource ButtonHoverAnimationDuration}"
                                            From="1.0"
                                            Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Opacity)"
                                            To="0.0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type RepeatButton}" x:Key="UiScrollBarPageButton">
        <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 TargetType="{x:Type Thumb}" x:Key="UiScrollBarThumb">
        <Setter Property="Background" Value="{DynamicResource ControlStrongFillColorDefaultBrush}" />
        <Setter Property="Border.CornerRadius" Value="4" />
        <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 Thumb}">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="{TemplateBinding Border.CornerRadius}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="UiVerticalScrollBar">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="14" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="14" />
            </Grid.RowDefinitions>
            <Border
                Background="{DynamicResource AcrylicBackgroundFillColorDefaultBrush}"
                CornerRadius="6"
                Grid.RowSpan="3"
                HorizontalAlignment="Center"
                Opacity="0"
                Width="12"
                x:Name="PART_Border" />
            <RepeatButton
                Command="ScrollBar.LineUpCommand"
                Content="{x:Static controls:SymbolRegular.CaretUp24}"
                Grid.Row="0"
                HorizontalContentAlignment="Left"
                Opacity="0"
                Style="{StaticResource UiScrollBarLineButton}"
                x:Name="PART_ButtonScrollUp" />
            <Track
                Grid.Row="1"
                IsDirectionReversed="True"
                Width="6"
                x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource UiScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <!--
                        TODO: Need to add a custom Thumb with a corner radius that will increase when OnMouseOver is triggered.
                    -->
                    <Thumb
                        Margin="0"
                        Padding="0"
                        Style="{StaticResource UiScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource UiScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Command="ScrollBar.LineDownCommand"
                Content="{x:Static controls:SymbolRegular.CaretDown24}"
                Grid.Row="2"
                HorizontalContentAlignment="Left"
                Opacity="0"
                Style="{StaticResource UiScrollBarLineButton}"
                x:Name="PART_ButtonScrollDown" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="6"
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Width"
                                To="8" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_ButtonScrollUp"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_ButtonScrollDown"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="8"
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Width"
                                To="6" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_ButtonScrollUp"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_ButtonScrollDown"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="UiHorizontalScrollBar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="18" />
                <ColumnDefinition Width="0.00001*" />
                <ColumnDefinition MaxWidth="18" />
            </Grid.ColumnDefinitions>
            <Border
                Background="{DynamicResource SubtleFillColorTransparentBrush}"
                CornerRadius="6"
                Grid.ColumnSpan="3"
                Height="12"
                Opacity="0"
                VerticalAlignment="Center"
                x:Name="PART_Border" />

            <RepeatButton
                Command="ScrollBar.LineLeftCommand"
                Content="{x:Static controls:SymbolRegular.CaretLeft24}"
                Grid.Column="0"
                Opacity="0"
                Style="{StaticResource UiScrollBarLineButton}"
                VerticalAlignment="Center"
                x:Name="PART_ButtonScrollLeft" />
            <Track
                Grid.Column="1"
                Height="6"
                IsDirectionReversed="False"
                VerticalAlignment="Center"
                x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Style="{StaticResource UiScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        Margin="0"
                        Padding="0"
                        Style="{StaticResource UiScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Style="{StaticResource UiScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                Command="ScrollBar.LineRightCommand"
                Content="{x:Static controls:SymbolRegular.CaretRight24}"
                Grid.Column="2"
                Opacity="0"
                Style="{StaticResource UiScrollBarLineButton}"
                VerticalAlignment="Center"
                x:Name="PART_ButtonScrollRight" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="6"
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Height"
                                To="8" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_ButtonScrollLeft"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="0.0"
                                Storyboard.TargetName="PART_ButtonScrollRight"
                                Storyboard.TargetProperty="Opacity"
                                To="1.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="8"
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Height"
                                To="6" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_ButtonScrollLeft"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                            <DoubleAnimation
                                Duration="{StaticResource ScrollAnimationDuration}"
                                From="1.0"
                                Storyboard.TargetName="PART_ButtonScrollRight"
                                Storyboard.TargetProperty="Opacity"
                                To="0.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type ScrollBar}" x:Key="UiScrollBar">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="14" />
                <Setter Property="Template" Value="{StaticResource UiHorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="14" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource UiVerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style BasedOn="{StaticResource UiScrollBar}" TargetType="{x:Type ScrollBar}" />

</ResourceDictionary>