Updating navigation tree for settings with groupings (#35559)

* adjusting stuff from here to there

* No longer crashing!  a win!

* Resources now

* spelling

* adjusting comments for xaml formatting

* added in new top level icons

* Fixing

* adjusting the core container logic based on feedback.  this is actually simplier and just leverages the builti in stuff as well

* getting frame_nav functional again, thanks @davidegiacometti

* making a one time hit for union

* Update src/settings-ui/Settings.UI/ViewModels/ShellViewModel.cs

Co-authored-by: Jeremy Sinclair <4016293+snickler@users.noreply.github.com>

* expanding code that @davidegiacometti suggestedion.  🔥

* ensure parent is always expanded when page is changed

* don't use static

---------

Co-authored-by: Ethan Fang <ethanfang@microsoft.com>
Co-authored-by: Jeremy Sinclair <4016293+snickler@users.noreply.github.com>
Co-authored-by: Davide Giacometti <davide.giacometti@outlook.it>
Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>

src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml

@@ -105,135 +105,159 @@
                 </NavigationViewItem>
                 <NavigationViewItemSeparator />
 
+                <!--  System Tools  -->
+                <NavigationViewItem
+                    x:Uid="Shell_TopLevelSystemTools"
+                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/SystemTools.png}"
+                    SelectsOnInvoked="False">
+                    <NavigationViewItem.MenuItems>
                         <NavigationViewItem
                             x:Uid="Shell_AdvancedPaste"
                             helpers:NavHelper.NavigateTo="views:AdvancedPastePage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/AdvancedPaste.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_AlwaysOnTop"
-                    helpers:NavHelper.NavigateTo="views:AlwaysOnTopPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/AlwaysOnTop.png}" />
-
                         <NavigationViewItem
                             x:Uid="Shell_Awake"
                             helpers:NavHelper.NavigateTo="views:AwakePage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Awake.png}" />
-
                         <NavigationViewItem
                             x:Uid="Shell_ColorPicker"
                             helpers:NavHelper.NavigateTo="views:ColorPickerPage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ColorPicker.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_CmdNotFound"
-                    helpers:NavHelper.NavigateTo="views:CmdNotFoundPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CommandNotFound.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_CropAndLock"
-                    helpers:NavHelper.NavigateTo="views:CropAndLockPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CropAndLock.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_EnvironmentVariables"
-                    helpers:NavHelper.NavigateTo="views:EnvironmentVariablesPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/EnvironmentVariables.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_FancyZones"
-                    helpers:NavHelper.NavigateTo="views:FancyZonesPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FancyZones.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_PowerPreview"
-                    helpers:NavHelper.NavigateTo="views:PowerPreviewPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FileExplorerPreview.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_FileLocksmith"
-                    helpers:NavHelper.NavigateTo="views:FileLocksmithPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FileLocksmith.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_Hosts"
-                    helpers:NavHelper.NavigateTo="views:HostsPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Hosts.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_ImageResizer"
-                    helpers:NavHelper.NavigateTo="views:ImageResizerPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ImageResizer.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_KeyboardManager"
-                    helpers:NavHelper.NavigateTo="views:KeyboardManagerPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/KeyboardManager.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_MouseUtilities"
-                    helpers:NavHelper.NavigateTo="views:MouseUtilsPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/MouseUtils.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_MouseWithoutBorders"
-                    helpers:NavHelper.NavigateTo="views:MouseWithoutBordersPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/MouseWithoutBorders.png}" />
-
-                <NavigationViewItem
-                    x:Uid="NewPlus_Product_Name"
-                    helpers:NavHelper.NavigateTo="views:NewPlusPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/NewPlus.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_Peek"
-                    helpers:NavHelper.NavigateTo="views:PeekPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Peek.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_PowerRename"
-                    helpers:NavHelper.NavigateTo="views:PowerRenamePage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/PowerRename.png}" />
                         <NavigationViewItem
                             x:Uid="Shell_PowerLauncher"
                             helpers:NavHelper.NavigateTo="views:PowerLauncherPage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/PowerToysRun.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_QuickAccent"
