[Settings][Dashboard]Switch to settings page on module clicked (#29554)

* Settings Dashboard: Adding feature switch to settings page if module panel clicked.

* fixing xaml styling

* Refactoring, creating common methods GetModuleAccentColor and GetModulePageType

* Correct button style to be invisible. Add the same functionality to the disabled modules.

* fixing XAML styling

src/settings-ui/Settings.UI/Helpers/ModuleHelper.cs

@@ -5,6 +5,8 @@
 using global::PowerToys.GPOWrapper;
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI;
 
 namespace Microsoft.PowerToys.Settings.UI.Helpers
 {
@@ -129,5 +131,69 @@ namespace Microsoft.PowerToys.Settings.UI.Helpers
                 default: return GpoRuleConfigured.Unavailable;
             }
         }
+
+        public static Color GetModuleAccentColor(ModuleType moduleType)
+        {
+            return moduleType switch
+            {
+                ModuleType.AlwaysOnTop => Color.FromArgb(255, 74, 196, 242), // #4ac4f2
+                ModuleType.Awake => Color.FromArgb(255, 40, 177, 233), // #28b1e9
+                ModuleType.ColorPicker => Color.FromArgb(255, 7, 129, 211), // #0781d3
+                ModuleType.CropAndLock => Color.FromArgb(255, 32, 166, 228), // #20a6e4
+                ModuleType.EnvironmentVariables => Color.FromArgb(255, 16, 132, 208), // #1084d0
+                ModuleType.FancyZones => Color.FromArgb(255, 65, 209, 247), // #41d1f7
+                ModuleType.FileLocksmith => Color.FromArgb(255, 245, 161, 20), // #f5a114
+                ModuleType.FindMyMouse => Color.FromArgb(255, 104, 109, 112), // #686d70
+                ModuleType.Hosts => Color.FromArgb(255, 16, 132, 208), // #1084d0
+                ModuleType.ImageResizer => Color.FromArgb(255, 85, 207, 248), // #55cff8
+                ModuleType.KeyboardManager => Color.FromArgb(255, 224, 231, 238), // #e0e7ee
+                ModuleType.MouseHighlighter => Color.FromArgb(255, 17, 126, 199), // #117ec7
+                ModuleType.MouseJump => Color.FromArgb(255, 240, 240, 239), // #f0f0ef
+                ModuleType.MousePointerCrosshairs => Color.FromArgb(255, 25, 115, 182), // #1973b6
+                ModuleType.MouseWithoutBorders => Color.FromArgb(255, 31, 164, 227), // #1fa4e3
+                ModuleType.PastePlain => Color.FromArgb(255, 243, 156, 16), // #f39c10
+                ModuleType.Peek => Color.FromArgb(255, 255, 214, 103), // #ffd667
+                ModuleType.PowerRename => Color.FromArgb(255, 43, 186, 243), // #2bbaf3
+                ModuleType.PowerLauncher => Color.FromArgb(255, 51, 191, 240), // #33bff0
+                ModuleType.PowerAccent => Color.FromArgb(255, 84, 89, 92), // #54595c
+                ModuleType.RegistryPreview => Color.FromArgb(255, 17, 80, 138), // #11508a
+                ModuleType.MeasureTool => Color.FromArgb(255, 135, 144, 153), // #879099
+                ModuleType.ShortcutGuide => Color.FromArgb(255, 193, 202, 209), // #c1cad1
+                ModuleType.PowerOCR => Color.FromArgb(255, 24, 153, 224), // #1899e0
+                _ => Color.FromArgb(255, 255, 255, 255), // never called, all values listed above
+            };
+        }
+
+        public static System.Type GetModulePageType(ModuleType moduleType)
+        {
+            return moduleType switch
+            {
+                ModuleType.AlwaysOnTop => typeof(AlwaysOnTopPage),
+                ModuleType.Awake => typeof(AwakePage),
+                ModuleType.ColorPicker => typeof(ColorPickerPage),
+                ModuleType.CropAndLock => typeof(CropAndLockPage),
+                ModuleType.EnvironmentVariables => typeof(EnvironmentVariablesPage),
+                ModuleType.FancyZones => typeof(FancyZonesPage),
+                ModuleType.FileLocksmith => typeof(FileLocksmithPage),
+                ModuleType.FindMyMouse => typeof(MouseUtilsPage),
+                ModuleType.Hosts => typeof(HostsPage),
+                ModuleType.ImageResizer => typeof(ImageResizerPage),
+                ModuleType.KeyboardManager => typeof(KeyboardManagerPage),
+                ModuleType.MouseHighlighter => typeof(MouseUtilsPage),
+                ModuleType.MouseJump => typeof(MouseUtilsPage),
+                ModuleType.MousePointerCrosshairs => typeof(MouseUtilsPage),
+                ModuleType.MouseWithoutBorders => typeof(MouseWithoutBordersPage),
+                ModuleType.PastePlain => typeof(PastePlainPage),
+                ModuleType.Peek => typeof(PeekPage),
+                ModuleType.PowerRename => typeof(PowerRenamePage),
+                ModuleType.PowerLauncher => typeof(PowerLauncherPage),
+                ModuleType.PowerAccent => typeof(PowerAccentPage),
+                ModuleType.RegistryPreview => typeof(RegistryPreviewPage),
+                ModuleType.MeasureTool => typeof(MeasureToolPage),
+                ModuleType.ShortcutGuide => typeof(ShortcutGuidePage),
+                ModuleType.PowerOCR => typeof(PowerOcrPage),
+                _ => typeof(DashboardPage), // never called, all values listed above
+            };
+        }
     }
 }

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

