Merge pull request #316 from irihitech/286-modal

Automatically focus on overlay modal dialog/messagebox/drawer

src/Ursa.Themes.Semi/Controls/Dialog.axaml

@@ -19,6 +19,7 @@
             <ControlTemplate TargetType="u:CustomDialogControl">
                 <Border
                     Name="PART_Border"
+                    Focusable="True"
                     Padding="0"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
@@ -152,6 +153,7 @@
                 <Border
                     Name="PART_Border"
                     Padding="0"
+                    Focusable="True"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     BoxShadow="0 0 8 0 #1A000000"

src/Ursa.Themes.Semi/Controls/Drawer.axaml

@@ -11,6 +11,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="u:CustomDrawerControl">
                 <Border Name="PART_Root" 
+                        Focusable="True"
                         Margin="{TemplateBinding Padding, Converter={x:Static c:ThicknessTakeConverter.Left}}"
                         Padding="0"
                         HorizontalAlignment="Stretch"
@@ -77,6 +78,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="u:DefaultDrawerControl">
                 <Border Name="PART_Root" 
+                        Focusable="True"
                         Margin="{TemplateBinding Padding, Converter={x:Static c:ThicknessTakeConverter.Left}}"
                         Padding="0"
                         HorizontalAlignment="Stretch"

src/Ursa.Themes.Semi/Controls/MessageBox.axaml

@@ -33,9 +33,9 @@
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
                     <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
-                    <ChromeOverlayLayer />
+                    <VisualLayerManager>
-                    <Grid RowDefinitions="Auto, *, Auto">
+                        <Grid RowDefinitions="Auto, *, Auto">
-                        <Grid
+                            <Grid
                             Grid.Row="0"
                             Margin="24,24,24,0"
                             ColumnDefinitions="Auto, *, Auto">
@@ -61,7 +61,7 @@
                                 Grid.Column="2"
                                 Theme="{DynamicResource CloseButton}" />
                         </Grid>
-                        <Grid
+                            <Grid
                             Grid.Row="1"
                             MaxWidth="{DynamicResource MessageBoxWindowContentMaxWidth}"
                             Margin="{TemplateBinding Padding}"
@@ -79,7 +79,7 @@
                                     TextWrapping="Wrap" />
                             </ScrollViewer>
                         </Grid>
-                        <StackPanel
+                            <StackPanel
                             Grid.Row="2"
                             Margin="24,0,24,24"
                             HorizontalAlignment="Right"
@@ -109,6 +109,7 @@
                                 Theme="{DynamicResource SolidButton}" />
                         </StackPanel>
                     </Grid>
+                    </VisualLayerManager>
                 </Panel>
             </ControlTemplate>
         </Setter>
@@ -155,6 +156,7 @@
             <ControlTemplate TargetType="u:MessageBoxControl">
                 <Border
                     Padding="0"
+                    Focusable="True"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Classes="Shadow"

src/Ursa.Themes.Semi/Controls/UrsaWindow.axaml

@@ -65,7 +65,9 @@
                                 Margin="{Binding $parent[u:UrsaWindow].TitleBarMargin}"
                                 LeftContent="{Binding $parent[u:UrsaWindow].LeftContent}"
                                 RightContent="{Binding $parent[u:UrsaWindow].RightContent}" />
-                            <u:OverlayDialogHost IsModalStatusReporter="True" />
+                            <VisualLayerManager>
+                                <u:OverlayDialogHost IsModalStatusReporter="True" />
+                            </VisualLayerManager>
                         </VisualLayerManager.ChromeOverlayLayer>
                         <Panel>
                             <ContentPresenter

src/Ursa/Controls/Dialog/OverlayDialog.cs

@@ -1,5 +1,6 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Input;
 using Avalonia.Layout;
 
 namespace Ursa.Controls;
