Fix for #1666- Back button is not accessible via keyboard when navigating to the about page. (#1679)

* initial changes

* margin

* format

* resolve review comments

* Popup Content Height

src/Calculator/Views/MainPage.xaml

@@ -2,14 +2,11 @@
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
-      xmlns:common="using:CalculatorApp.Common"
-      xmlns:controls="using:CalculatorApp.Controls"
       xmlns:converters="using:CalculatorApp.Converters"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:local="using:CalculatorApp"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-      xmlns:vm="using:CalculatorApp.ViewModel"
       x:Name="PageRoot"
       muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
       Loaded="OnPageLoaded"
@@ -85,8 +82,7 @@
         <local:TitleBar x:Name="AppTitleBar"
                         Grid.Row="0"
                         AlwaysOnTopClick="TitleBarAlwaysOnTopButtonClick"
-                        BackButtonClick="TitleBarBackButtonClick"
+                        BackButtonSpaceReserved="{x:Bind ShouldShowBackButton(Model.IsAlwaysOnTop, Popup.IsOpen), Mode=OneWay}"
-                        BackButtonVisibility="{x:Bind ShouldShowBackButton(Model.IsAlwaysOnTop, Popup.IsOpen), Mode=OneWay}"
                         IsAlwaysOnTopMode="{x:Bind Model.IsAlwaysOnTop, Mode=OneWay}"/>
 
         <muxc:NavigationView x:Name="NavView"
@@ -163,8 +159,7 @@
                HorizontalOffset="0"
                IsLightDismissEnabled="False"
                LightDismissOverlayMode="Off"
-               Opened="Popup_Opened"
+               Opened="Popup_Opened">
-               VerticalOffset="{x:Bind AppTitleBar.Height, Mode=OneWay}">
             <Popup.ChildTransitions>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
@@ -172,7 +167,7 @@
             </Popup.ChildTransitions>
 
             <Grid x:Name="PopupContent" x:Load="false">
-                <local:Settings/>
+                <local:Settings BackButtonClick="Settings_BackButtonClick" TitleBarHeight="{x:Bind DoubleToGridLength(AppTitleBar.Height), Mode=OneWay}"/>
             </Grid>
         </Popup>
     </Grid>

src/Calculator/Views/MainPage.xaml.cs

@@ -154,7 +154,7 @@ namespace CalculatorApp
             if(PopupContent != null)
             {
                 PopupContent.Width = e.Size.Width;
-                PopupContent.Height = e.Size.Height - AppTitleBar.ActualHeight;
+                PopupContent.Height = e.Size.Height;
             }
         }
 
@@ -300,7 +300,7 @@ namespace CalculatorApp
 
                 var windowBounds = Window.Current.Bounds;
                 PopupContent.Width = windowBounds.Width;
-                PopupContent.Height = windowBounds.Height - AppTitleBar.ActualHeight;
+                PopupContent.Height = windowBounds.Height;
             }
         }
 
@@ -578,14 +578,9 @@ namespace CalculatorApp
             NarratorNotifier.Announce(announcement);
         }
 
-        private void TitleBarBackButtonClick(object sender, RoutedEventArgs e)
+        private bool ShouldShowBackButton(bool isAlwaysOnTop, bool isPopupOpen)
         {
-            CloseSettingsPopup();
+            return !isAlwaysOnTop && isPopupOpen;
-        }
-
-        private Visibility ShouldShowBackButton(bool isAlwaysOnTop, bool isPopupOpen)
-        {
-            return !isAlwaysOnTop && isPopupOpen ? Visibility.Visible : Visibility.Collapsed;
         }
 
         private double NavigationViewOpenPaneLength(bool isAlwaysOnTop)
@@ -593,6 +588,16 @@ namespace CalculatorApp
             return isAlwaysOnTop ? 0 : (double)Application.Current.Resources["SplitViewOpenPaneLength"];
         }
 
+        private GridLength DoubleToGridLength(double value)
+        {
+            return new GridLength(value);
+        }
+
+        private void Settings_BackButtonClick(object sender, RoutedEventArgs e)
+        {
+            CloseSettingsPopup();
+        }
+
         private CalculatorApp.Calculator m_calculator;
         private GraphingCalculator m_graphingCalculator;
         private CalculatorApp.UnitConverter m_converter;

src/Calculator/Views/Settings.xaml

@@ -3,7 +3,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:automation="using:CalculatorApp.ViewModel.Common.Automation"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:local="using:CalculatorApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
              Loaded="OnLoaded"
@@ -40,6 +39,10 @@
     </UserControl.Resources>
 
     <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="{x:Bind TitleBarHeight, Mode=OneWay}"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="LargeWideView">
@@ -77,7 +80,20 @@
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
 
