Initial attempt at porting fluent scrolling.

src/Avalonia.Controls/Primitives/ScrollBar.cs

@@ -3,6 +3,7 @@ using Avalonia.Data;
 using Avalonia.Interactivity;
 using Avalonia.Input;
 using Avalonia.Layout;
+using Avalonia.Threading;
 
 namespace Avalonia.Controls.Primitives
 {
@@ -44,6 +45,7 @@ namespace Avalonia.Controls.Primitives
         private Button _lineDownButton;
         private Button _pageUpButton;
         private Button _pageDownButton;
+        private DispatcherTimer _collapseTimer;
 
         /// <summary>
         /// Initializes static members of the <see cref="ScrollBar"/> class. 
@@ -143,6 +145,22 @@ namespace Avalonia.Controls.Primitives
             }
         }
 
+        protected override void OnPointerEnter(PointerEventArgs e)
+        {
+            base.OnPointerEnter(e);
+
+            ResetCollapseTimer();
+
+            Expand();
+        }
+
+        protected override void OnPointerLeave(PointerEventArgs e)
+        {
+            base.OnPointerLeave(e);
+
+            CollapseAfterDelay();
+        }
+
         protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
         {
             if (_lineUpButton != null)
@@ -193,6 +211,50 @@ namespace Avalonia.Controls.Primitives
             }
         }
 