-                    helpers:NavHelper.NavigateTo="views:PowerAccentPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/QuickAccent.png}" />
-
-                <NavigationViewItem
-                    x:Uid="Shell_RegistryPreview"
-                    helpers:NavHelper.NavigateTo="views:RegistryPreviewPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/RegistryPreview.png}" />
-
                         <NavigationViewItem
                             x:Uid="Shell_MeasureTool"
                             helpers:NavHelper.NavigateTo="views:MeasureToolPage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ScreenRuler.png}" />
-
                         <NavigationViewItem
                             x:Uid="Shell_ShortcutGuide"
                             helpers:NavHelper.NavigateTo="views:ShortcutGuidePage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ShortcutGuide.png}" />
-
                         <NavigationViewItem
                             x:Uid="Shell_TextExtractor"
                             helpers:NavHelper.NavigateTo="views:PowerOcrPage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/TextExtractor.png}" />
+                    </NavigationViewItem.MenuItems>
+                </NavigationViewItem>
 
+                <!--  Windowing & Layouts  -->
+                <NavigationViewItem
+                    x:Uid="Shell_TopLevelWindowsAndLayouts "
+                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/WindowingAndLayouts.png}"
+                    SelectsOnInvoked="False">
+                    <NavigationViewItem.MenuItems>
+                        <NavigationViewItem
+                            x:Uid="Shell_AlwaysOnTop"
+                            helpers:NavHelper.NavigateTo="views:AlwaysOnTopPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/AlwaysOnTop.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_CropAndLock"
+                            helpers:NavHelper.NavigateTo="views:CropAndLockPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CropAndLock.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_FancyZones"
+                            helpers:NavHelper.NavigateTo="views:FancyZonesPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FancyZones.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_Workspaces"
+                            helpers:NavHelper.NavigateTo="views:WorkspacesPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Workspaces.png}" />
+                    </NavigationViewItem.MenuItems>
+                </NavigationViewItem>
+
+                <!--  Input / Output  -->
+                <NavigationViewItem
+                    x:Uid="Shell_TopLevelInputOutput"
+                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/InputOutput.png}"
+                    SelectsOnInvoked="False">
+                    <NavigationViewItem.MenuItems>
+                        <NavigationViewItem
+                            x:Uid="Shell_KeyboardManager"
+                            helpers:NavHelper.NavigateTo="views:KeyboardManagerPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/KeyboardManager.png}" />
+                        <!--  Find my mouse  -->
+                        <!--  Mouse Highlighter  -->
+                        <NavigationViewItem
+                            x:Uid="Shell_MouseUtilities"
+                            helpers:NavHelper.NavigateTo="views:MouseUtilsPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/MouseUtils.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_MouseWithoutBorders"
+                            helpers:NavHelper.NavigateTo="views:MouseWithoutBordersPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/MouseWithoutBorders.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_QuickAccent"
+                            helpers:NavHelper.NavigateTo="views:PowerAccentPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/QuickAccent.png}" />
+                        <!--  Mouse pointer cross hair  -->
                         <NavigationViewItem
                             x:Uid="Shell_VideoConference"
                             helpers:NavHelper.NavigateTo="views:VideoConferencePage"
                             Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/VideoConferenceMute.png}"
                             IsEnabled="{x:Bind ViewModel.IsVideoConferenceBuild, Mode=OneWay}" />
+                    </NavigationViewItem.MenuItems>
+                </NavigationViewItem>
 
+                <!--  File Management  -->
                 <NavigationViewItem