-        <Grid Height="{StaticResource HamburgerHeight}"
+        <Button x:Name="BackButton"
+                x:Uid="TitleBarBackButton"
+                Grid.Row="0"
+                Width="44"
+                Height="{x:Bind TitleBarHeight.Value, Mode=OneWay}"
+                Margin="0,0,4,0"
+                Padding="2,0,0,0"
+                Style="{StaticResource SquareIconButtonStyle}"
+                FontSize="12"
+                Click="BackButton_Click"
+                Content="&#xE72B;"/>
+
+        <Grid Grid.Row="1"
+              Height="{StaticResource HamburgerHeight}"
               Padding="24,0"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Top">
@@ -86,7 +102,8 @@
                        Style="{StaticResource CategoryNameTextBlockStyle}"/>
         </Grid>
 
-        <ScrollViewer Margin="0,60,0,0"
+        <ScrollViewer Grid.Row="1"
+                      Margin="0,60,0,0"
                       Padding="24,0,24,16"
                       Style="{StaticResource SettingsContentScrollViewStyle}">
             <Grid x:Name="ContentGrid">

src/Calculator/Views/Settings.xaml.cs

@@ -12,12 +12,10 @@ using Windows.Foundation.Collections;
 using Windows.System;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Controls.Primitives;
-using Windows.UI.Xaml.Data;
-using Windows.UI.Xaml.Input;
-using Windows.UI.Xaml.Media;
-using Windows.UI.Xaml.Navigation;
 using CalculatorApp.ViewModel.Common.Automation;
+using Windows.UI.Core;
+using Windows.UI.Xaml.Automation.Peers;
+using Windows.UI.Xaml.Automation.Provider;
 
 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
 
@@ -29,6 +27,16 @@ namespace CalculatorApp
         // BUILD_YEAR was a C++/CX macro and may update the value from the pipeline
         private const string BUILD_YEAR = "2021";
 
+        public event Windows.UI.Xaml.RoutedEventHandler BackButtonClick;
+
+        public GridLength TitleBarHeight
+        {
+            get { return (GridLength)GetValue(TitleBarHeightProperty); }
+            set { SetValue(TitleBarHeightProperty, value); }
+        }
+        public static readonly DependencyProperty TitleBarHeightProperty =
+            DependencyProperty.Register(nameof(TitleBarHeight), typeof(GridLength), typeof(Settings), new PropertyMetadata(default(GridLength)));
+
         public Settings()
         {
             var locService = LocalizationService.GetInstance();
@@ -63,6 +71,8 @@ namespace CalculatorApp
         // OnLoaded would be invoked by Popup several times while contructed once
         private void OnLoaded(object sender, RoutedEventArgs args)
         {
+            SystemNavigationManager.GetForCurrentView().BackRequested += System_BackRequested;
+
             AnnouncePageOpened();
 
             var currentTheme = ThemeHelper.RootTheme.ToString();
@@ -83,6 +93,8 @@ namespace CalculatorApp
         {
             // back to the default state
             AppThemeExpander.IsExpanded = false;
+
+            SystemNavigationManager.GetForCurrentView().BackRequested -= System_BackRequested;
         }
 
         private void FeedbackButton_Click(object sender, RoutedEventArgs e)
@@ -131,5 +143,22 @@ namespace CalculatorApp
             ContributeRunLink.Text = contributeTextLink;
             ContributeRunAfterLink.Text = contributeTextAfterHyperlink;
         }
+
+        private void System_BackRequested(object sender, BackRequestedEventArgs e)
+        {
+            if (!e.Handled && BackButton.IsEnabled)
+            {
+                var buttonPeer = new ButtonAutomationPeer(BackButton);
+                IInvokeProvider invokeProvider = buttonPeer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;
+                invokeProvider.Invoke();
+
+                e.Handled = true;
+            }
+        }
+
+        private void BackButton_Click(object sender, RoutedEventArgs e)
+        {
+            BackButtonClick?.Invoke(this, e);
+        }
     }
 }

src/Calculator/Views/TitleBar.xaml

@@ -27,9 +27,7 @@
                 <VisualState x:Name="BackButtonCollapsed"/>
                 <VisualState x:Name="BackButtonVisible">
                     <VisualState.Setters>
-                        <Setter Target="BackButton.Visibility" Value="Visible"/>
+                        <Setter Target="AppIcon.Margin" Value="48,0,0,0"/>
-                        <Setter Target="BackButton.IsEnabled" Value="True"/>
-                        <Setter Target="AppIcon.Margin" Value="0"/>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
@@ -47,19 +45,6 @@
                 </TransitionCollection>
             </Grid.Transitions>
 
-            <Button x:Name="BackButton"
-                    x:Uid="TitleBarBackButton"
-                    Width="44"
-                    Height="32"
-                    Margin="0,0,4,0"
-                    Padding="2,0,0,0"
-                    Style="{StaticResource SquareIconButtonStyle}"
-                    FontSize="12"
-                    Click="BackButton_Click"
-                    Content="&#xE72B;"
-                    Visibility="Collapsed"
-                    IsEnabled="False"/>
-
             <Grid x:Name="BackgroundElement"
                   Grid.Column="1"
                   Background="Transparent">

