Merge pull request #4097 from AvaloniaUI/feature/menu-scroller

Restyle `ScrollViewer` in menus.
6 years ago · ab017b1bb9
5 changed files with 202 additions and 48 deletions
--- a/src/Avalonia.Controls/Converters/MenuScrollingVisibilityConverter.cs
+++ b/src/Avalonia.Controls/Converters/MenuScrollingVisibilityConverter.cs
@ -0,0 +1,64 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data.Converters;
+using Avalonia.Utilities;
+
+namespace Avalonia.Controls.Converters
+{
+    public class MenuScrollingVisibilityConverter : IMultiValueConverter
+    {
+        public static readonly MenuScrollingVisibilityConverter Instance = new MenuScrollingVisibilityConverter();
+
+        public object Convert(IList<object> values, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (parameter == null ||
+                values == null ||
+                values.Count != 4 ||
+                !(values[0] is ScrollBarVisibility visiblity) ||
+                !(values[1] is double offset) ||
+                !(values[2] is double extent) ||
+                !(values[3] is double viewport))
+            {
+                return AvaloniaProperty.UnsetValue;
+            }
+
+            if (visiblity == ScrollBarVisibility.Auto)
+            {
+                if (extent == viewport)
+                {
+                    return false;
+                }
+
+                double target;
+
+                if (parameter is double d)
+                {
+                    target = d;
+                }
+                else if (parameter is string s)
+                {
+                    target = double.Parse(s, NumberFormatInfo.InvariantInfo);
+                }
+                else
+                {
+                    return AvaloniaProperty.UnsetValue;
+                }
+
+                // Calculate the percent so that we can see if we are near the edge of the range
+                double percent = MathUtilities.Clamp(offset * 100.0 / (extent - viewport), 0, 100);
+
+                if (MathUtilities.AreClose(percent, target))
+                {
+                    // We are at the end of the range, so no need for this button to be shown
+                    return false;
+                }
+
+                return true;
+            }
+
+            return false;
+        }
+    }
+}
--- a/src/Avalonia.Controls/ScrollViewer.cs
+++ b/src/Avalonia.Controls/ScrollViewer.cs
@ -387,6 +387,38 @@ namespace Avalonia.Controls
        /// <inheritdoc/>
        IControl IScrollAnchorProvider.CurrentAnchor => null; // TODO: Implement

+        /// <summary>
+        /// Scrolls the content up one line.
+        /// </summary>
+        public void LineUp()
+        {
+            Offset -= new Vector(0, _smallChange.Height);
+        }
+
+        /// <summary>
+        /// Scrolls the content down one line.
+        /// </summary>
+        public void LineDown()
+        {
+            Offset += new Vector(0, _smallChange.Height);
+        }
+
+        /// <summary>
+        /// Scrolls the content left one line.
+        /// </summary>
+        public void LineLeft()
+        {
+            Offset -= new Vector(_smallChange.Width, 0);
+        }
+
+        /// <summary>
+        /// Scrolls the content right one line.
+        /// </summary>
+        public void LineRight()
+        {
+            Offset += new Vector(_smallChange.Width, 0);
+        }
+
        /// <summary>
        /// Scrolls to the top-left corner of the content.
        /// </summary>
--- a/src/Avalonia.Themes.Default/ContextMenu.xaml
+++ b/src/Avalonia.Themes.Default/ContextMenu.xaml
@ -10,7 +10,7 @@
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              Padding="{TemplateBinding Padding}">
-          <ScrollViewer>
+          <ScrollViewer Classes="menuscroller">
              <ItemsPresenter Name="PART_ItemsPresenter"
                              Items="{TemplateBinding Items}"
                              ItemsPanel="{TemplateBinding ItemsPanel}"
--- a/src/Avalonia.Themes.Default/MenuItem.xaml
+++ b/src/Avalonia.Themes.Default/MenuItem.xaml
@ -113,7 +113,7 @@
              <Border Background="{TemplateBinding Background}"
                      BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}">
-                <ScrollViewer>
+                <ScrollViewer Classes="menuscroller">
                  <ItemsPresenter Name="PART_ItemsPresenter"
                                  Items="{TemplateBinding Items}"
                                  ItemsPanel="{TemplateBinding ItemsPanel}"
--- a/src/Avalonia.Themes.Default/ScrollViewer.xaml
+++ b/src/Avalonia.Themes.Default/ScrollViewer.xaml
@ -1,47 +1,105 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="ScrollViewer">
-  <Setter Property="Background"
-          Value="Transparent" />
-  <Setter Property="Template">
-    <ControlTemplate>
-      <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
-        <ScrollContentPresenter Name="PART_ContentPresenter"
-                                Background="{TemplateBinding Background}"
-                                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}"
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
+  <Style Selector="ScrollViewer">
+    <Setter Property="Background"
+            Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  Background="{TemplateBinding Background}"
+                                  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>
-        <ScrollBar Name="horizontalScrollBar"
-                   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="verticalScrollBar"
-                   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 Grid.Row="1" Grid.Column="1" Background="{DynamicResource ThemeControlMidBrush}"/>
-      </Grid>
-    </ControlTemplate>
-  </Setter>
-</Style>
+            </ScrollContentPresenter.GestureRecognizers>
+          </ScrollContentPresenter>
+          <ScrollBar Name="horizontalScrollBar"
+                     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="verticalScrollBar"
+                     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 Grid.Row="1" Grid.Column="1" Background="{DynamicResource ThemeControlMidBrush}"/>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="ScrollViewer.menuscroller">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <RepeatButton DockPanel.Dock="Top"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        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>
+            <Path Data="M 0 4 L 8 4 L 4 0 Z"/>
+          </RepeatButton>
+          <RepeatButton DockPanel.Dock="Bottom"
+                        BorderThickness="0"
+                        Background="Transparent"
+                        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>
+            <Path Data="M 0 0 L 4 4 L 8 0 Z"/>
+          </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>
+  <Style Selector="ScrollViewer.menuscroller /template/ RepeatButton > Path">
+    <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
+  </Style>
+
+  <Style Selector="ScrollViewer.menuscroller /template/ RepeatButton:pointerover > Path">
+    <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+  </Style>
+</Styles>