@@ -1,4 +1,4 @@
-<Page
+<Page
     x:Class="Microsoft.PowerToys.Settings.UI.Views.DashboardPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -300,6 +300,14 @@
                     </ItemsRepeater.Layout>
                     <ItemsRepeater.ItemTemplate>
                         <DataTemplate x:DataType="viewmodels:DashboardListItem">
+                            <Button
+                                Padding="0"
+                                HorizontalAlignment="Stretch"
+                                HorizontalContentAlignment="Stretch"
+                                Background="Transparent"
+                                BorderThickness="0"
+                                Click="DashboardListItemClick"
+                                Tag="{x:Bind Tag, Mode=OneWay}">
                                 <Grid
                                     Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                     BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
@@ -371,6 +379,7 @@
                                         </ItemsControl.ItemsPanel>
                                     </ItemsControl>
                                 </Grid>
+                            </Button>
                         </DataTemplate>
                     </ItemsRepeater.ItemTemplate>
                 </ItemsRepeater>
@@ -389,6 +398,14 @@
                     </ItemsRepeater.Layout>
                     <ItemsRepeater.ItemTemplate>
                         <DataTemplate x:DataType="viewmodels:DashboardListItem">
+                            <Button
+                                Padding="0"
+                                HorizontalAlignment="Stretch"
+                                HorizontalContentAlignment="Stretch"
+                                Background="Transparent"
+                                BorderThickness="0"
+                                Click="DashboardListItemClick"
+                                Tag="{x:Bind Tag, Mode=OneWay}">
                                 <Grid
                                     Padding="16,12"
                                     Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
@@ -436,6 +453,7 @@
                                             Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
                                     </Grid>
                                 </Grid>
+                            </Button>
                         </DataTemplate>
                     </ItemsRepeater.ItemTemplate>
                 </ItemsRepeater>

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

@@ -49,5 +49,10 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             ViewModel.SWVersionButtonClicked();
         }
+
+        private void DashboardListItemClick(object sender, RoutedEventArgs e)
+        {
+            ViewModel.DashboardListItemClick(sender);
+        }
     }
 }

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

@@ -78,7 +78,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 IsLocked = gpo == GpoRuleConfigured.Enabled || gpo == GpoRuleConfigured.Disabled,
                 Icon = ModuleHelper.GetModuleTypeFluentIconName(moduleType),
                 EnabledChangedCallback = EnabledChangedOnUI,
