From d902c3eb0ca5a7559d1e7843abd93f567fe065bc Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Sat, 9 Jul 2022 15:53:41 +0200
Subject: [PATCH] Port ScrollViewer to ControlTheme.

Including splitting out the menu scroller into a separate xaml file for separate preview.
---
 .../Controls/FluentControls.xaml              |   1 +
 .../Controls/MenuItem.xaml                    |  28 ++-
 .../Controls/MenuScrollViewer.xaml            |  98 +++++++++++
 .../Controls/ScrollViewer.xaml                | 164 +++++++++---------
 4 files changed, 204 insertions(+), 87 deletions(-)
 create mode 100644 src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml

diff --git a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
index 6d51dac17f..3e4361465c 100644
--- a/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
@@ -25,6 +25,7 @@
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Label.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBox.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/ListBoxItem.xaml" />
+                <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/Menu.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuItem.xaml" />
                 <ResourceInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml" />
diff --git a/src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml b/src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml
index 3ec65c4936..8f77d1bc1b 100644
--- a/src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/MenuItem.xaml
@@ -5,8 +5,8 @@
                     x:DataType="MenuItem"
                     x:CompileBindings="True">
   <Design.PreviewWith>
-    <Border Padding="20">
-      <StackPanel Spacing="20">
+    <Border Padding="20" Width="320">
+      <StackPanel Spacing="20" HorizontalAlignment="Left">
         <MenuItem Header="_Standard"/>
         <MenuItem IsSelected="True" Header="Selected"/>
         <MenuItem Header="With Icon">
@@ -22,8 +22,26 @@
         <MenuItem Header="Input Gesture" InputGesture="Ctrl+G"/>
         <MenuItem Header="Disabled" IsEnabled="False"/>
         <MenuItem Header="-"/>
-        <MenuItem Header="Parent">
-          <MenuItem Header="Child"/>
+        <MenuItem Header="Parent" IsSubMenuOpen="True">
+          <MenuItem Header="Child 1"/>
+          <MenuItem Header="Child 2"/>
+          <MenuItem Header="Child 3"/>
+          <MenuItem Header="Child 4"/>
+          <MenuItem Header="Child 5"/>
+          <MenuItem Header="Child 6"/>
+          <MenuItem Header="Child 7"/>
+          <MenuItem Header="Child 8"/>
+          <MenuItem Header="Child 9"/>
+          <MenuItem Header="Child 10"/>
+          <MenuItem Header="Child 11"/>
+          <MenuItem Header="Child 12"/>
+          <MenuItem Header="Child 13"/>
+          <MenuItem Header="Child 14"/>
+          <MenuItem Header="Child 15"/>
+          <MenuItem Header="Child 16"/>
+          <MenuItem Header="Child 17"/>
+          <MenuItem Header="Child 18"/>
+          <MenuItem Header="Child 19"/>
         </MenuItem>
         <MenuItem Header="Disabled Parent" IsEnabled="False">
           <MenuItem Header="Child"/>
@@ -113,7 +131,7 @@
                     MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
                     HorizontalAlignment="Stretch"
                     CornerRadius="{DynamicResource OverlayCornerRadius}">
-              <ScrollViewer Classes="menuscroller">
+              <ScrollViewer Theme="{StaticResource FluentMenuScrollViewer}">
                 <ItemsPresenter Name="PART_ItemsPresenter"
                                 Items="{TemplateBinding Items}"
                                 ItemsPanel="{TemplateBinding ItemsPanel}"