-                    x:Uid="Shell_Workspaces"
-                    helpers:NavHelper.NavigateTo="views:WorkspacesPage"
-                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Workspaces.png}" />
+                    x:Uid="Shell_TopLevelFileManagement"
+                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FileManagement.png}"
+                    SelectsOnInvoked="False">
+                    <NavigationViewItem.MenuItems>
+                        <NavigationViewItem
+                            x:Uid="Shell_PowerPreview"
+                            helpers:NavHelper.NavigateTo="views:PowerPreviewPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FileExplorerPreview.png}" />
+                        <!--  File Explorer Thumbnails  -->
+                        <NavigationViewItem
+                            x:Uid="Shell_FileLocksmith"
+                            helpers:NavHelper.NavigateTo="views:FileLocksmithPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/FileLocksmith.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_ImageResizer"
+                            helpers:NavHelper.NavigateTo="views:ImageResizerPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ImageResizer.png}" />
+                        <NavigationViewItem
+                            x:Uid="NewPlus_Product_Name"
+                            helpers:NavHelper.NavigateTo="views:NewPlusPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/NewPlus.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_Peek"
+                            helpers:NavHelper.NavigateTo="views:PeekPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Peek.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_PowerRename"
+                            helpers:NavHelper.NavigateTo="views:PowerRenamePage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/PowerRename.png}" />
+                    </NavigationViewItem.MenuItems>
+                </NavigationViewItem>
+
+                <!--  Advanced  -->
+                <NavigationViewItem
+                    x:Uid="Shell_TopLevelAdvanced"
+                    Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Advanced.png}"
+                    SelectsOnInvoked="False">
+                    <NavigationViewItem.MenuItems>
+                        <NavigationViewItem
+                            x:Uid="Shell_CmdNotFound"
+                            helpers:NavHelper.NavigateTo="views:CmdNotFoundPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CommandNotFound.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_EnvironmentVariables"
+                            helpers:NavHelper.NavigateTo="views:EnvironmentVariablesPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/EnvironmentVariables.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_Hosts"
+                            helpers:NavHelper.NavigateTo="views:HostsPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Hosts.png}" />
+                        <NavigationViewItem
+                            x:Uid="Shell_RegistryPreview"
+                            helpers:NavHelper.NavigateTo="views:RegistryPreviewPage"
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/RegistryPreview.png}" />
+                    </NavigationViewItem.MenuItems>
+                </NavigationViewItem>
             </NavigationView.MenuItems>
             <NavigationView.PaneFooter>
                 <StackPanel Orientation="Vertical">

src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml.cs

@@ -4,7 +4,7 @@
 
 using System;
 using System.Collections.Generic;
-
+using System.Linq;
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Services;
@@ -122,6 +122,8 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         public static bool IsUserAnAdmin { get; set; }
 
+        private Dictionary<Type, NavigationViewItem> _navViewParentLookup = new Dictionary<Type, NavigationViewItem>();
+
         /// <summary>
         /// Initializes a new instance of the <see cref="ShellPage"/> class.
         /// Shell page constructor.
@@ -138,6 +140,21 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             // shellFrame.Navigate(typeof(GeneralPage));
             IPCResponseHandleList.Add(ReceiveMessage);
             SetTitleBar();
+
+            if (_navViewParentLookup.Count > 0)
+            {
+                _navViewParentLookup.Clear();
+            }
+
+            var topLevelItems = navigationView.MenuItems.OfType<NavigationViewItem>().ToArray();
+
+            foreach (var parent in topLevelItems)
+            {
+                foreach (var child in parent.MenuItems.OfType<NavigationViewItem>())
+                {
+                    _navViewParentLookup.TryAdd(child.GetValue(NavHelper.NavigateToProperty) as Type, parent);
+                }
+            }
         }
 
         public static int SendDefaultIPCMessage(string msg)
@@ -277,7 +294,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         private bool navigationViewInitialStateProcessed; // avoid announcing initial state of the navigation pane.
 
