ShrlAlgoToolkit/WPFluent/Controls/Scroll/DynamicScrollBar.xaml

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

    <Duration x:Key="DynamicScrollAnimationDuration">0:0:0.16</Duration>
    <Duration x:Key="DynamicButtonHoverAnimationDuration">0:0:0.16</Duration>

    <sys:Double x:Key="DynamicLineButtonHeight">12</sys:Double>
    <sys:Double x:Key="DynamicLineButtonWidth">12</sys:Double>

    <Style x:Key="DynamicScrollBarLineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
        <Setter Property="Width" Value="{StaticResource DynamicLineButtonWidth}" />
        <Setter Property="Height" Value="{StaticResource DynamicLineButtonHeight}" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="FontSize" Value="11" />
        <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
                        x:Name="Border"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Margin="{TemplateBinding Margin}"
                        Background="{DynamicResource ScrollBarButtonBackground}"
                        CornerRadius="6">
                        <controls:SymbolIcon
                            Margin="0,0,0,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Filled="True"
                            FontSize="{TemplateBinding FontSize}"
                            Foreground="{TemplateBinding Foreground}"
                            Symbol="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Opacity)"
                                            From="0.0"
                                            To="1.0"
                                            Duration="{StaticResource DynamicButtonHoverAnimationDuration}" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Opacity)"
                                            From="1.0"
                                            To="0.0"
                                            Duration="{StaticResource DynamicButtonHoverAnimationDuration}" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DynamicScrollBarPageButton" 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="DynamicScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFill}" />
        <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 x:Key="DynamicVerticalScrollBar" TargetType="{x:Type controls:DynamicScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="14" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="14" />
            </Grid.RowDefinitions>
            <Border
                x:Name="PART_Border"
                Grid.RowSpan="3"
                Width="12"
                HorizontalAlignment="Center"
                Background="{DynamicResource ScrollBarTrackFillPointerOver}"
                CornerRadius="6"
                Opacity="0" />
            <RepeatButton
                x:Name="PART_ButtonScrollUp"
                Grid.Row="0"
                Command="ScrollBar.LineUpCommand"
                Content="{x:Static controls:SymbolRegular.CaretUp24}"
                Opacity="0"
                Style="{StaticResource DynamicScrollBarLineButton}" />
            <Track
                x:Name="PART_Track"
                Grid.Row="1"
                Width="6"
                IsDirectionReversed="True"
                Opacity="0">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource DynamicScrollBarPageButton}" />
                </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 DynamicScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource DynamicScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton
                x:Name="PART_ButtonScrollDown"
                Grid.Row="2"
                Command="ScrollBar.LineDownCommand"
                Content="{x:Static controls:SymbolRegular.CaretDown24}"
                Opacity="0"
                Style="{StaticResource DynamicScrollBarLineButton}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Width"
                                From="6"
                                To="8"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollUp"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollDown"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Width"
                                From="8"
                                To="6"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollUp"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollDown"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsInteracted" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

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

            <RepeatButton
                x:Name="PART_ButtonScrollLeft"
                Grid.Column="0"
                VerticalAlignment="Center"
                Command="ScrollBar.LineLeftCommand"
                Content="{x:Static controls:SymbolRegular.CaretLeft24}"
                Opacity="0"
                Style="{StaticResource DynamicScrollBarLineButton}" />

            <Track
                x:Name="PART_Track"
                Grid.Column="1"
                Height="6"
                VerticalAlignment="Center"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Style="{StaticResource DynamicScrollBarPageButton}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        Margin="0"
                        Padding="0"
                        Style="{StaticResource DynamicScrollBarThumb}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Style="{StaticResource DynamicScrollBarPageButton}" />
                </Track.IncreaseRepeatButton>
            </Track>

            <RepeatButton
                x:Name="PART_ButtonScrollRight"
                Grid.Column="2"
                VerticalAlignment="Center"
                Command="ScrollBar.LineRightCommand"
                Content="{x:Static controls:SymbolRegular.CaretRight24}"
                Opacity="0"
                Style="{StaticResource DynamicScrollBarLineButton}" />

        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Height"
                                From="6"
                                To="8"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollLeft"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollRight"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Height"
                                From="8"
                                To="6"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Border"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollLeft"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                            <DoubleAnimation
                                Storyboard.TargetName="PART_ButtonScrollRight"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsInteracted" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="PART_Track"
                                Storyboard.TargetProperty="Opacity"
                                From="1.0"
                                To="0.0"
                                Duration="{StaticResource DynamicScrollAnimationDuration}" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="UiDynamicScrollBar" TargetType="{x:Type controls:DynamicScrollBar}">
        <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 DynamicHorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="14" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource DynamicVerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style BasedOn="{StaticResource UiDynamicScrollBar}" TargetType="{x:Type controls:DynamicScrollBar}" />

</ResourceDictionary>