+        private void CollapseAfterDelay()
+        {
+            if (_collapseTimer != null)
+            {
+                _collapseTimer.Stop();
+            }
+            else
+            {
+                _collapseTimer = new DispatcherTimer(TimeSpan.FromSeconds(2), DispatcherPriority.Normal, OnCollapseTimerTick);
+            }
+
+            _collapseTimer.Start();
+        }
+
+        private void ResetCollapseTimer(bool restart = false)
+        {
+            if (_collapseTimer != null && _collapseTimer.IsEnabled)
+            {
+                _collapseTimer.Stop();
+
+                if (restart)
+                {
+                    _collapseTimer.Start();
+                }
+            }
+        }
+
+        private void OnCollapseTimerTick(object sender, EventArgs e)
+        {
+            ResetCollapseTimer();
+
+            Collapse();
+        }
+
+        private void Collapse()
+        {
+            PseudoClasses.Set(":expanded", false);
+        }
+
+        private void Expand()
+        {
+            PseudoClasses.Set(":expanded", true);
+        }
+
         private void LineUpClick(object sender, RoutedEventArgs e)
         {
             SmallDecrement();

src/Avalonia.Controls/Primitives/Track.cs

@@ -259,7 +259,7 @@ namespace Avalonia.Controls.Primitives
                 CoerceLength(ref increaseButtonLength, arrangeSize.Width);
                 CoerceLength(ref thumbLength, arrangeSize.Width);
 
-                offset = offset.WithY(isDirectionReversed ? increaseButtonLength + thumbLength : 0.0);
+                offset = offset.WithX(isDirectionReversed ? increaseButtonLength + thumbLength : 0.0);
                 pieceSize = pieceSize.WithWidth(decreaseButtonLength);
 
                 if (DecreaseButton != null)

src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml

@@ -19,7 +19,6 @@
     <Color x:Key="SystemChromeBlackMediumColor">#FF000000</Color>
     <Color x:Key="SystemChromeBlackMediumLowColor">#FF000000</Color>
     <Color x:Key="SystemChromeDisabledHighColor">#FF333333</Color>
-    <Color x:Key="SystemChromeDisabledLowColor">#FF9A9A9A</Color>
     <Color x:Key="SystemChromeGrayColor">#FF808080</Color>
     <Color x:Key="SystemChromeHighColor">#FF808080</Color>
     <Color x:Key="SystemChromeLowColor">#FF151515</Color>
@@ -351,5 +350,53 @@
     <SolidColorBrush x:Key="ToolTipBackgroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
     <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
+
+    <!-- BaseResources for ScrollBar.xaml -->
+    <StaticResource x:Key="ScrollBarBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarForeground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundListLowBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundPressed" ResourceKey="SystemControlForegroundAltHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundDisabled" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFill" ResourceKey="SystemControlForegroundChromeDisabledLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillPointerOver" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillPressed" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <SolidColorBrush x:Key="ScrollBarTrackFill" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9" />
+    <SolidColorBrush x:Key="ScrollBarTrackFillPointerOver" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9" />
+    <StaticResource x:Key="ScrollBarTrackFillDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStroke" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStrokePointerOver" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStrokeDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <StaticResource x:Key="ScrollBarPanningThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeHighBrush" />
+    <StaticResource x:Key="ScrollBarThumbBackgroundColor" ResourceKey="SystemBaseLowColor" />
+    <StaticResource x:Key="ScrollBarPanningThumbBackgroundColor" ResourceKey="SystemChromeDisabledLowColor" />
+    <SolidColorBrush x:Key="ScrollBarThumbBackground" Color="{StaticResource ScrollBarThumbBackgroundColor}" />
+    <SolidColorBrush x:Key="ScrollBarPanningThumbBackground" Color="{StaticResource ScrollBarPanningThumbBackgroundColor}" />
+    <x:String x:Key="ScrollBarExpandDuration">00:00:00.1</x:String>
+    <x:String x:Key="ScrollBarExpandBeginTime">00:00:00.40</x:String>
+    <x:String x:Key="ScrollBarContractBeginTime">00:00:02.00</x:String>
+    <x:String x:Key="ScrollBarContractDelay">00:00:02</x:String>
+    <x:String x:Key="ScrollBarContractDuration">00:00:00.1</x:String>
+    <x:String x:Key="ScrollBarContractFinalKeyframe">00:00:02.1</x:String>
+    <x:Double x:Key="ScrollBarSize">16</x:Double>
+    <x:Double x:Key="SmallScrollThumbScale">0.125</x:Double>
+    <x:Double x:Key="SmallScrollThumbOffset">-2</x:Double>
+    <TransformOperations x:Key="VerticalSmallScrollThumbScaleTransform">scaleX(0.125) translateX(-2px)</TransformOperations>
+    <TransformOperations x:Key="HorizontalSmallScrollThumbScaleTransform">scaleY(0.125) translateY(-2px)</TransformOperations>
+    <x:Double x:Key="ScrollBarButtonArrowIconFontSize">8</x:Double>
   </Style.Resources>
 </Style>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -431,5 +431,69 @@
     <SolidColorBrush x:Key="ToolTipBorderThemeBrush" Color="#FF808080" />
     <SolidColorBrush x:Key="ToolTipForegroundThemeBrush" Color="#FF666666" />
     <Thickness x:Key="ToolTipBorderThemePadding">8,5,8,7</Thickness>
+
+    <!-- Resources for ScrollBar.xaml -->
+    <x:Double x:Key="ScrollBarTrackBorderThemeThickness">0</x:Double>
+    <Thickness x:Key="ScrollBarPanningBorderThemeThickness">1</Thickness>
+    <StaticResource x:Key="ScrollBarBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarForeground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundListLowBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
+    <StaticResource x:Key="ScrollBarButtonBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundPressed" ResourceKey="SystemControlForegroundAltHighBrush" />
+    <StaticResource x:Key="ScrollBarButtonArrowForegroundDisabled" ResourceKey="SystemControlForegroundBaseLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFill" ResourceKey="SystemControlForegroundChromeDisabledLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillPointerOver" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillPressed" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
+    <StaticResource x:Key="ScrollBarThumbFillDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <SolidColorBrush x:Key="ScrollBarTrackFill" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9" />
+    <SolidColorBrush x:Key="ScrollBarTrackFillPointerOver" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9" />
+    <StaticResource x:Key="ScrollBarTrackFillDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStroke" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStrokePointerOver" ResourceKey="SystemControlForegroundTransparentBrush" />
+    <StaticResource x:Key="ScrollBarTrackStrokeDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    <StaticResource x:Key="ScrollBarThumbBackgroundColor" ResourceKey="SystemBaseLowColor" />
+    <StaticResource x:Key="ScrollBarPanningThumbBackgroundColor" ResourceKey="SystemChromeDisabledLowColor" />
+    <SolidColorBrush x:Key="ScrollBarThumbBackground" Color="{StaticResource ScrollBarThumbBackgroundColor}" />
+    <SolidColorBrush x:Key="ScrollBarPanningThumbBackground" Color="{StaticResource ScrollBarPanningThumbBackgroundColor}" />
+    <StaticResource x:Key="ScrollBarPanningThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeHighBrush" />
+    <SolidColorBrush x:Key="ScrollBarButtonForegroundThemeBrush" Color="#99000000" />
+    <SolidColorBrush x:Key="ScrollBarButtonPointerOverBackgroundThemeBrush" Color="#FFDADADA" />
+    <SolidColorBrush x:Key="ScrollBarButtonPointerOverBorderThemeBrush" Color="#FFDADADA" />
+    <SolidColorBrush x:Key="ScrollBarButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ScrollBarButtonPressedBackgroundThemeBrush" Color="#99000000" />
+    <SolidColorBrush x:Key="ScrollBarButtonPressedBorderThemeBrush" Color="#99000000" />
+    <SolidColorBrush x:Key="ScrollBarButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ScrollBarPanningBackgroundThemeBrush" Color="#FFCDCDCD" />
+    <SolidColorBrush x:Key="ScrollBarPanningBorderThemeBrush" Color="#7D9A9A9A" />
+    <SolidColorBrush x:Key="ScrollBarThumbBackgroundThemeBrush" Color="#FFCDCDCD" />
+    <SolidColorBrush x:Key="ScrollBarThumbBorderThemeBrush" Color="#3B555555" />
+    <SolidColorBrush x:Key="ScrollBarThumbPointerOverBackgroundThemeBrush" Color="#FFDADADA" />
+    <SolidColorBrush x:Key="ScrollBarThumbPointerOverBorderThemeBrush" Color="#6BB7B7B7" />
+    <SolidColorBrush x:Key="ScrollBarThumbPressedBackgroundThemeBrush" Color="#99000000" />
+    <SolidColorBrush x:Key="ScrollBarThumbPressedBorderThemeBrush" Color="#ED555555" />
+    <SolidColorBrush x:Key="ScrollBarTrackBackgroundThemeBrush" Color="#59D5D5D5" />
+    <SolidColorBrush x:Key="ScrollBarTrackBorderThemeBrush" Color="#59D5D5D5" />
+    <x:String x:Key="ScrollBarExpandDuration">00:00:00.1</x:String>
+    <x:String x:Key="ScrollBarContractDelay">00:00:02</x:String>
+    <x:String x:Key="ScrollBarContractDuration">00:00:00.1</x:String>
+    <x:String x:Key="ScrollBarContractFinalKeyframe">00:00:02.1</x:String>
+    <x:Double x:Key="ScrollBarSize">16</x:Double>
+    <x:Double x:Key="ScrollBarButtonArrowIconFontSize">8</x:Double>
+    <x:String x:Key="ScrollBarExpandBeginTime">00:00:00.40</x:String>
+    <x:String x:Key="ScrollBarContractBeginTime">00:00:02.00</x:String>
+
   </Style.Resources>
 </Style>

src/Avalonia.Themes.Fluent/ScrollBar.xaml

@@ -1,142 +1,265 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
   <Style Selector="ScrollBar">
-    <Setter Property="Cursor" Value="Arrow" />
+    <Setter Property="MinWidth" Value="{DynamicResource ScrollBarSize}" />
+    <Setter Property="MinHeight" Value="{DynamicResource ScrollBarSize}" />
+    <Setter Property="Background" Value="{DynamicResource ScrollBarBackground}" />
+    <Setter Property="Foreground" Value="{DynamicResource ScrollBarForeground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarBorderBrush}" />
+  </Style>
+
+  <Style Selector="ScrollBar:vertical">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{DynamicResource ThemeControlMidBrush}"
+        <Grid x:Name="Root">
-                UseLayoutRounding="False">
+          
-          <Grid RowDefinitions="Auto,*,Auto">
+          <Border x:Name="VerticalRoot" 
-            <RepeatButton Name="PART_LineUpButton" HorizontalAlignment="Center"
+                  Background="{TemplateBinding Background}"
-                          Classes="repeat"
+                  BorderBrush="{TemplateBinding BorderBrush}">
-                          Grid.Row="0"
+            <Grid RowDefinitions="Auto,*,Auto">
-                          Focusable="False"
+
-                          MinHeight="{DynamicResource ScrollBarThickness}">
+              <Rectangle x:Name="TrackRect" Grid.RowSpan="3" Margin="0"/>
-              <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+
-            </RepeatButton>
+              <RepeatButton Name="PART_LineUpButton"
-            <Track Grid.Row="1"
+                            HorizontalAlignment="Center"
-                   Grid.Column="1"
+                            Classes="line up"
-                   Minimum="{TemplateBinding Minimum}"
+                            Grid.Row="0"
-                   Maximum="{TemplateBinding Maximum}"
+                            Focusable="False"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                            MinWidth="{DynamicResource ScrollBarSize}"
-                   ViewportSize="{TemplateBinding ViewportSize}"
+                            Height="{DynamicResource ScrollBarSize}">
-                   Orientation="{TemplateBinding Orientation}"
+              </RepeatButton>
-                   IsDirectionReversed="True">
+
-              <Track.DecreaseButton>
+              <Track Grid.Row="1"
-                <RepeatButton Name="PART_PageUpButton"
+                     Minimum="{TemplateBinding Minimum}"
-                              Classes="repeattrack"
+                     Maximum="{TemplateBinding Maximum}"
-                              Focusable="False"/>
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
-              </Track.DecreaseButton>
+                     ViewportSize="{TemplateBinding ViewportSize}"
-              <Track.IncreaseButton>
+                     Orientation="{TemplateBinding Orientation}"
-                <RepeatButton Name="PART_PageDownButton"
+                     IsDirectionReversed="True">
-                              Classes="repeattrack"
+                <Track.DecreaseButton>
-                              Focusable="False"/>
+                  <RepeatButton Name="PART_PageUpButton"
-              </Track.IncreaseButton>
+                                Classes="largeIncrease"
-              <Thumb Name="thumb"/>
+                                Focusable="False"/>
-            </Track>
+                </Track.DecreaseButton>
-            <RepeatButton Name="PART_LineDownButton" HorizontalAlignment="Center"
+                <Track.IncreaseButton>
-                          Classes="repeat"
+                  <RepeatButton Name="PART_PageDownButton"
-                          Grid.Row="2"
+                                Classes="largeIncrease"
-                          Grid.Column="2"
+                                Focusable="False"/>
-                          Focusable="False"
+                </Track.IncreaseButton>
-                          MinHeight="{DynamicResource ScrollBarThickness}">
+                <Thumb Classes="thumb"
-              <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+                       Opacity="1"
-            </RepeatButton>
+                       Width="{DynamicResource ScrollBarSize}"
-          </Grid>
+                       MinHeight="{DynamicResource ScrollBarSize}"
-        </Border>
+                       RenderTransformOrigin="100%,50%">
+                </Thumb>
+              </Track>
+
+              <RepeatButton Name="PART_LineDownButton" 
+                            HorizontalAlignment="Center"
+                            Classes="line down"
+                            Grid.Row="2"
+                            Focusable="False"
+                            MinWidth="{DynamicResource ScrollBarSize}"
+                            Height="{DynamicResource ScrollBarSize}">
+              </RepeatButton>
+
+            </Grid>
+          </Border>
+
+        </Grid>
       </ControlTemplate>
     </Setter>
   </Style>
+
   <Style Selector="ScrollBar:horizontal">
-    <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{DynamicResource ThemeControlMidBrush}"
+        <Grid x:Name="Root">
-                UseLayoutRounding="False">
+
-          <Grid ColumnDefinitions="Auto,*,Auto">
+          <Border x:Name="HorizontalRoot" 
-            <RepeatButton Name="PART_LineUpButton" VerticalAlignment="Center"
+                  Background="{TemplateBinding Background}"
-                          Classes="repeat"
+                  BorderBrush="{TemplateBinding BorderBrush}">
-                          Grid.Row="0"
+            <Grid ColumnDefinitions="Auto,*,Auto">
-                          Grid.Column="0"
+
-                          Focusable="False"
+              <Rectangle x:Name="TrackRect" Grid.ColumnSpan="3" Margin="0"/>
-                          MinWidth="{DynamicResource ScrollBarThickness}">
+
-              <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+              <RepeatButton Name="PART_LineUpButton"
-            </RepeatButton>
+                            VerticalAlignment="Center"
-            <Track Grid.Row="1"
+                            Classes="line up"
-                   Grid.Column="1"
+                            Grid.Column="0"
-                   Minimum="{TemplateBinding Minimum}"
+                            Focusable="False"
-                   Maximum="{TemplateBinding Maximum}"
+                            MinHeight="{DynamicResource ScrollBarSize}"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                            Width="{DynamicResource ScrollBarSize}">
-                   ViewportSize="{TemplateBinding ViewportSize}"
+              </RepeatButton>
-                   Orientation="{TemplateBinding Orientation}">
+
-              <Track.DecreaseButton>
+              <Track Grid.Column="1"
-                <RepeatButton Name="PART_PageUpButton"
+                     Minimum="{TemplateBinding Minimum}"
-                              Classes="repeattrack"
+                     Maximum="{TemplateBinding Maximum}"
-                              Focusable="False"/>
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
-              </Track.DecreaseButton>
+                     ViewportSize="{TemplateBinding ViewportSize}"
-              <Track.IncreaseButton>
+                     Orientation="{TemplateBinding Orientation}">
-                <RepeatButton Name="PART_PageDownButton"
+                <Track.DecreaseButton>
-                              Classes="repeattrack"
+                  <RepeatButton Name="PART_PageUpButton"
-                              Focusable="False"/>
+                                Classes="largeIncrease"
-              </Track.IncreaseButton>
+                                Focusable="False" />
-              <Thumb Name="thumb"/>
+                </Track.DecreaseButton>
-            </Track>
+                <Track.IncreaseButton>
-            <RepeatButton Name="PART_LineDownButton" VerticalAlignment="Center"
+                  <RepeatButton Name="PART_PageDownButton"
-                          Classes="repeat"
+                                Classes="largeIncrease"
-                          Grid.Row="2"
+                                Focusable="False" />
-                          Grid.Column="2"
+                </Track.IncreaseButton>
-                          Focusable="False"
+                <Thumb Classes="thumb"
-                          MinWidth="{DynamicResource ScrollBarThickness}">
+                       Opacity="1"
-              <Path Data="M 0 0 L 4 4 L 0 8 Z"  />
+                       Height="{DynamicResource ScrollBarSize}"
-            </RepeatButton>
+                       MinWidth="{DynamicResource ScrollBarSize}"
-          </Grid>
+                       RenderTransformOrigin="50%,100%">
-        </Border>
+                </Thumb>
+              </Track>
+
+              <RepeatButton Name="PART_LineDownButton" 
+                            VerticalAlignment="Center"
+                            Classes="line down"
+                            Grid.Column="2"
+                            Focusable="False"
+                            MinHeight="{DynamicResource ScrollBarSize}"
+                            Width="{DynamicResource ScrollBarSize}">
+              </RepeatButton>
+
+            </Grid>
+          </Border>
+
+        </Grid>
       </ControlTemplate>
     </Setter>
   </Style>
-  <Style Selector="ScrollBar /template/ Thumb#thumb">
+
-    <Setter Property="Background" Value="{DynamicResource ThemeControlMidHighBrush}"/>
+  <Style Selector="ScrollBar:expanded /template/ Grid#Root">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" />
+  </Style>
+
+  <Style Selector="ScrollBar /template/ Thumb.thumb">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
-          <Border Background="{TemplateBinding Background}"/>
+          <Border x:Name="ThumbVisual" Background="{TemplateBinding Background}" />
         </ControlTemplate>
       </Setter.Value>
     </Setter>
+    <Setter Property="Transitions">
+      <Transitions>
+        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />
+      </Transitions>
+    </Setter>
   </Style>
-  <Style Selector="ScrollBar /template/ Thumb#thumb:pointerover">
+
-    <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}"/>
+  <Style Selector="ScrollBar:vertical /template/ Thumb.thumb">
+    <Setter Property="RenderTransform" Value="{DynamicResource VerticalSmallScrollThumbScaleTransform}"/>
   </Style>
