From 31b94537ac3265c45222bac40c7b148a6c25f513 Mon Sep 17 00:00:00 2001
From: Dong Bin <14807942+rabbitism@users.noreply.github.com>
Date: Fri, 16 Dec 2022 02:01:32 +0800
Subject: [PATCH] feat: add ScrollBar and ScrollViewer theme. (#9)

---
 src/Semi.Avalonia.Demo/Pages/Overview.axaml   | 177 ++++++-----
 .../Pages/RadioButtonDemo.axaml               |   4 +-
 src/Semi.Avalonia/Controls/Controls.axaml     |   3 +-
 src/Semi.Avalonia/Controls/ScrollViewer.axaml | 281 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/ScrollViewer.axaml           |  11 +
 6 files changed, 395 insertions(+), 82 deletions(-)
 create mode 100644 src/Semi.Avalonia/Controls/ScrollViewer.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml

diff --git a/src/Semi.Avalonia.Demo/Pages/Overview.axaml b/src/Semi.Avalonia.Demo/Pages/Overview.axaml
index 629004e..3b12151 100644
--- a/src/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/src/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -3,86 +3,105 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
     d:DesignWidth="800" mc:Ignorable="d">
-    <StackPanel Margin="10" Spacing="5">
-        <TextBlock
-            Classes="H4" Text="Welcome to Semi Avalonia" HorizontalAlignment="Center"
-            Theme="{StaticResource TitleTextBlock}" />
-        
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <Button Classes="Primary">主要按钮</Button>
-            <Button Classes="Secondary">次要按钮</Button>
-            <Button Classes="Tertiary">第三按钮</Button>
-            <Button Classes="Warning">警告按钮</Button>
-            <Button Classes="Danger">危险按钮</Button>
-            <Button Classes="Primary" IsEnabled="False">禁用按钮</Button>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-            <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-            <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-            <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-            <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-            <Button Classes="Primary" IsEnabled="False" Theme="{DynamicResource SolidButton}">Danger</Button>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <Label Theme="{StaticResource TagLabel}">Label</Label>
-            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal" Spacing="20">
-            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 0 16 0">
-                <RadioButton Margin="0 0 8 0">Option 1</RadioButton>
-                <RadioButton>Option 2</RadioButton>
+    <ScrollViewer>
+        <StackPanel Margin="10" Spacing="5">
+            <TextBlock
+                HorizontalAlignment="Center" Classes="H4"
+                Text="Welcome to Semi Avalonia"
+                Theme="{StaticResource TitleTextBlock}" />
+
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary">主要按钮</Button>
+                <Button Classes="Secondary">次要按钮</Button>
+                <Button Classes="Tertiary">第三按钮</Button>
+                <Button Classes="Warning">警告按钮</Button>
+                <Button Classes="Danger">危险按钮</Button>
+                <Button Classes="Primary" IsEnabled="False">禁用按钮</Button>
             </StackPanel>
-            <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
-                <StackPanel Orientation="Horizontal">
-                    <RadioButton Theme="{StaticResource ButtonRadioButton}" IsChecked="True">选项 1</RadioButton>
-                    <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
+                <Button
+                    Classes="Primary" IsEnabled="False"
+                    Theme="{DynamicResource SolidButton}">
+                    Danger
+                </Button>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <StackPanel
+                    Margin="0,0,16,0" VerticalAlignment="Center"
+                    Orientation="Horizontal">
+                    <RadioButton Margin="0,0,8,0">Option 1</RadioButton>
+                    <RadioButton>Option 2</RadioButton>
                 </StackPanel>
-            </Border>
+                <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton IsChecked="True" Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
+                        <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Margin="4" IsChecked="True"
+                    Theme="{StaticResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
+                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
+                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+            </StackPanel>
+            <TabControl>
+                <TabItem Header="Tab 1">
+                    <TextBlock Margin="8">Tab Content 1</TextBlock>
+                </TabItem>
+                <TabItem Header="Tab 2">
+                    <TextBlock Margin="8">Tab Content 2</TextBlock>
+                </TabItem>
+                <TabItem Header="Tab 3">
+                    <TextBlock Margin="8">Tab Content 3</TextBlock>
+                </TabItem>
+            </TabControl>
+            <Grid ColumnDefinitions="* * *">
+                <Border Theme="{StaticResource CardBorder}">
+                    <TextBlock>Card</TextBlock>
+                </Border>
+                <Border
+                    Grid.Column="1" Classes="Hover"
+                    Theme="{StaticResource CardBorder}">
+                    <TextBlock>Shadow on hover</TextBlock>
+                </Border>
+                <Border
+                    Grid.Column="2" Classes="Shadow"
+                    Theme="{StaticResource CardBorder}">
+                    <TextBlock>Shadow</TextBlock>
+                </Border>
+            </Grid>
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                    <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}" IsChecked="True">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                    <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                </StackPanel>
-            </RadioButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <CheckBox Margin="0 0 8 0 ">Avalonia</CheckBox>
-            <CheckBox Margin="0 0 8 0 " IsChecked="True">WPF</CheckBox>
-            <CheckBox IsThreeState="True" IsChecked="{x:Null}">UWP</CheckBox>
-        </StackPanel>
-        <TabControl>
-            <TabItem Header="Tab 1" >
-                <TextBlock Margin="8">Tab Content 1</TextBlock>
-            </TabItem>
-            <TabItem Header="Tab 2" ><TextBlock Margin="8">Tab Content 2</TextBlock></TabItem>
-            <TabItem Header="Tab 3" ><TextBlock Margin="8">Tab Content 3</TextBlock></TabItem>
-        </TabControl>
-        <Grid ColumnDefinitions="* * *">
-            <Border Theme="{StaticResource CardBorder}">
-                <TextBlock>Card</TextBlock>
-            </Border>
-            <Border Grid.Column="1" Classes="Hover" Theme="{StaticResource CardBorder}">
-                <TextBlock>Shadow on hover</TextBlock>
-            </Border>
-            <Border Grid.Column="2" Classes="Shadow" Theme="{StaticResource CardBorder}">
-                <TextBlock>Shadow</TextBlock>
-            </Border>
-        </Grid>
-    </StackPanel>
+    </ScrollViewer>
 </UserControl>