diff --git a/src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml b/src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml
new file mode 100644
index 0000000000..bc71d88a0d
--- /dev/null
+++ b/src/Avalonia.Themes.Fluent/Controls/MenuScrollViewer.xaml
@@ -0,0 +1,98 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
+
+  <Design.PreviewWith>
+    <ScrollViewer Theme="{DynamicResource FluentMenuScrollViewer}" Width="200" Height="200">
+      <StackPanel Spacing="20">
+        <TextBlock>Item 1</TextBlock>
+        <TextBlock>Item 2</TextBlock>
+        <TextBlock>Item 3</TextBlock>
+        <TextBlock>Item 4</TextBlock>
+        <TextBlock>Item 5</TextBlock>
+        <TextBlock>Item 6</TextBlock>
+        <TextBlock>Item 7</TextBlock>
+        <TextBlock>Item 8</TextBlock>
+        <TextBlock>Item 9</TextBlock>
+      </StackPanel>
+    </ScrollViewer>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentMenuScrollViewer" TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <RepeatButton DockPanel.Dock="Top"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        RenderTransform="{x:Null}"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="0">
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+              <Path VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    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"
+                    Fill="{DynamicResource ScrollBarButtonArrowForeground}"
+                    Width="20"
+                    Height="20" />
+            </Viewbox>
+          </RepeatButton>
+          <RepeatButton DockPanel.Dock="Bottom"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        RenderTransform="{x:Null}"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="100">
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
+                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}"
+                     Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+              <Path VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    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"
+                    Fill="{DynamicResource ScrollBarButtonArrowForeground}"
+                    Width="20"
+                    Height="20" />
+            </Viewbox>
+          </RepeatButton>
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                  CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                                  Content="{TemplateBinding Content}"
+                                  Extent="{TemplateBinding Extent, Mode=TwoWay}"
+                                  Margin="{TemplateBinding Padding}"
+                                  Offset="{TemplateBinding Offset, Mode=TwoWay}"
+                                  Viewport="{TemplateBinding Viewport, Mode=TwoWay}">
+            <ScrollContentPresenter.GestureRecognizers>
+              <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                       CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+            </ScrollContentPresenter.GestureRecognizers>
+          </ScrollContentPresenter>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^ /template/ RepeatButton:pointerover > Viewbox > Path">
+      <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml b/src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml
index a6e02d2769..55adb54d9b 100644
--- a/src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/ScrollViewer.xaml
@@ -1,87 +1,87 @@
-<ResourceDictionary 
+<ResourceDictionary
   xmlns="https://github.com/avaloniaui"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
-    <Design.PreviewWith>
-      <Grid ColumnDefinitions="*,20,*" Height="300" Width="200" Margin="20">
-        <ScrollViewer>
-          <Border Height="1000" Background="#ccc" />
-        </ScrollViewer>
-        <ScrollViewer Grid.Column="2" Classes="menuscroller">
-          <Border Height="1000" Background="#ccc" />
-        </ScrollViewer>
-      </Grid>
-    </Design.PreviewWith>
-  
-    <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
-      <Setter Property="Background" Value="Transparent" />
-      <Setter Property="Template">
-        <ControlTemplate>
-          <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
-            <ScrollContentPresenter Name="PART_ContentPresenter" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" Content="{TemplateBinding Content}" Extent="{TemplateBinding Extent, Mode=TwoWay}" Padding="{TemplateBinding Padding}" Offset="{TemplateBinding Offset, Mode=TwoWay}" Viewport="{TemplateBinding Viewport, Mode=TwoWay}" IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}">
-              <ScrollContentPresenter.GestureRecognizers>
-                <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
-              </ScrollContentPresenter.GestureRecognizers>
-            </ScrollContentPresenter>
-            <ScrollBar Name="PART_HorizontalScrollBar" AllowAutoHide="{TemplateBinding AllowAutoHide}" Orientation="Horizontal" LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}" SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{TemplateBinding HorizontalScrollBarMaximum}" Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}" ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}" Visibility="{TemplateBinding HorizontalScrollBarVisibility}" Grid.Row="1" Focusable="False" />
-            <ScrollBar Name="PART_VerticalScrollBar" AllowAutoHide="{TemplateBinding AllowAutoHide}" Orientation="Vertical" LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}" SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{TemplateBinding VerticalScrollBarMaximum}" Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}" ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}" Visibility="{TemplateBinding VerticalScrollBarVisibility}" Grid.Column="1" Focusable="False" />
-            <Panel x:Name="PART_ScrollBarsSeparator" Grid.Row="1" Grid.Column="1" Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" />
-          </Grid>
-        </ControlTemplate>
+  <Design.PreviewWith>
+    <ScrollViewer Width="200" Height="200"
+                  HorizontalScrollBarVisibility="Auto">
+      <StackPanel Spacing="20" Width="210">
+        <TextBlock>Item 1</TextBlock>
+        <TextBlock>Item 2</TextBlock>
+        <TextBlock>Item 3</TextBlock>
+        <TextBlock>Item 4</TextBlock>
+        <TextBlock>Item 5</TextBlock>
+        <TextBlock>Item 6</TextBlock>
+        <TextBlock>Item 7</TextBlock>
+        <TextBlock>Item 8</TextBlock>
+        <TextBlock>Item 9</TextBlock>
+      </StackPanel>
+    </ScrollViewer>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  Grid.Row="0"
+                                  Grid.Column="0"
+                                  Grid.RowSpan="2"
+                                  Grid.ColumnSpan="2"
+                                  Background="{TemplateBinding Background}"
+                                  CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                  CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                                  Content="{TemplateBinding Content}"
+                                  Extent="{TemplateBinding Extent, Mode=TwoWay}"
+                                  Padding="{TemplateBinding Padding}"
+                                  Offset="{TemplateBinding Offset, Mode=TwoWay}"
+                                  Viewport="{TemplateBinding Viewport, Mode=TwoWay}"
+                                  IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}">
+            <ScrollContentPresenter.GestureRecognizers>
+              <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                                       CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+            </ScrollContentPresenter.GestureRecognizers>
+          </ScrollContentPresenter>
+          <ScrollBar Name="PART_HorizontalScrollBar"
+                     AllowAutoHide="{TemplateBinding AllowAutoHide}"
+                     Orientation="Horizontal"
+                     LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                     SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                     Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
+                     Value="{TemplateBinding HorizontalScrollBarValue, Mode=TwoWay}"
+                     ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
+                     Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
+                     Grid.Row="1"
+                     Focusable="False" />
+          <ScrollBar Name="PART_VerticalScrollBar"
+                     AllowAutoHide="{TemplateBinding AllowAutoHide}"
+                     Orientation="Vertical"
+                     LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                     SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
+                     Maximum="{TemplateBinding VerticalScrollBarMaximum}"
+                     Value="{TemplateBinding VerticalScrollBarValue, Mode=TwoWay}"
+                     ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
+                     Visibility="{TemplateBinding VerticalScrollBarVisibility}"
+                     Grid.Column="1"
+                     Focusable="False" />
+          <Panel x:Name="PART_ScrollBarsSeparator"
+                 Grid.Row="1"
+                 Grid.Column="1"
+                 Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^ /template/ Panel#PART_ScrollBarsSeparator">
+      <Setter Property="Opacity" Value="0" />
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+        </Transitions>
       </Setter>