-  <Style Selector="ScrollBar /template/ Thumb#thumb:pressed">
+
-    <Setter Property="Background" Value="{DynamicResource ThemeControlVeryHighBrush}"/>
+  <Style Selector="ScrollBar:horizontal /template/ Thumb.thumb">
+    <Setter Property="RenderTransform" Value="{DynamicResource HorizontalSmallScrollThumbScaleTransform}"/>
   </Style>
-  <Style Selector="ScrollBar:horizontal /template/ Thumb#thumb">
+
-    <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
+  <Style Selector="ScrollBar:expanded /template/ Thumb.thumb">
-    <Setter Property="Height" Value="{DynamicResource ScrollBarThumbThickness}" />
+    <Setter Property="RenderTransform" Value="none"/>
+    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" />
   </Style>
-  <Style Selector="ScrollBar:vertical">
+
-    <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
+  <Style Selector="ScrollBar /template/ Thumb.thumb /template/ Border#ThumbVisual">
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Transitions">
+      <Transitions>
+        <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.1"/>
+      </Transitions>
+    </Setter>
   </Style>
-  <Style Selector="ScrollBar:vertical /template/ Thumb#thumb">
+
-    <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
+  <Style Selector="ScrollBar:expanded /template/ Thumb.thumb /template/ Border#ThumbVisual">
-    <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
+    <Setter Property="CornerRadius" Value="0"/>
   </Style>
