ShrlAlgoToolkit/Melskin/Controls/ScrollViewer.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:assists="clr-namespace:Melskin.Assists"
    xmlns:markup="clr-namespace:Melskin.Markup">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="RepeatButtonTransparent.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <!--  显示两端按钮  -->
    <Storyboard x:Key="ShowScrollItem">
        <DoubleAnimation
            Storyboard.TargetName="border"
            Storyboard.TargetProperty="Opacity"
            To="1"
            Duration="0:0:0.2" />
    </Storyboard>
    <!--  隐藏两端按钮  -->
    <Storyboard x:Key="HideScrollItem">
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="border"
            Storyboard.TargetProperty="Opacity"
            Duration="0:0:1.2">
            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1" />
            <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <!--  展开滚动条  -->
    <Storyboard x:Key="ExpandBar">
        <ThicknessAnimation
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="Margin"
            To="1"
            Duration="0:0:0.2" />
        <DoubleAnimation
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusX"
            To="4"
            Duration="0:0:0.2" />
        <DoubleAnimation
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusY"
            To="4"
            Duration="0:0:0.2" />
    </Storyboard>
    <!--  收缩垂直滚动条  -->
    <Storyboard x:Key="ShrinkVerticalBar">
        <ThicknessAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="Margin"
            Duration="0:0:1.2">
            <LinearThicknessKeyFrame KeyTime="0:0:0.2" Value="1" />
            <LinearThicknessKeyFrame KeyTime="0:0:1" Value="1" />
            <LinearThicknessKeyFrame KeyTime="0:0:1.2" Value="6,1,1,1" />
        </ThicknessAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusX"
            Duration="0:0:1.2">
            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="1.5" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusY"
            Duration="0:0:1.2">
            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="1.5" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <!--  收缩水平滚动条  -->
    <Storyboard x:Key="ShrinkHorizontalBar">
        <ThicknessAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="Margin"
            Duration="0:0:1.2">
            <LinearThicknessKeyFrame KeyTime="0:0:0.2" Value="1" />
            <LinearThicknessKeyFrame KeyTime="0:0:1" Value="1" />
            <LinearThicknessKeyFrame KeyTime="0:0:1.2" Value="1,6,1,1" />
        </ThicknessAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusX"
            Duration="0:0:1.2">
            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="1.5" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="rectangle"
            Storyboard.TargetProperty="RadiusY"
            Duration="0:0:1.2">
            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="4" />
            <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="1.5" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <!--  滚动条两端按钮  -->
    <Style x:Key="ScrollBarButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <!--<Setter Property="assists:ButtonAssist.Icon" Value="{markup:Icon SymbolValue=ArrowDropUp}" />-->
        <Setter Property="Focusable" Value="False" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border
                        x:Name="border"
                        Opacity="0"
                        SnapsToDevicePixels="true">
                        <ContentPresenter
                            x:Name="Icon"
                            Content="{Binding Path=(assists:ControlAssist.Icon), RelativeSource={RelativeSource TemplatedParent}}"
                            TextElement.Foreground="{DynamicResource TextSecondaryBrush}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Icon" Property="TextElement.Foreground" Value="{DynamicResource TextPrimaryBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="border" Property="Margin" Value="1.5" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="True">
                            <!--  TODO:不知道是不是要移除原有动画，原有动画是否会被自动释放  -->
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ShowScrollItem}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource HideScrollItem}" />
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  垂直滑块  -->
    <Style x:Key="ScrollBarThumbVerticalStyle" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">

                    <Rectangle
                        x:Name="rectangle"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Margin="6,1,1,1"
                        Fill="{DynamicResource TextSecondaryBrush}"
                        RadiusX="1.5"
                        RadiusY="1.5"
                        SnapsToDevicePixels="True" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ExpandBar}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ShrinkVerticalBar}" />
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter TargetName="rectangle" Property="Fill" Value="{DynamicResource TextPrimaryBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  水平滑块  -->
    <Style x:Key="ScrollBarHorizontalThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle
                        x:Name="rectangle"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Margin="1,6,1,1"
                        Fill="{DynamicResource TextSecondaryBrush}"
                        RadiusX="1.5"
                        RadiusY="1.5"
                        SnapsToDevicePixels="True" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ExpandBar}" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ShrinkHorizontalBar}" />
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter TargetName="rectangle" Property="Fill" Value="{DynamicResource TextPrimaryBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="ScrollBarVerticalTemplate" TargetType="{x:Type ScrollBar}">
        <Grid x:Name="Bg" SnapsToDevicePixels="true">
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="10" />
                <RowDefinition Height="*" />
                <RowDefinition MaxHeight="10" />
            </Grid.RowDefinitions>
            <Rectangle
                x:Name="border"
                Grid.RowSpan="3"
                Fill="{TemplateBinding Background}"
                Opacity="0"
                RadiusX="4"
                RadiusY="4" />
            <RepeatButton
                x:Name="PART_LineUpButton"
                Grid.Row="0"
                assists:ControlAssist.Icon="{markup:Icon SymbolValue=ArrowDropUp}"
                Command="{x:Static ScrollBar.LineUpCommand}"
                IsEnabled="{TemplateBinding IsMouseOver}"
                Style="{StaticResource ScrollBarButtonStyle}" />
            <Track
                x:Name="PART_Track"
                Grid.Row="1"
                IsDirectionReversed="true"
                IsEnabled="{TemplateBinding IsMouseOver}">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparentStyle}" />
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparentStyle}" />
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        x:Name="ThumbPart"
                        IsEnabled="False"
                        Style="{StaticResource ScrollBarThumbVerticalStyle}" />
                </Track.Thumb>
            </Track>
            <RepeatButton
                x:Name="PART_LineDownButton"
                Grid.Row="2"
                assists:ControlAssist.Icon="{markup:Icon SymbolValue=ArrowDropDown}"
                Command="{x:Static ScrollBar.LineDownCommand}"
                IsEnabled="{TemplateBinding IsMouseOver}"
                Style="{StaticResource ScrollBarButtonStyle}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="ThumbPart" Property="IsEnabled" Value="True" />
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource ShowScrollItem}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource HideScrollItem}" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="PART_LineUpButton" Property="Visibility" Value="Hidden" />
                <Setter TargetName="PART_LineDownButton" Property="Visibility" Value="Hidden" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="ScrollBarHorizontalTemplate" TargetType="{x:Type ScrollBar}">
        <Grid x:Name="Bg" SnapsToDevicePixels="true">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="10" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition MaxWidth="10" />
            </Grid.ColumnDefinitions>
            <Rectangle
                x:Name="border"
                Grid.ColumnSpan="3"
                Fill="{TemplateBinding Background}"
                Opacity="0"
                RadiusX="4"
                RadiusY="4" />
            <RepeatButton
                x:Name="PART_LineLeftButton"
                Grid.Column="0"
                assists:ControlAssist.Icon="{markup:Icon SymbolValue=ArrowLeft}"
                Command="{x:Static ScrollBar.LineLeftCommand}"
                IsEnabled="{TemplateBinding IsMouseOver}"
                Style="{StaticResource ScrollBarButtonStyle}" />
            <Track
                x:Name="PART_Track"
                Grid.Column="1"
                IsEnabled="{TemplateBinding IsMouseOver}">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource RepeatButtonTransparentStyle}" />
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource RepeatButtonTransparentStyle}" />
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb
                        x:Name="ThumbPart"
                        IsEnabled="False"
                        Style="{StaticResource ScrollBarHorizontalThumbStyle}" />
                </Track.Thumb>
            </Track>
            <RepeatButton
                x:Name="PART_LineRightButton"
                Grid.Column="2"
                assists:ControlAssist.Icon="{markup:Icon SymbolValue=ArrowRight}"
                Command="{x:Static ScrollBar.LineRightCommand}"
                IsEnabled="{TemplateBinding IsMouseOver}"
                Style="{StaticResource ScrollBarButtonStyle}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="ThumbPart" Property="IsEnabled" Value="True" />
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource ShowScrollItem}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource HideScrollItem}" />
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="PART_LineLeftButton" Property="Visibility" Value="Hidden" />
                <Setter TargetName="PART_LineRightButton" Property="Visibility" Value="Hidden" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--  滚动条样式  -->
    <Style TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="BorderThickness" Value="1,0" />
        <Setter Property="Width" Value="10" />
        <Setter Property="MinWidth" Value="10" />
        <Setter Property="Template" Value="{StaticResource ScrollBarVerticalTemplate}" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="Height" Value="10" />
                <Setter Property="MinHeight" Value="10" />
                <Setter Property="BorderThickness" Value="0,1" />
                <Setter Property="Template" Value="{StaticResource ScrollBarHorizontalTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <!--  滚动视图  -->
    <Style TargetType="{x:Type ScrollViewer}">
        <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>
                        <ScrollContentPresenter
                            x:Name="PART_ScrollContentPresenter"
                            Grid.Row="0"
                            Grid.Column="0"
                            Margin="{TemplateBinding Padding}"
                            CanContentScroll="{TemplateBinding CanContentScroll}"
                            CanHorizontallyScroll="False"
                            CanVerticallyScroll="False"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <ScrollBar
                            x:Name="PART_VerticalScrollBar"
                            Grid.Row="0"
                            Grid.Column="1"
                            AutomationProperties.AutomationId="VerticalScrollBar"
                            Cursor="Arrow"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                        <ScrollBar
                            x:Name="PART_HorizontalScrollBar"
                            Grid.Row="1"
                            Grid.Column="0"
                            AutomationProperties.AutomationId="HorizontalScrollBar"
                            Cursor="Arrow"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Minimum="0"
                            Orientation="Horizontal"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource TextDisabledBrush}" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>