From 052cf699d00e30a51347845789bf20f1cd18965d Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Fri, 8 Jul 2022 11:47:44 +0200
Subject: [PATCH] Ported ScrollBar to ControlTheme.

---
 .../Controls/FluentControls.xaml              |   2 +-
 .../Controls/ScrollBar.xaml                   | 521 +++++++++---------
 2 files changed, 252 insertions(+), 271 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
index 286b3e3fcd..d344fedf0a 100644
--- a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
@@ -34,6 +34,7 @@
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/PopupRoot.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/PathIcon.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/RepeatButton.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollBar.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Separator.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabControl.xaml" />
@@ -64,7 +65,6 @@
     <!--  Define ToolTip first so its styles can be overriden by other controls (e.g. TextBox)  -->
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FocusAdorner.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml" />
-    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ScrollBar.xaml" />
     <!--  TabControl needs to come after TabStrip as it redefines the inner TabStrip.ItemsPanel  -->
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TextBox.xaml" />
     <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeViewItem.xaml" />
diff --git a/src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml b/src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml
index 7d87a3e35a..4544fbe339 100644
--- a/src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/ScrollBar.xaml
@@ -1,302 +1,283 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-  <Style Selector="ScrollBar">
-    <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>
-        <Grid x:Name="Root">
-
-          <Border x:Name="VerticalRoot"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}">
-            <Grid RowDefinitions="Auto,*,Auto">
-
-              <Rectangle x:Name="TrackRect" Grid.RowSpan="3" Margin="0" />
-
-              <RepeatButton Name="PART_LineUpButton"
-                            HorizontalAlignment="Center"
-                            Classes="line up"
-                            Grid.Row="0"
-                            Focusable="False"
-                            MinWidth="{DynamicResource ScrollBarSize}"
-                            Height="{DynamicResource ScrollBarSize}" />
-
-              <Track Grid.Row="1"
-                     Minimum="{TemplateBinding Minimum}"
-                     Maximum="{TemplateBinding Maximum}"
-                     Value="{TemplateBinding Value, Mode=TwoWay}"
-                     ViewportSize="{TemplateBinding ViewportSize}"
-                     Orientation="{TemplateBinding Orientation}"
-                     IsDirectionReversed="True">
-                <Track.DecreaseButton>
-                  <RepeatButton Name="PART_PageUpButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.DecreaseButton>
-                <Track.IncreaseButton>
-                  <RepeatButton Name="PART_PageDownButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.IncreaseButton>
-                <Thumb Classes="thumb"
-                       Opacity="1"
-                       Width="{DynamicResource ScrollBarSize}"
-                       MinHeight="{DynamicResource ScrollBarSize}"
-                       RenderTransformOrigin="100%,50%" />
-              </Track>
-
-              <RepeatButton Name="PART_LineDownButton"
-                            HorizontalAlignment="Center"
-                            Classes="line down"
-                            Grid.Row="2"
-                            Focusable="False"
-                            MinWidth="{DynamicResource ScrollBarSize}"
-                            Height="{DynamicResource ScrollBarSize}" />
-
-            </Grid>
-          </Border>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal">
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Grid x:Name="Root">
-
-          <Border x:Name="HorizontalRoot"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}">
-            <Grid ColumnDefinitions="Auto,*,Auto">
-
-              <Rectangle x:Name="TrackRect" Grid.ColumnSpan="3" Margin="0" />
-
-              <RepeatButton Name="PART_LineUpButton"
-                            VerticalAlignment="Center"
-                            Classes="line up"
-                            Grid.Column="0"
-                            Focusable="False"
-                            MinHeight="{DynamicResource ScrollBarSize}"
-                            Width="{DynamicResource ScrollBarSize}" />
-
-              <Track Grid.Column="1"
-                     Minimum="{TemplateBinding Minimum}"
-                     Maximum="{TemplateBinding Maximum}"
-                     Value="{TemplateBinding Value, Mode=TwoWay}"
-                     ViewportSize="{TemplateBinding ViewportSize}"
-                     Orientation="{TemplateBinding Orientation}">
-                <Track.DecreaseButton>
-                  <RepeatButton Name="PART_PageUpButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.DecreaseButton>
-                <Track.IncreaseButton>
-                  <RepeatButton Name="PART_PageDownButton"
-                                Classes="largeIncrease"
-                                Focusable="False" />
-                </Track.IncreaseButton>
-                <Thumb Classes="thumb"
-                       Opacity="1"
-                       Height="{DynamicResource ScrollBarSize}"
-                       MinWidth="{DynamicResource ScrollBarSize}"
-                       RenderTransformOrigin="50%,100%" />
-              </Track>
-
-              <RepeatButton Name="PART_LineDownButton"
-                            VerticalAlignment="Center"
-                            Classes="line down"
-                            Grid.Column="2"
-                            Focusable="False"
-                            MinHeight="{DynamicResource ScrollBarSize}"
-                            Width="{DynamicResource ScrollBarSize}" />
-
-            </Grid>
-          </Border>
-
-        </Grid>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Grid#Root">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}" />
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Orientation="Horizontal" Spacing="20">
+        <StackPanel Spacing="20">
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" IsEnabled="False"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100"/>
+          <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" IsEnabled="False"/>
+        </StackPanel>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" IsEnabled="False"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100"/>
+        <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" IsEnabled="False"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentScrollBarThumb" TargetType="Thumb">
+    <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}"/>
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
-          <Border x:Name="ThumbVisual" Background="{TemplateBinding Background}" />
+          <Border Background="{TemplateBinding Background}"
+                  CornerRadius="{TemplateBinding CornerRadius}"/>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
     <Setter Property="Transitions">
       <Transitions>