-  <Style Selector="ScrollBar /template/ RepeatButton.repeat">
+
-    <Setter Property="Padding" Value="2" />
+  <Style Selector="ScrollBar /template/ Thumb.thumb:pointerover">
-    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" />
+  </Style>
+
+  <Style Selector="ScrollBar /template/ Thumb.thumb:pressed">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPressed}" />
+  </Style>
+
+  <Style Selector="ScrollBar /template/ Thumb.thumb:disabled">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillDisabled}" />
   </Style>
-  <Style Selector="ScrollBar /template/ RepeatButton.repeattrack">
+
+  <Style Selector="ScrollBar /template/ RepeatButton.line">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}" />
+        <Border x:Name="Root" Background="{DynamicResource ScrollBarButtonBackground}"
+                BorderBrush="{DynamicResource ScrollBarButtonBorderBrush}">
+          <Path VerticalAlignment="Center" HorizontalAlignment="Center" Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
+        </Border>
       </ControlTemplate>
     </Setter>
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.up /template/ Path">
+    <Setter Property="Data" Value="M 0 4 L 8 4 L 4 0 Z" />
+  </Style>
+
+  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.down /template/ Path">
+    <Setter Property="Data" Value="M 0 0 L 4 4 L 8 0 Z" />
+  </Style>
+
+  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.up /template/ Path">
+    <Setter Property="Data" Value="M 4 0 L 4 8 L 0 4 Z" />
+  </Style>
+
+  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.down /template/ Path">
+    <Setter Property="Data" Value="M 0 0 L 4 4 L 0 8 Z" />
+  </Style>
+
+  <Style Selector="ScrollBar:expanded /template/ RepeatButton.line">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+
+  <Style Selector="ScrollBar /template/ Rectangle#TrackRect">
+    <Setter Property="StrokeThickness" Value="{DynamicResource ScrollBarTrackBorderThemeThickness}" />
+    <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFill}" />
+    <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStroke}" />
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity"  Duration="0:0:0.1" />
+      </Transitions>
+    </Setter>
   </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton > Path">