-        private void NavigationView_PaneOpened(Microsoft.UI.Xaml.Controls.NavigationView sender, object args)
+        private void NavigationView_PaneOpened(NavigationView sender, object args)
         {
             if (!navigationViewInitialStateProcessed)
             {
@@ -293,7 +310,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
             if (AutomationPeer.ListenerExists(AutomationEvents.MenuOpened))
             {
-                var loader = Helpers.ResourceLoaderInstance.ResourceLoader;
+                var loader = ResourceLoaderInstance.ResourceLoader;
                 peer.RaiseNotificationEvent(
                     AutomationNotificationKind.ActionCompleted,
                     AutomationNotificationProcessing.ImportantMostRecent,
@@ -302,7 +319,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             }
         }
 
-        private void NavigationView_PaneClosed(Microsoft.UI.Xaml.Controls.NavigationView sender, object args)
+        private void NavigationView_PaneClosed(NavigationView sender, object args)
         {
             if (!navigationViewInitialStateProcessed)
             {
@@ -318,7 +335,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
             if (AutomationPeer.ListenerExists(AutomationEvents.MenuClosed))
             {
-                var loader = Helpers.ResourceLoaderInstance.ResourceLoader;
+                var loader = ResourceLoaderInstance.ResourceLoader;
                 peer.RaiseNotificationEvent(
                     AutomationNotificationKind.ActionCompleted,
                     AutomationNotificationProcessing.ImportantMostRecent,
@@ -348,6 +365,12 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             if (selectedItem != null)
             {
                 Type pageType = selectedItem.GetValue(NavHelper.NavigateToProperty) as Type;
+
+                if (_navViewParentLookup.TryGetValue(pageType, out var parentItem) && !parentItem.IsExpanded)
+                {
+                    parentItem.IsExpanded = true;
+                }
+
                 NavigationService.Navigate(pageType);
             }
         }

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -59,10 +59,7 @@
             : using a System.ComponentModel.TypeConverter
             : and then encoded with base64 encoding.
     -->
-  <xsd:schema id="root"
-    xmlns=""
-    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
-    xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
     <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
     <xsd:element name="root" msdata:IsDataSet="true">
       <xsd:complexType>
@@ -4563,4 +4560,19 @@ Activate by holding the key for the character you want to add an accent to, then
   <data name="GeneralPage_ViewDiagnosticDataViewerInfoButton.Content" xml:space="preserve">
     <value>Restart</value>
   </data>
+  <data name="Shell_TopLevelAdvanced.Content" xml:space="preserve">
+    <value>Advanced</value>
+  </data>
+  <data name="Shell_TopLevelFileManagement.Content" xml:space="preserve">
+    <value>File Management</value>
+  </data>
+  <data name="Shell_TopLevelInputOutput.Content" xml:space="preserve">
+    <value>Input / Output</value>
+  </data>
+  <data name="Shell_TopLevelWindowsAndLayouts.Content" xml:space="preserve">
+    <value>Windowing &amp; Layouts</value>
+  </data>
+  <data name="Shell_TopLevelSystemTools.Content" xml:space="preserve">
+    <value>System Tools</value>
+  </data>
 </root>

src/settings-ui/Settings.UI/ViewModels/ShellViewModel.cs

@@ -5,7 +5,6 @@
 using System;
 using System.Collections.Generic;
 using System.IO;
-using System.IO.Abstractions;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Windows.Input;
@@ -32,6 +31,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private NavigationViewItem selected;
         private ICommand loadedCommand;
         private ICommand itemInvokedCommand;
+        private NavigationViewItem[] _fullListOfNavViewItems;
 
         public bool IsBackEnabled
         {
@@ -76,6 +76,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             NavigationService.NavigationFailed += Frame_NavigationFailed;
             NavigationService.Navigated += Frame_Navigated;
             this.navigationView.BackRequested += OnBackRequested;
+            var topLevelItems = navigationView.MenuItems.OfType<NavigationViewItem>();
+            _fullListOfNavViewItems = topLevelItems.Union(topLevelItems.SelectMany(menuItem => menuItem.MenuItems.OfType<NavigationViewItem>())).ToArray();
         }
 
         private static KeyboardAccelerator BuildKeyboardAccelerator(VirtualKey key, VirtualKeyModifiers? modifiers = null)
@@ -107,12 +109,13 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         private void OnItemInvoked(NavigationViewItemInvokedEventArgs args)
         {
-            var item = navigationView.MenuItems
-                            .OfType<NavigationViewItem>()
-                            .First(menuItem => (string)menuItem.Content == (string)args.InvokedItem);
-            var pageType = item.GetValue(NavHelper.NavigateToProperty) as Type;
+            var pageType = args.InvokedItemContainer.GetValue(NavHelper.NavigateToProperty) as Type;
+
+            if (pageType != null)
+            {
                 NavigationService.Navigate(pageType);
             }
+        }
 
         private void OnBackRequested(NavigationView sender, NavigationViewBackRequestedEventArgs args)
         {
@@ -127,9 +130,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private void Frame_Navigated(object sender, NavigationEventArgs e)
         {
             IsBackEnabled = NavigationService.CanGoBack;
-            Selected = navigationView.MenuItems
-                            .OfType<NavigationViewItem>()
-                            .FirstOrDefault(menuItem => IsMenuItemForPageType(menuItem, e.SourcePageType));
+            Selected = _fullListOfNavViewItems.FirstOrDefault(menuItem => IsMenuItemForPageType(menuItem, e.SourcePageType));
         }
 
         private static bool IsMenuItemForPageType(NavigationViewItem menuItem, Type sourcePageType)