diff --git a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
index bb655cd..9c4a440 100644
--- a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
+++ b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -14,8 +14,8 @@
         <TextBlock Text="Radio Button as Button" />
         <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
+                <RadioButton Classes="Small" >小1</RadioButton>
+                <RadioButton Classes="Small" >小2</RadioButton>
             </StackPanel>
         </Border>
         <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 8d57c8d..82ce358 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -6,8 +6,9 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia/Controls/RepeatButton.axaml"/>
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/RepeatButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/SelectableTextBlock.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/ScrollViewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
new file mode 100644
index 0000000..81944b4
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -0,0 +1,281 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <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>
+        </StackPanel>
+    </Design.PreviewWith>
+    <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}"
+                                VerticalAlignment="Center" Classes="repeat"
+                                CornerRadius="0" Focusable="False">
+                                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+                            </RepeatButton>
+                            <Track
+                                Grid.Column="1"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
+                                ViewportSize="{TemplateBinding ViewportSize}"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_PageUpButton" MinWidth="0"
+                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                                        Classes="repeattrack" CornerRadius="0"
+                                        Focusable="False" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_PageDownButton" MinWidth="0"
+                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                                        Classes="repeattrack" CornerRadius="0"
+                                        Focusable="False" />
+                                </Track.IncreaseButton>
+                                <Thumb Name="thumb" />
+                            </Track>
+                            <RepeatButton
+                                Name="PART_LineDownButton" Grid.Column="2"
+                                MinWidth="{DynamicResource ScrollBarThickness}"
+                                VerticalAlignment="Center" Classes="repeat"
+                                CornerRadius="0" Focusable="False">
+                                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+                            </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}"
+                                HorizontalAlignment="Center" Classes="repeat"
+                                CornerRadius="0" Focusable="False">
+                                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+                            </RepeatButton>
+                            <Track
+                                Grid.Row="1" IsDirectionReversed="True"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="{TemplateBinding Orientation}"
+                                ViewportSize="{TemplateBinding ViewportSize}"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_PageUpButton" MinHeight="0"
+                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                                        Classes="repeattrack" CornerRadius="0"
+                                        Focusable="False" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_PageDownButton" MinHeight="0"
+                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
+                                        Classes="repeattrack" CornerRadius="0"
+                                        Focusable="False" />
+                                </Track.IncreaseButton>
+                                <Thumb Name="thumb" />
+                            </Track>
+                            <RepeatButton
+                                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" />
+                            </RepeatButton>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+        <Style Selector="^ /template/ Thumb#thumb">
+            <Setter Property="Background" Value="{DynamicResource ScrollBarThumbForeground}" />
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Thumb">
+                        <Border
+                            Background="{TemplateBinding Background}"
+                            CornerRadius="24" UseLayoutRounding="False" />
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+        <Style Selector="^ /template/ Thumb#thumb:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
+        </Style>
+        <Style Selector="^ /template/ Thumb#thumb:pressed">
+            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
+        </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.repeat">
+            <Setter Property="Padding" Value="2" />
+            <Setter Property="BorderThickness" Value="0" />
+        </Style>
+        <Style Selector="^ /template/ RepeatButton.repeattrack">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border Background="{TemplateBinding Background}" />
+                </ControlTemplate>
+            </Setter>
+        </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>
+
+    </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"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        Content="{TemplateBinding Content}"
+                        Extent="{TemplateBinding Extent,
+                                                 Mode=TwoWay}"
+                        IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}"
+                        Viewport="{TemplateBinding Viewport,
+                                                   Mode=TwoWay}"
+                        Offset="{TemplateBinding Offset,
+                                                 Mode=TwoWay}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                    <ScrollBar
+                        Name="horizontalScrollBar" Grid.Row="1"
+                        Grid.Column="0" Focusable="False"
+                        LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                        Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
+                        Orientation="Horizontal"
+                        SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                        ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
+                        Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
+                        Value="{TemplateBinding HorizontalScrollBarValue,
+                                                Mode=TwoWay}" />
+                    <ScrollBar
+                        Name="verticalScrollBar" Grid.Row="0"
+                        Grid.Column="1" Focusable="False"
+                        LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                        Maximum="{TemplateBinding VerticalScrollBarMaximum}"
+                        Orientation="Vertical"
+                        SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                        ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
+                        Visibility="{TemplateBinding VerticalScrollBarVisibility}"
+                        Value="{TemplateBinding VerticalScrollBarValue,
+                                                Mode=TwoWay}" />
+                    <Panel
+                        Grid.Row="1" Grid.Column="1"
+                        Background="{DynamicResource ColorScrollBarBackground}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ ScrollBar#horizontalScrollBar">
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+            <Style Selector="^ /template/ ScrollBar#verticalScrollBar">
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+        </Style>
+    </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">
+                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding 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">
+                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding 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}"
+                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        Content="{TemplateBinding Content}"
+                        Extent="{TemplateBinding Extent,
+                                                 Mode=TwoWay}"
+                        Viewport="{TemplateBinding Viewport,
+                                                   Mode=TwoWay}"
+                        Offset="{TemplateBinding Offset,
+                                                 Mode=TwoWay}" />
+                </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>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 7352bc2..4775f36 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -7,6 +7,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ScrollViewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml b/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
new file mode 100644
index 0000000..c7b67ff
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/ScrollViewer.axaml
@@ -0,0 +1,11 @@
+<ResourceDictionary
+    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>
+    <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" />
+</ResourceDictionary>