src/Calculator/Views/TitleBar.xaml.cs

@@ -1,16 +1,10 @@
 using CalculatorApp.ViewModel.Common;
-using System;
-using System.ComponentModel;
 using Windows.ApplicationModel.Core;
 using Windows.System.Profile;
-using Windows.UI;
 using Windows.UI.Core;
 using Windows.UI.ViewManagement;
 using Windows.UI.Xaml;
-using Windows.UI.Xaml.Automation.Peers;
-using Windows.UI.Xaml.Automation.Provider;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Media;
 
 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
 
@@ -53,7 +47,6 @@ namespace CalculatorApp
             }));
 
         public event Windows.UI.Xaml.RoutedEventHandler AlwaysOnTopClick;
-        public event Windows.UI.Xaml.RoutedEventHandler BackButtonClick;
 
         private void OnLoaded(object sender, RoutedEventArgs e)
         {
@@ -65,9 +58,6 @@ namespace CalculatorApp
             m_accessibilitySettings.HighContrastChanged += OnHighContrastChanged;
             Window.Current.Activated += OnWindowActivated;
 
-            // Register the system back requested event
-            SystemNavigationManager.GetForCurrentView().BackRequested += System_BackRequested;
-
             // Register RequestedTheme changed callback to update title bar system button colors.
             m_rootFrameRequestedThemeCallbackToken =
                 Utils.ThemeHelper.RegisterAppThemeChangedCallback(RootFrame_RequestedThemeChanged);
@@ -93,24 +83,10 @@ namespace CalculatorApp
             m_accessibilitySettings.HighContrastChanged -= OnHighContrastChanged;
             Window.Current.Activated -= OnWindowActivated;
 
-            SystemNavigationManager.GetForCurrentView().BackRequested -= System_BackRequested;
-
             Utils.ThemeHelper.
                 UnregisterAppThemeChangedCallback(m_rootFrameRequestedThemeCallbackToken);
         }
 
-        private void System_BackRequested(object sender, BackRequestedEventArgs e)
-        {
-            if (!e.Handled && BackButton.IsEnabled)
-            {
-                var buttonPeer = new ButtonAutomationPeer(BackButton);
-                IInvokeProvider invokeProvider = buttonPeer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;
-                invokeProvider.Invoke();
-
-                e.Handled = true;
-            }
-        }
-
         private void RootFrame_RequestedThemeChanged(DependencyObject sender, DependencyProperty dp)
         {
             if(Frame.RequestedThemeProperty == dp)
@@ -231,11 +207,6 @@ namespace CalculatorApp
             AlwaysOnTopClick?.Invoke(this, e);
         }
 
-        private void BackButton_Click(object sender, RoutedEventArgs e)
-        {
-            BackButtonClick?.Invoke(this, e);
-        }
-
         // Dependency properties for the color of the system title bar buttons
         public Windows.UI.Xaml.Media.SolidColorBrush ButtonBackground
         {
@@ -301,18 +272,18 @@ namespace CalculatorApp
         public static readonly DependencyProperty ButtonPressedForegroundProperty =
             DependencyProperty.Register(nameof(ButtonPressedForeground), typeof(Windows.UI.Xaml.Media.SolidColorBrush), typeof(TitleBar), new PropertyMetadata(null));
 
-        public Visibility BackButtonVisibility
+        public bool BackButtonSpaceReserved
         {
-            get { return (Visibility)GetValue(BackButtonVisibilityProperty); }
+            get => (bool)GetValue(BackButtonSpaceReservedProperty);
-            set { SetValue(BackButtonVisibilityProperty, value); }
+            set => SetValue(BackButtonSpaceReservedProperty, value);
         }
-        public static readonly DependencyProperty BackButtonVisibilityProperty =
+        public static readonly DependencyProperty BackButtonSpaceReservedProperty =
             DependencyProperty.Register(
-                nameof(BackButtonVisibility), typeof(Visibility), typeof(TitleBar),
+                nameof(BackButtonSpaceReserved), typeof(bool), typeof(TitleBar),
                 new PropertyMetadata(false, new PropertyChangedCallback((sender, args)=> {
                     var self = sender as TitleBar;
                     VisualStateManager.GoToState(
-                        self, (Visibility)args.NewValue == Visibility.Visible ? self.BackButtonVisible.Name : self.BackButtonCollapsed.Name, true);
+                        self, (bool)args.NewValue ? self.BackButtonVisible.Name : self.BackButtonCollapsed.Name, true);
                 })));
 
         private Windows.ApplicationModel.Core.CoreApplicationViewTitleBar m_coreTitleBar;