+        <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.1" />
         <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />
       </Transitions>
     </Setter>
-  </Style>
 
-  <Style Selector="ScrollBar:vertical /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="{DynamicResource VerticalSmallScrollThumbScaleTransform}" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="{DynamicResource HorizontalSmallScrollThumbScaleTransform}" />
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb.thumb">
-    <Setter Property="RenderTransform" Value="none" />
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" />
-  </Style>
-
-  <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>
+    <Style Selector="^:pointerover /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" />
+    </Style>
+    <Style Selector="^:pressed  /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPressed}" />
+    </Style>
+    <Style Selector="^:disabled  /template/ Border">
+      <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillDisabled}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentScrollBarPageButton" TargetType="RepeatButton">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}" />
+      </ControlTemplate>
     </Setter>
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ Thumb.thumb /template/ Border#ThumbVisual">
-    <Setter Property="CornerRadius" Value="0" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ Thumb.thumb:pointerover">
-    <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" />
-  </Style>
+  </ControlTheme>
 
-  <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.line">
+  <ControlTheme x:Key="FluentScrollBarLineButton" TargetType="RepeatButton">
+    <Setter Property="Opacity" Value="0" />
+    <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForeground}"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Border x:Name="Root">
-          <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
-                   Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-            <Path x:Name="Arrow"
-              VerticalAlignment="Center"
-              HorizontalAlignment="Center"
-              Width="20" Height="20" />
-          </Viewbox>
-        </Border>
+        <ContentPresenter Background="{DynamicResource ScrollBarButtonBackground}"
+                          BorderBrush="{DynamicResource ScrollBarButtonBorderBrush}"
+                          Content="{TemplateBinding Content}"/>
       </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 /template/ RepeatButton.line /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackground}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrush}" />
-  </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pointerover /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPointerOver}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPointerOver}" />
-  </Style>
+    <Style Selector="^:pointerover">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pressed /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPressed}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPointerOver}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPointerOver}" />
+      </Style>
+    </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:disabled /template/ Border#Root" >
-    <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushDisabled}" />
-  </Style>
+    <Style Selector="^:pressed">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPressed}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPressed}" />
+      </Style>
+    </Style>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pointerover /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
-  </Style>
+    <Style Selector="^:disabled">
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundDisabled}"/>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:pressed /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPressed}" />
-  </Style>
+      <Style Selector="^ /template/ ContentPresenter" >
+        <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundDisabled}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushDisabled}" />
+      </Style>
+    </Style>
+  </ControlTheme>
 
-  <Style Selector="ScrollBar /template/ RepeatButton.line:disabled /template/ Path#Arrow" >
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundDisabled}" />
-  </Style>
-
-  <Style Selector="ScrollBar[IsExpanded=true] /template/ RepeatButton.line">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.up /template/ Path">
-    <Setter Property="Data"
-            Value="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:vertical /template/ RepeatButton.line.down /template/ Path">
-    <Setter Property="Data"
-            Value="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.up /template/ Path">
-    <Setter Property="Data" Value="M 14.091797 19.970703 L 4.111328 10 L 14.091797 0.029297 L 14.970703 0.908203 L 5.888672 10 L 14.970703 19.091797 Z" />
-  </Style>
-
-  <Style Selector="ScrollBar:horizontal /template/ RepeatButton.line.down /template/ Path">
-    <Setter Property="Data" Value="M 5.029297 19.091797 L 14.111328 10 L 5.029297 0.908203 L 5.908203 0.029297 L 15.888672 10 L 5.908203 19.970703 Z" />
-  </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[IsExpanded=true] /template/ Rectangle#TrackRect">
-    <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" />
-    <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" />
-    <Setter Property="Opacity" Value="1" />
-  </Style>
-
-  <Style Selector="ScrollBar /template/ RepeatButton.largeIncrease">
-    <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>
+  <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
+    <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 Selector="ScrollBar[IsExpanded=true] /template/ RepeatButton.largeIncrease">
-    <Setter Property="Opacity" Value="1" />
-  </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid x:Name="Root">
+            <Border x:Name="VerticalRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}">
+              <Grid RowDefinitions="Auto,*,Auto">
+                <Rectangle x:Name="TrackRect"
+                           Fill="{DynamicResource ScrollBarTrackFill}"
+                           Stroke="{DynamicResource ScrollBarTrackStroke}"
+                           StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}"
+                           Opacity="0"
+                           Grid.RowSpan="3">
+                  <Rectangle.Transitions>
+                    <Transitions>
+                      <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+                    </Transitions>
+                  </Rectangle.Transitions>
+                </Rectangle>
+
+                <RepeatButton Name="PART_LineUpButton"
+                              HorizontalAlignment="Center"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              Grid.Row="0"
+                              Focusable="False"
+                              MinWidth="{DynamicResource ScrollBarSize}"
+                              Height="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+
+                <Track Grid.Row="1"
+                       Minimum="{TemplateBinding Minimum}"
+                       Maximum="{TemplateBinding Maximum}"
+                       Value="{TemplateBinding Value, Mode=TwoWay}"
+                       ViewportSize="{TemplateBinding ViewportSize}"
+                       Orientation="{TemplateBinding Orientation}"
+                       IsDirectionReversed="True">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_PageUpButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_PageDownButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.IncreaseButton>
+                  <Thumb Theme="{StaticResource FluentScrollBarThumb}"
+                         Width="{DynamicResource ScrollBarSize}"
+                         MinHeight="{DynamicResource ScrollBarSize}"
+                         RenderTransform="{DynamicResource VerticalSmallScrollThumbScaleTransform}"
+                         RenderTransformOrigin="100%,50%" />
+                </Track>
+
+                <RepeatButton Name="PART_LineDownButton"
+                              HorizontalAlignment="Center"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              Grid.Row="2"
+                              Focusable="False"
+                              MinWidth="{DynamicResource ScrollBarSize}"
+                              Height="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+              </Grid>
+            </Border>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
 