+  <Style Selector="ScrollBar:expanded /template/ Rectangle#TrackRect">
-    <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" />
+    <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" />
+    <Setter Property="Opacity" Value="1" />
   </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton:pointerover > Path">
+  <Style Selector="ScrollBar /template/ RepeatButton.largeIncrease">
-    <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}" />
+      </ControlTemplate>
+    </Setter>
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="VerticalAlignment" Value="Stretch"/>
+    <Setter Property="HorizontalAlignment" Value="Stretch"/>
+    <Setter Property="Opacity" Value="0" />
   </Style>
+
+  <Style Selector="ScrollBar:expanded /template/ RepeatButton.largeIncrease">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+
 </Styles>

src/Avalonia.Themes.Fluent/ScrollViewer.xaml

@@ -1,47 +1,55 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ScrollViewer">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Setter Property="Background"
+
-          Value="Transparent" />
+  <Style Selector="ScrollViewer">
-  <Setter Property="Template">
+    <Setter Property="Background"
-    <ControlTemplate>
+            Value="Transparent" />
-      <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+    <Setter Property="Template">
-        <ScrollContentPresenter Name="PART_ContentPresenter"
+      <ControlTemplate>
-                                Background="{TemplateBinding Background}"
+        <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
-                                CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+          <ScrollContentPresenter Name="PART_ContentPresenter"
-                                CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                                  Grid.Row="0"
-                                Content="{TemplateBinding Content}"
+                                  Grid.Column="0"
-                                Extent="{TemplateBinding Extent, Mode=TwoWay}"
+                                  Grid.RowSpan="2"
-                                Margin="{TemplateBinding Padding}"
+                                  Grid.ColumnSpan="2"
-                                Offset="{TemplateBinding Offset, Mode=TwoWay}"
+                                  Background="{TemplateBinding Background}"
-                                Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
+                                  CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-          <ScrollContentPresenter.GestureRecognizers>
+                                  CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-            <ScrollGestureRecognizer 
+                                  Content="{TemplateBinding Content}"
-              CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                  Extent="{TemplateBinding Extent, Mode=TwoWay}"
-              CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                                  Margin="{TemplateBinding Padding}"
-            />
+                                  Offset="{TemplateBinding Offset, Mode=TwoWay}"
-          </ScrollContentPresenter.GestureRecognizers>  
+                                  Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
-        </ScrollContentPresenter>
+            <ScrollContentPresenter.GestureRecognizers>
-        <ScrollBar Name="horizontalScrollBar"
+              <ScrollGestureRecognizer
-                   Orientation="Horizontal"
+                CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                   LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
-                   SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+            </ScrollContentPresenter.GestureRecognizers>
-                   Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
+          </ScrollContentPresenter>
-                   Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}"
+          <ScrollBar Name="horizontalScrollBar"
-                   ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
+                     Orientation="Horizontal"
-                   Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
+                     LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                   Grid.Row="1"
+                     SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                   Focusable="False"/>
+                     Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
-        <ScrollBar Name="verticalScrollBar"
+                     Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}"
-                   Orientation="Vertical"
+                     ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
-                   LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                     Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
-                   SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                     Grid.Row="1"
-                   Maximum="{TemplateBinding VerticalScrollBarMaximum}"
+                     Focusable="False" />
-                   Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}"
+          <ScrollBar Name="verticalScrollBar"
-                   ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
+                     Orientation="Vertical"
-                   Visibility="{TemplateBinding VerticalScrollBarVisibility}"
+                     LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                   Grid.Column="1"
+                     SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                   Focusable="False"/>
+                     Maximum="{TemplateBinding VerticalScrollBarMaximum}"
-        <Panel Grid.Row="1" Grid.Column="1" Background="{DynamicResource ThemeControlMidBrush}"/>
+                     Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}"
-      </Grid>
+                     ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
-    </ControlTemplate>
+                     Visibility="{TemplateBinding VerticalScrollBarVisibility}"
-  </Setter>
+                     Grid.Column="1"
-</Style>
+                     Focusable="False" />
+          <Panel Grid.Row="1" Grid.Column="1" Background="{DynamicResource ThemeControlMidBrush}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+  </Style>
+
+</Styles>