From d712f1664265fed88759a147aacd88c577a352fd Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sat, 25 Jan 2025 13:07:38 +0800
Subject: [PATCH] feat: redesign ScrollViewer.

---
 src/Semi.Avalonia/Controls/ScrollViewer.axaml | 86 +++++++++----------
 .../Themes/Shared/ScrollViewer.axaml          |  4 +-
 2 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
index c16227a..3c24ff7 100644
--- a/src/Semi.Avalonia/Controls/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -2,7 +2,6 @@
     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>
@@ -18,15 +17,16 @@
                     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="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
+                <Border
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}">
                     <ContentPresenter
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -47,24 +47,25 @@
             </Transitions>
         </Setter>
         <Style Selector="^:horizontal">
-            <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
+            <Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="ScrollBar">
-                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
+                    <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"
+                                MinWidth="{StaticResource ScrollBarThickness}"
                                 VerticalAlignment="Center"
                                 Focusable="False"
-                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Width="10"
-                                    Height="10"
-                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Classes="Large"
+                                    Data="{StaticResource ScrollBarLeftGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Column="1"
@@ -73,8 +74,7 @@
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="{TemplateBinding Orientation}"
                                 ViewportSize="{TemplateBinding ViewportSize}"
-                                Value="{TemplateBinding Value,
-                                                        Mode=TwoWay}">
+                                Value="{TemplateBinding Value, Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_PageUpButton"
@@ -83,7 +83,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
+                                        Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -93,7 +93,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
+                                        Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -101,14 +101,13 @@
                                 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"
+                                    Theme="{DynamicResource InnerPathIcon}"
+                                    Classes="Large"
                                     Data="{DynamicResource ScrollBarRightGlyph}" />
                             </RepeatButton>
                         </Grid>
@@ -117,25 +116,26 @@
             </Setter>
         </Style>
         <Style Selector="^:vertical">
-            <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
+            <Setter Property="Width" Value="{StaticResource ScrollBarThickness}" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="ScrollBar">
-                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
+                    <Border
+                        Background="{DynamicResource ScrollBarBackground}"
+                        UseLayoutRounding="False">
                         <Grid RowDefinitions="Auto,*,Auto">
                             <RepeatButton
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
-                                MinHeight="{DynamicResource ScrollBarThickness}"
-                                Padding="0,4"
+                                MinHeight="{StaticResource ScrollBarThickness}"
                                 VerticalAlignment="Center"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
-                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Width="10"
-                                    Height="10"
-                                    Data="{DynamicResource ScrollBarUpGlyph}" />
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Classes="Large"
+                                    Data="{StaticResource ScrollBarUpGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Row="1"
@@ -145,8 +145,7 @@
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="{TemplateBinding Orientation}"
                                 ViewportSize="{TemplateBinding ViewportSize}"
-                                Value="{TemplateBinding Value,
-                                                        Mode=TwoWay}">
+                                Value="{TemplateBinding Value, Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_PageUpButton"
@@ -155,7 +154,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
+                                        Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -165,23 +164,22 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
+                                        Theme="{StaticResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
                             <RepeatButton
                                 Name="PART_LineDownButton"
                                 Grid.Row="2"
-                                MinHeight="{DynamicResource ScrollBarThickness}"
-                                Padding="0,4"
+                                MinHeight="{StaticResource ScrollBarThickness}"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
-                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                Theme="{StaticResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Width="10"
-                                    Height="10"
-                                    Data="{DynamicResource ScrollBarDownGlyph}" />
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Classes="Large"
+                                    Data="{StaticResource ScrollBarDownGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -212,13 +210,13 @@
             <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton > PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton:pressed > PathIcon">
             <Setter Property="RenderTransform" Value="scale(0.92)" />
         </Style>
 
@@ -268,7 +266,6 @@
                         Grid.Row="0"
                         Grid.Column="1"
                         Orientation="Vertical" />
-                    <Panel Grid.Row="1" Grid.Column="1" />
                 </Grid>
             </ControlTemplate>
         </Setter>
@@ -316,7 +313,6 @@
                         Grid.Row="0"
                         Grid.Column="1"
                         Orientation="Vertical" />
-                    <Panel Grid.Row="1" Grid.Column="1" />
                 </Grid>
             </ControlTemplate>
         </Setter>
@@ -361,12 +357,12 @@
                 </DockPanel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
+        <Style Selector="^ /template/ RepeatButton > Path">
             <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
         </Style>
 
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
+        <Style Selector="^ /template/ RepeatButton:pointerover > Path">
             <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml b/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
index 771973a..4c8da9e 100644
--- a/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ScrollViewer.axaml
@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiFontSizeRegular" />
-    <x:Double x:Key="ScrollBarThumbThickness">10</x:Double>
+    <StaticResource x:Key="ScrollBarThickness" ResourceKey="SemiSpacingTight" />
+    <StaticResource x:Key="ScrollBarThumbThickness" ResourceKey="SemiSpacingTight" />
     <StaticResource x:Key="ScrollBarUpGlyph" ResourceKey="SemiIconSmallTriangleTop" />
     <StaticResource x:Key="ScrollBarDownGlyph" ResourceKey="SemiIconSmallTriangleDown" />
     <StaticResource x:Key="ScrollBarLeftGlyph" ResourceKey="SemiIconSmallTriangleLeft" />