-</Styles>
+    <Style Selector="^:horizontal">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid x:Name="Root">
+            <Border x:Name="HorizontalRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}">
+              <Grid ColumnDefinitions="Auto,*,Auto">
+                <Rectangle x:Name="TrackRect"
+                           Fill="{DynamicResource ScrollBarTrackFill}"
+                           Stroke="{DynamicResource ScrollBarTrackStroke}"
+                           StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}"
+                           Opacity="0"
+                           Grid.ColumnSpan="3">
+                  <Rectangle.Transitions>
+                    <Transitions>
+                      <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+                    </Transitions>
+                  </Rectangle.Transitions>
+                </Rectangle>
+
+                <RepeatButton Name="PART_LineUpButton"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              VerticalAlignment="Center"
+                              Grid.Column="0"
+                              Focusable="False"
+                              MinHeight="{DynamicResource ScrollBarSize}"
+                              Width="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 14.091797 19.970703 L 4.111328 10 L 14.091797 0.029297 L 14.970703 0.908203 L 5.888672 10 L 14.970703 19.091797 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+
+                <Track Grid.Column="1"
+                       Minimum="{TemplateBinding Minimum}"
+                       Maximum="{TemplateBinding Maximum}"
+                       Value="{TemplateBinding Value, Mode=TwoWay}"
+                       ViewportSize="{TemplateBinding ViewportSize}"
+                       Orientation="{TemplateBinding Orientation}">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_PageUpButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_PageDownButton"
+                                  Classes="largeIncrease"
+                                  Theme="{StaticResource FluentScrollBarPageButton}"
+                                  Focusable="False" />
+                  </Track.IncreaseButton>
+                  <Thumb Theme="{StaticResource FluentScrollBarThumb}"
+                         Height="{DynamicResource ScrollBarSize}"
+                         MinWidth="{DynamicResource ScrollBarSize}"
+                         RenderTransform="{DynamicResource HorizontalSmallScrollThumbScaleTransform}"
+                         RenderTransformOrigin="50%,100%" />
+                </Track>
+
+                <RepeatButton Name="PART_LineDownButton"
+                              Theme="{StaticResource FluentScrollBarLineButton}"
+                              VerticalAlignment="Center"
+                              Grid.Column="2"
+                              Focusable="False"
+                              MinHeight="{DynamicResource ScrollBarSize}"
+                              Width="{DynamicResource ScrollBarSize}">
+                  <PathIcon Data="M 5.029297 19.091797 L 14.111328 10 L 5.029297 0.908203 L 5.908203 0.029297 L 15.888672 10 L 5.908203 19.970703 Z"
+                            Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                            Height="{DynamicResource ScrollBarButtonArrowIconFontSize}"/>
+                </RepeatButton>
+              </Grid>
+            </Border>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="^[IsExpanded=true]">
+      <Style Selector="^ /template/ Grid#Root">
+        <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" />
+      </Style>
+      <Style Selector="^ /template/ Rectangle#TrackRect">
+        <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" />
+        <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" />
+        <Setter Property="Opacity" Value="1" />
+      </Style>
+      <Style Selector="^ /template/ Thumb">
+        <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" />
+        <Setter Property="RenderTransform" Value="none" />
+      </Style>
+      <Style Selector="^ /template/ RepeatButton">
+        <Setter Property="Opacity" Value="1" />
+      </Style>
+    </Style>
+  </ControlTheme>
+
+</ResourceDictionary>