Semi.Avalonia/src/Semi.Avalonia/Controls/ScrollViewer.axaml

<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:Avalonia.Controls.Converters"
    xmlns:dialog="using:Avalonia.Dialogs"
    x:CompileBindings="True">
    <Design.PreviewWith>
        <StackPanel>
            <ScrollBar Width="200" Orientation="Horizontal" />
            <ScrollBar Height="200" Orientation="Vertical" />
            <ScrollViewer
                Width="200"
                Height="200"
                HorizontalScrollBarVisibility="Visible"
                VerticalScrollBarVisibility="Visible">
                <Border
                    Width="400"
                    Height="400"
                    Background="aqua" />
            </ScrollViewer>
            <dialog:ManagedFileChooser />
        </StackPanel>
    </Design.PreviewWith>
    <ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="Template">
            <ControlTemplate>
                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                    <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Content="{TemplateBinding Content}"
                        Foreground="{TemplateBinding Foreground}" />
                </Border>
            </ControlTemplate>
        </Setter>
    </ControlTheme>

    <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
        <Setter Property="Cursor" Value="Arrow" />
        <Style Selector="^:horizontal">
            <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
            <Setter Property="Template">
                <ControlTemplate TargetType="ScrollBar">
                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                        <Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto">
                            <RepeatButton
                                Name="PART_LineUpButton"
                                Grid.Row="0"
                                Grid.Column="0"
                                MinWidth="{DynamicResource ScrollBarThickness}"
                                Padding="4,0"
                                VerticalAlignment="Center"
                                Focusable="False"
                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                <PathIcon
                                    Width="10"
                                    Height="10"
                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
                            </RepeatButton>
                            <Track
                                Grid.Column="1"
                                Maximum="{TemplateBinding Maximum}"
                                Minimum="{TemplateBinding Minimum}"
                                Orientation="{TemplateBinding Orientation}"
                                ViewportSize="{TemplateBinding ViewportSize}"
                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                Value="{TemplateBinding Value,
                                                        Mode=TwoWay}">
                                <Track.DecreaseButton>
                                    <RepeatButton
                                        Name="PART_PageUpButton"
                                        MinWidth="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        CornerRadius="0"
                                        Focusable="False"
                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                </Track.DecreaseButton>
                                <Track.IncreaseButton>
                                    <RepeatButton
                                        Name="PART_PageDownButton"
                                        MinWidth="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        CornerRadius="0"
                                        Focusable="False"
                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                </Track.IncreaseButton>
                                <Thumb Name="thumb" />
                            </Track>
                            <RepeatButton
                                Name="PART_LineDownButton"
                                Grid.Column="2"
                                MinWidth="{DynamicResource ScrollBarThickness}"
                                Padding="4,0"
                                VerticalAlignment="Center"
                                VerticalContentAlignment="Center"
                                Focusable="False"
                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                <PathIcon
                                    Width="10"
                                    Height="10"
                                    Data="{DynamicResource ScrollBarRightGlyph}" />
                            </RepeatButton>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter>
        </Style>
        <Style Selector="^:vertical">
            <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
            <Setter Property="Template">
                <ControlTemplate TargetType="ScrollBar">
                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                        <Grid RowDefinitions="Auto,*,Auto">
                            <RepeatButton
                                Name="PART_LineUpButton"
                                Grid.Row="0"
                                MinHeight="{DynamicResource ScrollBarThickness}"
                                Padding="0,4"
                                VerticalAlignment="Center"
                                HorizontalContentAlignment="Center"
                                VerticalContentAlignment="Center"
                                Focusable="False"
                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                <PathIcon
                                    Width="10"
                                    Height="10"
                                    Data="{DynamicResource ScrollBarUpGlyph}" />
                            </RepeatButton>
                            <Track
                                Grid.Row="1"
                                IsDirectionReversed="True"
                                Maximum="{TemplateBinding Maximum}"
                                Minimum="{TemplateBinding Minimum}"
                                Orientation="{TemplateBinding Orientation}"
                                ViewportSize="{TemplateBinding ViewportSize}"
                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                Value="{TemplateBinding Value,
                                                        Mode=TwoWay}">
                                <Track.DecreaseButton>
                                    <RepeatButton
                                        Name="PART_PageUpButton"
                                        MinHeight="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        CornerRadius="0"
                                        Focusable="False"
                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                </Track.DecreaseButton>
                                <Track.IncreaseButton>
                                    <RepeatButton
                                        Name="PART_PageDownButton"
                                        MinHeight="0"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        CornerRadius="0"
                                        Focusable="False"
                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                </Track.IncreaseButton>
                                <Thumb Name="thumb" />
                            </Track>
                            <RepeatButton
                                Name="PART_LineDownButton"
                                Grid.Row="2"
                                MinHeight="{DynamicResource ScrollBarThickness}"
                                Padding="0,4"
                                HorizontalContentAlignment="Center"
                                VerticalContentAlignment="Center"
                                Focusable="False"
                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                <PathIcon
                                    Width="10"
                                    Height="10"
                                    Data="{DynamicResource ScrollBarDownGlyph}" />
                            </RepeatButton>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter>
        </Style>
        <Style Selector="^ /template/ Thumb#thumb">
            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbForeground}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Border
                            Background="{TemplateBinding Foreground}"
                            CornerRadius="24"
                            UseLayoutRounding="False" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style Selector="^ /template/ Thumb#thumb:pointerover">
            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbPointeroverForeground}" />
        </Style>
        <Style Selector="^:horizontal /template/ Thumb#thumb">
            <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
            <Setter Property="Height" Value="{DynamicResource ScrollBarThumbThickness}" />
        </Style>
        <Style Selector="^:vertical /template/ Thumb#thumb">
            <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
            <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
        </Style>
        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
        </Style>
        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
        </Style>
        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
            <Setter Property="RenderTransform" Value="scale(0.92)" />
        </Style>

    </ControlTheme>
    <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ScrollViewer">
                <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
                    <ScrollContentPresenter
                        Name="PART_ContentPresenter"
                        Grid.RowSpan="2"
                        Grid.ColumnSpan="2"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                        <ScrollContentPresenter.GestureRecognizers>
                            <ScrollGestureRecognizer
                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                        </ScrollContentPresenter.GestureRecognizers>
                    </ScrollContentPresenter>
                    <ScrollBar
                        Name="PART_HorizontalScrollBar"
                        Grid.Row="1"
                        Grid.Column="0"
                        Orientation="Horizontal" />
                    <ScrollBar
                        Name="PART_VerticalScrollBar"
                        Grid.Row="0"
                        Grid.Column="1"
                        Orientation="Vertical" />
                    <Panel
                        Grid.Row="1"
                        Grid.Column="1" />
                </Grid>
            </ControlTemplate>
        </Setter>
        <Style Selector="^ /template/ ScrollBar">
            <Setter Property="Opacity" Value="0"></Setter>
        </Style>
        <Style Selector="^:pointerover">
            <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
                <Setter Property="Opacity" Value="1" />
            </Style>
            <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
                <Setter Property="Opacity" Value="1" />
            </Style>
        </Style>
    </ControlTheme>

    <ControlTheme x:Key="StaticScrollViewer" TargetType="ScrollViewer">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ScrollViewer">
                <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
                    <ScrollContentPresenter
                        Name="PART_ContentPresenter"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                        <ScrollContentPresenter.GestureRecognizers>
                            <ScrollGestureRecognizer
                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                        </ScrollContentPresenter.GestureRecognizers>
                    </ScrollContentPresenter>
                    <ScrollBar
                        Name="PART_HorizontalScrollBar"
                        Grid.Row="1"
                        Grid.Column="0"
                        Orientation="Horizontal" />
                    <ScrollBar
                        Name="PART_VerticalScrollBar"
                        Grid.Row="0"
                        Grid.Column="1"
                        Orientation="Vertical" />
                    <Panel
                        Grid.Row="1"
                        Grid.Column="1" />
                </Grid>
            </ControlTemplate>
        </Setter>
    </ControlTheme>

    <ControlTheme x:Key="SimpleMenuScrollViewer" TargetType="ScrollViewer">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ScrollViewer">
                <DockPanel>
                    <RepeatButton
                        Background="Transparent"
                        BorderThickness="0"
                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
                        DockPanel.Dock="Top">
                        <RepeatButton.IsVisible>
                            <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </RepeatButton.IsVisible>
                        <Path Data="M 0 4 L 8 4 L 4 0 Z" />
                    </RepeatButton>
                    <RepeatButton
                        Background="Transparent"
                        BorderThickness="0"
                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
                        DockPanel.Dock="Bottom">
                        <RepeatButton.IsVisible>
                            <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </RepeatButton.IsVisible>
                        <Path Data="M 0 0 L 4 4 L 8 0 Z" />
                    </RepeatButton>
                    <ScrollContentPresenter Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" />
                </DockPanel>
            </ControlTemplate>
        </Setter>
        <Style Selector="^ /template/ RepeatButton &gt; Path">
            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
        </Style>

        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
        </Style>
    </ControlTheme>
</ResourceDictionary>