-                AccentColor = GetModuleAccentColor(moduleType),
+                AccentColor = ModuleHelper.GetModuleAccentColor(moduleType),
                 DashboardModuleItems = GetModuleItems(moduleType),
             });
             if (moduleType == ModuleType.KeyboardManager && gpo != GpoRuleConfigured.Disabled)
@@ -88,38 +88,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
-        private Color GetModuleAccentColor(ModuleType moduleType)
-        {
-            return moduleType switch
-            {
-                ModuleType.AlwaysOnTop => Color.FromArgb(255, 74, 196, 242), // #4ac4f2
-                ModuleType.Awake => Color.FromArgb(255, 40, 177, 233), // #28b1e9
-                ModuleType.ColorPicker => Color.FromArgb(255, 7, 129, 211), // #0781d3
-                ModuleType.CropAndLock => Color.FromArgb(255, 32, 166, 228), // #20a6e4
-                ModuleType.EnvironmentVariables => Color.FromArgb(255, 16, 132, 208), // #1084d0
-                ModuleType.FancyZones => Color.FromArgb(255, 65, 209, 247), // #41d1f7
-                ModuleType.FileLocksmith => Color.FromArgb(255, 245, 161, 20), // #f5a114
-                ModuleType.FindMyMouse => Color.FromArgb(255, 104, 109, 112), // #686d70
-                ModuleType.Hosts => Color.FromArgb(255, 16, 132, 208), // #1084d0
-                ModuleType.ImageResizer => Color.FromArgb(255, 85, 207, 248), // #55cff8
-                ModuleType.KeyboardManager => Color.FromArgb(255, 224, 231, 238), // #e0e7ee
-                ModuleType.MouseHighlighter => Color.FromArgb(255, 17, 126, 199), // #117ec7
-                ModuleType.MouseJump => Color.FromArgb(255, 240, 240, 239), // #f0f0ef
-                ModuleType.MousePointerCrosshairs => Color.FromArgb(255, 25, 115, 182), // #1973b6
-                ModuleType.MouseWithoutBorders => Color.FromArgb(255, 31, 164, 227), // #1fa4e3
-                ModuleType.PastePlain => Color.FromArgb(255, 243, 156, 16), // #f39c10
-                ModuleType.Peek => Color.FromArgb(255, 255, 214, 103), // #ffd667
-                ModuleType.PowerRename => Color.FromArgb(255, 43, 186, 243), // #2bbaf3
-                ModuleType.PowerLauncher => Color.FromArgb(255, 51, 191, 240), // #33bff0
-                ModuleType.PowerAccent => Color.FromArgb(255, 84, 89, 92), // #54595c
-                ModuleType.RegistryPreview => Color.FromArgb(255, 17, 80, 138), // #11508a
-                ModuleType.MeasureTool => Color.FromArgb(255, 135, 144, 153), // #879099
-                ModuleType.ShortcutGuide => Color.FromArgb(255, 193, 202, 209), // #c1cad1
-                ModuleType.PowerOCR => Color.FromArgb(255, 24, 153, 224), // #1899e0
-                _ => Color.FromArgb(255, 255, 255, 255), // never called, all values listed above
-            };
-        }
-
         private void LoadKBMSettingsFromJson()
         {
             KeyboardManagerProfile kbmProfile = GetKBMProfile();
@@ -528,5 +496,23 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             var actionName = "Launch";
             SendConfigMSG("{\"action\":{\"RegistryPreview\":{\"action_name\":\"" + actionName + "\", \"value\":\"\"}}}");
         }
+
+        internal void DashboardListItemClick(object sender)
+        {
+            Button button = sender as Button;
+            if (button == null)
+            {
+                return;
+            }
+
+            if (!(button.Tag is ModuleType))
+            {
+                return;
+            }
+
+            ModuleType moduleType = (ModuleType)button.Tag;
+
+            NavigationService.Navigate(ModuleHelper.GetModulePageType(moduleType));
+        }
     }
 }