-      <Style Selector="^ /template/ Panel#PART_ScrollBarsSeparator">
-        <Setter Property="Opacity" Value="0" />
-        <Setter Property="Transitions">
-          <Transitions>
-            <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
-          </Transitions>
-        </Setter>
-      </Style>
-      <Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
-        <Setter Property="Opacity" Value="1" />
-      </Style>
-      <Style Selector="^.menuscroller">
-        <Setter Property="Template">
-          <ControlTemplate>
-            <DockPanel>
-              <RepeatButton DockPanel.Dock="Top" BorderThickness="0" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" RenderTransform="{x:Null}" Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}">
-                <RepeatButton.IsVisible>
-                  <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
-                  </MultiBinding>
-                </RepeatButton.IsVisible>
-                <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-                  <Path VerticalAlignment="Center" HorizontalAlignment="Center" 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="20" Height="20" />
-                </Viewbox>
-              </RepeatButton>
-              <RepeatButton DockPanel.Dock="Bottom" BorderThickness="0" Background="Transparent" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" RenderTransform="{x:Null}" Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}">
-                <RepeatButton.IsVisible>
-                  <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="VerticalScrollBarVisibility" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Offset.Y" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Extent.Height" />
-                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Viewport.Height" />
-                  </MultiBinding>
-                </RepeatButton.IsVisible>
-                <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-                  <Path VerticalAlignment="Center" HorizontalAlignment="Center" 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="20" Height="20" />
-                </Viewbox>
-              </RepeatButton>
-              <ScrollContentPresenter Name="PART_ContentPresenter" CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" Content="{TemplateBinding Content}" Extent="{TemplateBinding Extent, Mode=TwoWay}" Margin="{TemplateBinding Padding}" Offset="{TemplateBinding Offset, Mode=TwoWay}" Viewport="{TemplateBinding Viewport, Mode=TwoWay}" />
-            </DockPanel>
-          </ControlTemplate>
-        </Setter>
-        <Style Selector="^ /template/ RepeatButton">
-          <Style Selector="^ > Viewbox > Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForeground}" />
-          </Style>
-          <Style Selector="^:pointerover > Viewbox > Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
-          </Style>
-        </Style>
-      </Style>
-    </ControlTheme>
+    </Style>
+    <Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+  </ControlTheme>
 </ResourceDictionary>