Merge pull request #388 from AvaloniaCommunity/textboxMobileSupport

Implement Text Selection handles in TextBox for touch input
AvaloniaCommunity · Jul 26, 2024 · ca86e5a · ca86e5a
2 parents c83defe + d582a0c
commit ca86e5a
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 28 deletions.
diff --git a/Material.Styles/MaterialToolKit.xaml b/Material.Styles/MaterialToolKit.xaml
@@ -80,6 +80,7 @@
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TabStripItem.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TextBlock.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TextBox.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TextSelectionHandle.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ThemeVariantScope.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TimePicker.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/TitleBar.xaml" />

diff --git a/Material.Styles/Resources/Themes/MenuFlyoutPresenter.axaml b/Material.Styles/Resources/Themes/MenuFlyoutPresenter.axaml
@@ -38,5 +38,14 @@
 
   <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter"
                 BasedOn="{StaticResource MaterialMenuFlyoutPresenter}" />
-
+
+  <ControlTheme x:Key="MaterialHorizontalMenuFlyoutPresenter" TargetType="MenuFlyoutPresenter"  BasedOn="{StaticResource MaterialMenuFlyoutPresenter}">
+    <Setter Property="MinWidth" Value="32" />
+    <Setter Property="Padding" Value="8, 0" />
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <StackPanel Orientation="Horizontal"/>
+      </ItemsPanelTemplate>
+    </Setter>
+  </ControlTheme>
 </ResourceDictionary>
diff --git a/Material.Styles/Resources/Themes/MenuItem.axaml b/Material.Styles/Resources/Themes/MenuItem.axaml
@@ -53,6 +53,9 @@
 
   <converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
 
+  <Thickness x:Key="HorizontalMenuFlyoutItemMargin">2,0,2,0</Thickness>
+  <Thickness x:Key="HorizontalMenuFlyoutItemThemePaddingNarrow">8,4,8,7</Thickness>
+
   <ControlTheme x:Key="MaterialMenuItemStringAccessText" TargetType="AccessText"
                 BasedOn="{StaticResource MaterialAccessText}">
     <Setter Property="FontSize" Value="16" />
@@ -183,4 +186,10 @@
   <!-- Default style -->
   <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem"
                 BasedOn="{StaticResource MaterialMenuItem}" />
+
+  <ControlTheme x:Key="MaterialHorizontalMenuItem" TargetType="MenuItem"
+                BasedOn="{StaticResource MaterialMenuItem}">
+    <Setter Property="Padding" Value="{DynamicResource HorizontalMenuFlyoutItemThemePaddingNarrow}" />
+    <Setter Property="Margin" Value="{DynamicResource HorizontalMenuFlyoutItemMargin}" />
+  </ControlTheme>
 </ResourceDictionary>
diff --git a/Material.Styles/Resources/Themes/TextBox.axaml b/Material.Styles/Resources/Themes/TextBox.axaml
@@ -55,41 +55,35 @@
     <Setter Property="Cursor" Value="Arrow" />
   </ControlTheme>
 
-  <MenuFlyout x:Key="DefaultTextBoxMenuFlyout"
-              Placement="Bottom"
-              FlyoutPresenterTheme="{StaticResource MaterialTextBoxFlyoutPresenter}"
-              x:DataType="system:Object">
-    <MenuItem Name="TextBoxMenuFlyoutCutItem"
-              Header="{DynamicResource StringTextFlyoutCutText}"
-              Command="{Binding $parent[TextBox].Cut}"
-              IsEnabled="{Binding $parent[TextBox].CanCut}"
-              InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=cut}"
+  <MenuFlyout x:Key="DefaultTextBoxMenuFlyout" FlyoutPresenterTheme="{StaticResource MaterialTextBoxFlyoutPresenter}" x:DataType="system:Object">
+    <MenuItem Name="TextBoxMenuFlyoutCutItem" Header="{DynamicResource StringTextFlyoutCutText}" 
+              Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=cut}" 
               Icon="{extensions:MaterialInternalIcon Kind=MaterialContentCut, Size=24}" />
-
-    <MenuItem Name="TextBoxMenuFlyoutCopyItem"
-              Header="{DynamicResource StringTextFlyoutCopyText}"
-              Command="{Binding $parent[TextBox].Copy}"
-              IsEnabled="{Binding $parent[TextBox].CanCopy}"
-              InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=copy}"
+    <MenuItem Name="TextBoxMenuFlyoutCopyItem" Header="{DynamicResource StringTextFlyoutCopyText}"
+              Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=copy}"
               Icon="{extensions:MaterialInternalIcon Kind=MaterialContentCopy, Size=24}" />
-
-    <MenuItem Name="TextBoxMenuFlyoutPasteItem"
-              Header="{DynamicResource StringTextFlyoutPasteText}"
-              Command="{Binding $parent[TextBox].Paste}"
-              IsEnabled="{Binding $parent[TextBox].CanPaste}"
-              InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=paste}"
+    <MenuItem Name="TextBoxMenuFlyoutPasteItem" Header="{DynamicResource StringTextFlyoutPasteText}"
+              Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}"
+              InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=paste}" 
               Icon="{extensions:MaterialInternalIcon Kind=MaterialContentPaste, Size=24}" />
