[Keyboard Manager] Enabled horizontal scroll on scroll viewers and tweaked ScrollViewer layout (#6755)

* Enabled horizontal scroll on scroll viewers and tweaked layout

* Added code to constrain the minimum window sizes

src/modules/keyboardmanager/common/KeyboardManagerConstants.h

@@ -53,8 +53,14 @@ namespace KeyboardManagerConstants
     // Default window sizes
     inline const int DefaultEditKeyboardWindowWidth = 800;
     inline const int DefaultEditKeyboardWindowHeight = 600;
+    inline const int MinimumEditKeyboardWindowWidth = 500;
+    inline const int MinimumEditKeyboardWindowHeight = 450;
+    inline const int EditKeyboardTableMinWidth = 700;
     inline const int DefaultEditShortcutsWindowWidth = 1050;
     inline const int DefaultEditShortcutsWindowHeight = 600;
+    inline const int MinimumEditShortcutsWindowWidth = 500;
+    inline const int MinimumEditShortcutsWindowHeight = 500;
+    inline const int EditShortcutsTableMinWidth = 1000;
 
     // Key Remap table constants
     inline const long RemapTableColCount = 4;

src/modules/keyboardmanager/ui/EditKeyboardWindow.cpp

@@ -216,6 +216,7 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
     keyRemapTable.ColumnDefinitions().Append(newColumn);
     keyRemapTable.ColumnDefinitions().Append(removeColumn);
     keyRemapTable.RowDefinitions().Append(RowDefinition());
+    keyRemapTable.MinWidth(KeyboardManagerConstants::EditKeyboardTableMinWidth);
 
     // First header textblock in the header row of the keys remap table
     TextBlock originalKeyRemapHeader;
@@ -286,6 +287,10 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
     header.Children().Append(cancelButton);
 
     ScrollViewer scrollViewer;
+    scrollViewer.VerticalScrollMode(ScrollMode::Enabled);
+    scrollViewer.HorizontalScrollMode(ScrollMode::Enabled);
+    scrollViewer.VerticalScrollBarVisibility(ScrollBarVisibility::Auto);
+    scrollViewer.HorizontalScrollBarVisibility(ScrollBarVisibility::Auto);
 
     // Add remap key button
     Windows::UI::Xaml::Controls::Button addRemapKey;
@@ -293,7 +298,7 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
     plusSymbol.FontFamily(Media::FontFamily(L"Segoe MDL2 Assets"));
     plusSymbol.Glyph(L"\xE109");
     addRemapKey.Content(plusSymbol);
-    addRemapKey.Margin({ 10, 0, 0, 25 });
+    addRemapKey.Margin({ 10, 10, 0, 25 });
     addRemapKey.Click([&](winrt::Windows::Foundation::IInspectable const& sender, RoutedEventArgs const&) {
         SingleKeyRemapControl::AddNewControlKeyRemapRow(keyRemapTable, keyboardRemapControlObjects);
         // Whenever a remap is added move to the bottom of the screen
@@ -302,22 +307,31 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
     // Set accessible name for the addRemapKey button
     addRemapKey.SetValue(Automation::AutomationProperties::NameProperty(), box_value(GET_RESOURCE_STRING(IDS_ADD_KEY_REMAP_BUTTON)));
 
+    // Header and example text at the top of the window
+    StackPanel helperText;
+    helperText.Children().Append(keyRemapInfoHeader);
+    helperText.Children().Append(keyRemapInfoExample);
+
+    // Remapping table
     StackPanel mappingsPanel;
-    mappingsPanel.Children().Append(keyRemapInfoHeader);
-    mappingsPanel.Children().Append(keyRemapInfoExample);
     mappingsPanel.Children().Append(keyRemapTable);
     mappingsPanel.Children().Append(addRemapKey);
 
+    // Remapping table should be scrollable
     scrollViewer.Content(mappingsPanel);
 
     // Creating the Xaml content. xamlContainer is the parent UI element
     RelativePanel xamlContainer;
-    xamlContainer.SetBelow(scrollViewer, header);
+    xamlContainer.SetBelow(helperText, header);
+    xamlContainer.SetBelow(scrollViewer, helperText);
     xamlContainer.SetAlignLeftWithPanel(header, true);
     xamlContainer.SetAlignRightWithPanel(header, true);
+    xamlContainer.SetAlignLeftWithPanel(helperText, true);
+    xamlContainer.SetAlignRightWithPanel(helperText, true);
     xamlContainer.SetAlignLeftWithPanel(scrollViewer, true);
     xamlContainer.SetAlignRightWithPanel(scrollViewer, true);
     xamlContainer.Children().Append(header);
+    xamlContainer.Children().Append(helperText);
     xamlContainer.Children().Append(scrollViewer);
     xamlContainer.UpdateLayout();
 
@@ -352,9 +366,22 @@ LRESULT CALLBACK EditKeyboardWindowProc(HWND hWnd, UINT messageCode, WPARAM wPar
     // Resize the XAML window whenever the parent window is painted or resized
     case WM_PAINT:
     case WM_SIZE:
+    {
         GetClientRect(hWnd, &rcClient);
         SetWindowPos(hWndXamlIslandEditKeyboardWindow, 0, rcClient.left, rcClient.top, rcClient.right, rcClient.bottom, SWP_SHOWWINDOW);
-        break;
+    }
+    break;
+    // To avoid UI elements overlapping on making the window smaller enforce a minimum window size
+    case WM_GETMINMAXINFO:
+    {
+        LPMINMAXINFO lpMMI = (LPMINMAXINFO)lParam;
+        int minWidth = KeyboardManagerConstants::MinimumEditKeyboardWindowWidth;
+        int minHeight = KeyboardManagerConstants::MinimumEditKeyboardWindowHeight;
+        DPIAware::Convert(nullptr, minWidth, minHeight);
+        lpMMI->ptMinTrackSize.x = minWidth;
+        lpMMI->ptMinTrackSize.y = minHeight;
+    }
+    break;
     default:
         // If the Xaml Bridge object exists, then use it's message handler to handle keyboard focus operations
         if (xamlBridgePtr != nullptr)

src/modules/keyboardmanager/ui/EditShortcutsWindow.cpp

@@ -179,6 +179,7 @@ void createEditShortcutsWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMa
     shortcutTable.ColumnDefinitions().Append(targetAppColumn);
     shortcutTable.ColumnDefinitions().Append(removeColumn);
     shortcutTable.RowDefinitions().Append(RowDefinition());
+    shortcutTable.MinWidth(KeyboardManagerConstants::EditShortcutsTableMinWidth);
 
     // First header textblock in the header row of the shortcut table
     TextBlock originalShortcutHeader;
@@ -270,6 +271,10 @@ void createEditShortcutsWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMa
     header.Children().Append(cancelButton);
 
     ScrollViewer scrollViewer;
+    scrollViewer.VerticalScrollMode(ScrollMode::Enabled);
+    scrollViewer.HorizontalScrollMode(ScrollMode::Enabled);
+    scrollViewer.VerticalScrollBarVisibility(ScrollBarVisibility::Auto);
+    scrollViewer.HorizontalScrollBarVisibility(ScrollBarVisibility::Auto);
 
     // Add shortcut button
     Windows::UI::Xaml::Controls::Button addShortcut;
@@ -286,21 +291,30 @@ void createEditShortcutsWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMa
     // Set accessible name for the add shortcut button
     addShortcut.SetValue(Automation::AutomationProperties::NameProperty(), box_value(GET_RESOURCE_STRING(IDS_ADD_SHORTCUT_BUTTON)));
 
+    // Header and example text at the top of the window
+    StackPanel helperText;
+    helperText.Children().Append(shortcutRemapInfoHeader);
+    helperText.Children().Append(shortcutRemapInfoExample);
+
+    // Remapping table
     StackPanel mappingsPanel;
-    mappingsPanel.Children().Append(shortcutRemapInfoHeader);
-    mappingsPanel.Children().Append(shortcutRemapInfoExample);
     mappingsPanel.Children().Append(shortcutTable);
     mappingsPanel.Children().Append(addShortcut);
 
+    // Remapping table should be scrollable
     scrollViewer.Content(mappingsPanel);
 
     RelativePanel xamlContainer;
-    xamlContainer.SetBelow(scrollViewer, header);
+    xamlContainer.SetBelow(helperText, header);
+    xamlContainer.SetBelow(scrollViewer, helperText);
     xamlContainer.SetAlignLeftWithPanel(header, true);
     xamlContainer.SetAlignRightWithPanel(header, true);
+    xamlContainer.SetAlignLeftWithPanel(helperText, true);
+    xamlContainer.SetAlignRightWithPanel(helperText, true);
     xamlContainer.SetAlignLeftWithPanel(scrollViewer, true);
     xamlContainer.SetAlignRightWithPanel(scrollViewer, true);
     xamlContainer.Children().Append(header);
+    xamlContainer.Children().Append(helperText);
     xamlContainer.Children().Append(scrollViewer);
     xamlContainer.UpdateLayout();
 
@@ -336,9 +350,22 @@ LRESULT CALLBACK EditShortcutsWindowProc(HWND hWnd, UINT messageCode, WPARAM wPa
     // Resize the XAML window whenever the parent window is painted or resized
     case WM_PAINT:
     case WM_SIZE:
+    {
         GetClientRect(hWnd, &rcClient);
         SetWindowPos(hWndXamlIslandEditShortcutsWindow, 0, rcClient.left, rcClient.top, rcClient.right, rcClient.bottom, SWP_SHOWWINDOW);
-        break;
+    }
+    break;
+    // To avoid UI elements overlapping on making the window smaller enforce a minimum window size
+    case WM_GETMINMAXINFO:
+    {
+        LPMINMAXINFO lpMMI = (LPMINMAXINFO)lParam;
+        int minWidth = KeyboardManagerConstants::MinimumEditShortcutsWindowWidth;
+        int minHeight = KeyboardManagerConstants::MinimumEditShortcutsWindowHeight;
+        DPIAware::Convert(nullptr, minWidth, minHeight);
+        lpMMI->ptMinTrackSize.x = minWidth;
+        lpMMI->ptMinTrackSize.y = minHeight;
+    }
+    break;
     default:
         // If the Xaml Bridge object exists, then use it's message handler to handle keyboard focus operations
         if (xamlBridgePtr != nullptr)