From 14c2ff6c027ebdebf68c65a9f13909bcaaecd0ca Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 3 Jul 2023 17:13:01 +0800
Subject: [PATCH] feat: update ScrollBar visual styles.

---
 src/Semi.Avalonia/Controls/ScrollViewer.axaml | 111 ++++++++++--------
 .../Themes/Dark/ScrollViewer.axaml            |  13 +-
 .../Themes/Light/ScrollViewer.axaml           |  12 +-
 3 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
index 9bda75f..dd5d3a8 100644
--- a/src/Semi.Avalonia/Controls/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -21,6 +21,22 @@
             <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">
@@ -34,11 +50,14 @@
                                 Grid.Row="0"
                                 Grid.Column="0"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Column="1"
@@ -54,9 +73,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -64,9 +83,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -74,11 +93,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Column="2"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+                                VerticalContentAlignment="Center"
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarRightGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -95,11 +118,16 @@
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+                                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"
@@ -116,9 +144,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -126,9 +154,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -136,11 +164,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Row="2"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+                                Padding="0,4"
+                                HorizontalContentAlignment="Center"
+                                VerticalContentAlignment="Center"
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarDownGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -174,30 +206,11 @@
             <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeat">
-            <Setter Property="Padding" Value="2" />
-            <Setter Property="BorderThickness" Value="0" />
+        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeattrack">
-            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Template">
-                <ControlTemplate TargetType="RepeatButton">
-                    <Border Background="{TemplateBinding Background}" />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:pointerover">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-        </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </Style>
 
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Themes/Dark/ScrollViewer.axaml b/src/Semi.Avalonia/Themes/Dark/ScrollViewer.axaml
index 6031cb6..55342d4 100644
--- a/src/Semi.Avalonia/Themes/Dark/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ScrollViewer.axaml
@@ -2,11 +2,16 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <sys:Double x:Key="ScrollBarThickness">12</sys:Double>
-    <sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double>
+    <sys:Double x:Key="ScrollBarThickness">14</sys:Double>
+    <sys:Double x:Key="ScrollBarThumbThickness">10</sys:Double>
     <SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent" />
+    <PathGeometry x:Key="ScrollBarLeftGlyph">M16.3176 6.95628V17.0878C16.3176 17.4871 15.8725 17.7253 15.5402 17.5038L7.94161 12.438C7.64474 12.2401 7.64474 11.8039 7.94161 11.606L15.5402 6.54025C15.8725 6.31873 16.3176 6.55693 16.3176 6.95628Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarRightGlyph">M9 17.0657V6.93425C9 6.5349 9.44507 6.29671 9.77735 6.51823L17.376 11.584C17.6728 11.7819 17.6728 12.2181 17.376 12.416L9.77735 17.4818C9.44507 17.7033 9 17.4651 9 17.0657Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarUpGlyph">M17.0839 16.3212H6.9524C6.55305 16.3212 6.31486 15.8761 6.53638 15.5438L11.6021 7.94521C11.8 7.64834 12.2363 7.64834 12.4342 7.94521L17.4999 15.5438C17.7214 15.8761 17.4832 16.3212 17.0839 16.3212Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarDownGlyph">M6.95249 7.72265L17.084 7.72265C17.4833 7.72265 17.7215 8.16772 17.5 8.5L12.4343 16.0986C12.2363 16.3955 11.8001 16.3955 11.6022 16.0986L6.53647 8.5C6.31495 8.16772 6.55315 7.72265 6.95249 7.72265Z</PathGeometry>
+
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml b/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
index 001ccc5..1da1c90 100644
--- a/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
@@ -2,11 +2,15 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <sys:Double x:Key="ScrollBarThickness">12</sys:Double>
-    <sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double>
+    <sys:Double x:Key="ScrollBarThickness">14</sys:Double>
+    <sys:Double x:Key="ScrollBarThumbThickness">10</sys:Double>
     <SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent" />
+    <PathGeometry x:Key="ScrollBarLeftGlyph">M16.3176 6.95628V17.0878C16.3176 17.4871 15.8725 17.7253 15.5402 17.5038L7.94161 12.438C7.64474 12.2401 7.64474 11.8039 7.94161 11.606L15.5402 6.54025C15.8725 6.31873 16.3176 6.55693 16.3176 6.95628Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarRightGlyph">M9 17.0657V6.93425C9 6.5349 9.44507 6.29671 9.77735 6.51823L17.376 11.584C17.6728 11.7819 17.6728 12.2181 17.376 12.416L9.77735 17.4818C9.44507 17.7033 9 17.4651 9 17.0657Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarUpGlyph">M17.0839 16.3212H6.9524C6.55305 16.3212 6.31486 15.8761 6.53638 15.5438L11.6021 7.94521C11.8 7.64834 12.2363 7.64834 12.4342 7.94521L17.4999 15.5438C17.7214 15.8761 17.4832 16.3212 17.0839 16.3212Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarDownGlyph">M6.95249 7.72265L17.084 7.72265C17.4833 7.72265 17.7215 8.16772 17.5 8.5L12.4343 16.0986C12.2363 16.3955 11.8001 16.3955 11.6022 16.0986L6.53647 8.5C6.31495 8.16772 6.55315 7.72265 6.95249 7.72265Z</PathGeometry>
 </ResourceDictionary>