-
     <Separator />
-
-    <!-- ReSharper disable once MarkupAttributeTypo -->
-    <MenuItem Name="TextBoxMenuFlyoutSelectAllItem"
-              Header="{DynamicResource StringTextFlyoutSelectAllText}"
+    <MenuItem Name="TextBoxMenuFlyoutSelectAllItem" Header="{DynamicResource StringTextFlyoutSelectAllText}"
               Command="{Binding $parent[TextBox].SelectAll}"
               InputGesture="{Binding Converter={StaticResource GetPlatformHotkeyConfig}, ConverterParameter=selectall}"
               Icon="{extensions:MaterialInternalIcon Kind=MaterialSelectAll, Size=24}" />
   </MenuFlyout>
 
+  <MenuFlyout x:Key="HorizontalTextBoxMenuFlyout" FlyoutPresenterTheme="{StaticResource MaterialHorizontalMenuFlyoutPresenter}" ItemContainerTheme="{StaticResource MaterialHorizontalMenuItem}" x:DataType="system:Object">
+    <MenuItem x:Name="HorizontalTextBoxContextFlyoutCutItem" Header="{DynamicResource StringTextFlyoutCutText}" 
+              Command="{Binding $parent[TextBox].Cut}" IsEnabled="{Binding $parent[TextBox].CanCut}" IsVisible="{Binding $parent[TextBox].CanCut}" />
+    <MenuItem x:Name="HorizontalTextBoxContextFlyoutCopyItem" Header="{DynamicResource StringTextFlyoutCopyText}" 
+              Command="{Binding $parent[TextBox].Copy}" IsEnabled="{Binding $parent[TextBox].CanCopy}" IsVisible="{Binding $parent[TextBox].CanCopy}" />
+    <MenuItem x:Name="HorizontalTextBoxContextFlyoutPasteItem" Header="{DynamicResource StringTextFlyoutPasteText}" 
+              Command="{Binding $parent[TextBox].Paste}" IsEnabled="{Binding $parent[TextBox].CanPaste}" />
+    <MenuItem x:Name="HorizontalTextBoxMenuFlyoutSelectAllItem" Header="{DynamicResource StringTextFlyoutSelectAllText}"
+              Command="{Binding $parent[TextBox].SelectAll}" />
+  </MenuFlyout>
+
   <converters:RectHollowClipConverter x:Key="RectangleHollowGeometry" />
   <parameters:RectHollowClipParameter x:Key="OutlineTextBoxClippingParameter" Margin="8,0" Offset="4,-8" />
 
@@ -162,7 +156,7 @@
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="SelectionBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
     <Setter Property="SelectionForegroundBrush" Value="{DynamicResource MaterialPrimaryMidForegroundBrush}" />
-    <Setter Property="ContextFlyout" Value="{StaticResource DefaultTextBoxMenuFlyout}" />
+    <Setter Property="ContextFlyout" Value="{OnFormFactor Desktop={StaticResource DefaultTextBoxMenuFlyout}, Mobile={StaticResource HorizontalTextBoxMenuFlyout}}" />
     <Setter Property="CaretBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
     <Setter Property="FontSize" Value="16" />
     <Setter Property="FontFamily" Value="{StaticResource MaterialDesignFonts}" />

diff --git a/Material.Styles/Resources/Themes/TextSelectionHandle.axaml b/Material.Styles/Resources/Themes/TextSelectionHandle.axaml
@@ -0,0 +1,49 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <x:Double x:Key="TextSelectHandleSize">32</x:Double>
+  <GeometryGroup x:Key="TextSelectionHandlePath" FillRule="NonZero">
+    <RectangleGeometry Rect="0,0,16,16"/>
+    <EllipseGeometry Center="16,16"
+                     RadiusX="16"
+                     RadiusY="16"/>
+  </GeometryGroup>
+  <GeometryGroup x:Key="TextCaretHandlePath" FillRule="NonZero">
+    <RectangleGeometry Rect="0,0,16,16">
+      <RectangleGeometry.Transform>
+        <TransformGroup >
+          <RotateTransform CenterX="16"
+                           Angle="-45"/>
+        </TransformGroup>
+      </RectangleGeometry.Transform>
+    </RectangleGeometry>
+    <EllipseGeometry Center="16,22.7"
+                     RadiusX="16"
+                     RadiusY="16"/>
+  </GeometryGroup>
+  <ControlTheme x:Key="{x:Type TextSelectionHandle}"
+                TargetType="TextSelectionHandle">
+    <Setter Property="Background"
+            Value="{DynamicResource TextControlSelectionHighlightColor}" />
+    <Setter Property="HorizontalAlignment"
+            Value="Center" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Grid>
+            <PathIcon
+              Cursor="Arrow"
+              Name="PART_HandlePathIcon"
+              HorizontalAlignment="Stretch"
+              Height="{DynamicResource TextSelectHandleSize}"
+              Foreground="{TemplateBinding Background}"
+              Data="{DynamicResource TextSelectionHandlePath}"
+            />
+          </Grid>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+    <Style Selector="^.caret /template/ PathIcon#PART_HandlePathIcon">
+      <Setter Property="Data" Value="{DynamicResource TextCaretHandlePath}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>