@@ -93,6 +94,7 @@ public static class OverlayDialog
         {
             Content = view,
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDialogControl(t, options);
         host.AddDialog(t);
@@ -108,6 +110,7 @@ public static class OverlayDialog
         {
             Content = new TView(),
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureDefaultDialogControl(t, options);
         host.AddModalDialog(t);
@@ -123,6 +126,7 @@ public static class OverlayDialog
         {
             Content = control,
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureDefaultDialogControl(t, options);
         host.AddModalDialog(t);
@@ -139,6 +143,7 @@ public static class OverlayDialog
         {
             Content = new TView(),
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDialogControl(t, options);
         host.AddModalDialog(t);
@@ -154,6 +159,7 @@ public static class OverlayDialog
         {
             Content = control,
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDialogControl(t, options);
         host.AddModalDialog(t);
@@ -172,6 +178,7 @@ public static class OverlayDialog
         {
             Content = view,
             DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDialogControl(t, options);
         host.AddModalDialog(t);

src/Ursa/Controls/Drawer/Drawer.cs

@@ -1,5 +1,6 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Input;
 using Ursa.Common;
 using Ursa.Controls.Options;
 
@@ -60,7 +61,8 @@ public static class Drawer
         var drawer = new DefaultDrawerControl
         {
             Content = new TView(),
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureDefaultDrawer(drawer, options);
         host.AddModalDrawer(drawer);
@@ -75,7 +77,8 @@ public static class Drawer
         var drawer = new DefaultDrawerControl
         {
             Content = control,
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureDefaultDrawer(drawer, options);
         host.AddModalDrawer(drawer);
@@ -92,7 +95,8 @@ public static class Drawer
         var drawer = new DefaultDrawerControl
         {
             Content = view,
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureDefaultDrawer(drawer, options);
         host.AddModalDrawer(drawer);
@@ -152,7 +156,8 @@ public static class Drawer
         var dialog = new CustomDrawerControl
         {
             Content = new TView(),
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDrawer(dialog, options);
         host.AddModalDrawer(dialog);
@@ -167,7 +172,8 @@ public static class Drawer
         var dialog = new CustomDrawerControl
         {
             Content = control,
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDrawer(dialog, options);
         host.AddModalDrawer(dialog);
@@ -185,7 +191,8 @@ public static class Drawer
         var dialog = new CustomDrawerControl
         {
             Content = view,
-            DataContext = vm
+            DataContext = vm,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         ConfigureCustomDrawer(dialog, options);
         host.AddModalDrawer(dialog);

src/Ursa/Controls/MessageBox/MessageBox.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Input;
 
 namespace Ursa.Controls;
 
@@ -63,7 +64,8 @@ public static class MessageBox
             Content = message,
             Title = title,
             Buttons = button,
-            MessageIcon = icon
+            MessageIcon = icon,
+            [KeyboardNavigation.TabNavigationProperty] = KeyboardNavigationMode.Cycle
         };
         host.AddModalDialog(messageControl);
         var result = await messageControl.ShowAsync<MessageBoxResult>();

src/Ursa/Controls/OverlayShared/OverlayDialogHost.Dialog.cs

@@ -1,5 +1,6 @@
 using Avalonia;
 using Avalonia.Input;
+using Avalonia.VisualTree;
 using Irihi.Avalonia.Shared.Helpers;
 using Irihi.Avalonia.Shared.Shapes;
 using Ursa.Controls.OverlayShared;
@@ -170,9 +171,13 @@ public partial class OverlayDialogHost
         {
             _maskAppearAnimation.RunAsync(mask);
         }
+
+        var element = control.GetVisualDescendants().OfType<InputElement>().FirstOrDefault(a => a.Focusable);
+        element?.Focus();
         _modalCount++;
         IsInModalStatus = _modalCount > 0;
         control.IsClosed = false;
+        control.Focus();
     }
 
     // Handle dialog layer change event

src/Ursa/Controls/OverlayShared/OverlayDialogHost.Drawer.cs

@@ -2,7 +2,9 @@ using Avalonia;
 using Avalonia.Animation;
 using Avalonia.Animation.Easings;
 using Avalonia.Controls;
+using Avalonia.Input;
 using Avalonia.Styling;
+using Avalonia.VisualTree;
 using Irihi.Avalonia.Shared.Shapes;
 using Ursa.Common;
 using Ursa.Controls.OverlayShared;
@@ -67,6 +69,8 @@ public partial class OverlayDialogHost
         {
             await Task.WhenAll(animation.RunAsync(control), _maskAppearAnimation.RunAsync(mask));
         }
+        var element = control.GetVisualDescendants().OfType<InputElement>().FirstOrDefault(a => a.Focusable);
+        element?.Focus();
     }
 
     private void SetDrawerPosition(DrawerControlBase control)

src/Ursa/Controls/OverlayShared/OverlayFeedbackElement.cs

@@ -20,6 +20,7 @@ public abstract class OverlayFeedbackElement: ContentControl
     
     static OverlayFeedbackElement()
     {
+        FocusableProperty.OverrideDefaultValue<OverlayFeedbackElement>(false);
         DataContextProperty.Changed.AddClassHandler<OverlayFeedbackElement, object?>((o, e) => o.OnDataContextChange(e));
         ClosedEvent.AddClassHandler<OverlayFeedbackElement>((o,e)=>o.OnClosed(e));
     }