[Settings] Various UX fixes (#8739)

* Change accent color to secondary grey for better contrast on colorpicker page

* Fix textwrapping issue for shortcut tooltips

* Fix image resizer scroll issue

* Fix colorpicker page textblock/listview not disabled when module is disabled

* Added MaxWidth and sidebar margin

* Typo fix

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml

@@ -14,7 +14,7 @@
              AutomationProperties.HelpText="{Binding ElementName=ShortcutWarningLabelText, Path=Text}"
              IsReadOnly="True">
         <ToolTipService.ToolTip>
-            <TextBlock x:Name="ShortcutWarningLabelText">
+            <TextBlock x:Name="ShortcutWarningLabelText" TextWrapping="WrapWholeWords">
                 <Run x:Uid="ShortcutWarningLabel"/>
                 <LineBreak/>
                 <Run Text="{x:Bind Keys, Mode=OneTime}" FontWeight="SemiBold"/>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml

@@ -16,4 +16,7 @@
 
     <!-- Row spacing between content and sidepanel (in small mode) -->
     <x:Double x:Key="DefaultRowSpacing">24</x:Double>
+
+    <!-- MaxWidth of the content panel, similar to W10 Settings -->
+    <x:Double x:Key="MaxContentWidth">460</x:Double>
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml

@@ -30,6 +30,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0" />
                         <Setter Target="SidePanel.Width" Value="Auto" />
                         <Setter Target="ColorPickerView.(Grid.Row)" Value="1" />
+                        <Setter Target="ColorPickerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
@@ -47,7 +48,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="ColorPickerView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="ColorPickerView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="ColorPicker_EnableColorPicker" 
                           IsOn="{Binding IsEnabled, Mode=TwoWay}"/>
 
@@ -135,10 +140,12 @@
             <TextBlock Margin="{StaticResource MediumTopMargin}"
                        x:Name="ColorFormatsListViewLabel"
                        TextWrapping="WrapWholeWords"
-                       x:Uid="ColorPicker_ColorFormatsDescription"/>
+                       x:Uid="ColorPicker_ColorFormatsDescription"
+                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
             <ListView ItemsSource="{Binding ColorFormats, Mode=TwoWay}"
                       AllowDrop="True"
                       MaxWidth="466"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       AutomationProperties.LabeledBy="{Binding ElementName=ColorFormatsListViewLabel}"
                       CanReorderItems="True"
                       HorizontalAlignment="Left"
@@ -162,7 +169,7 @@
                                        FontSize="16"
                                        Margin="0,8,0,0"
                                        Text="{Binding Name}"/>
-                            <TextBlock Foreground="{ThemeResource SystemAccentColor}"
+                            <TextBlock Foreground="{ThemeResource SystemBaseMediumColor}"
                                        Text="{Binding Example}"
                                        Grid.Row="1"
                                        Margin="0,0,0,8"/>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml

@@ -36,6 +36,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="FZView.(Grid.Row)" Value="1" />
+                        <Setter Target="FZView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -53,7 +54,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel x:Name="FZView" Orientation="Vertical">
+        <StackPanel x:Name="FZView"
+                    Orientation="Vertical"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
                             x:Uid="FancyZones_EnableToggleControl_HeaderText"
                             IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="GeneralView.(Grid.Row)" Value="1" />
+                        <Setter Target="GeneralView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -51,7 +52,10 @@
         </Grid.RowDefinitions>
 
         <StackPanel Orientation="Vertical"
-                    x:Name="GeneralView">
+                    x:Name="GeneralView"
+                    Margin="0,0,48,0"
+                    HorizontalAlignment="Left"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <TextBlock x:Uid="Admin_Mode" 
                        FontWeight="SemiBold"
                        TextWrapping="Wrap"

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="ImageResizerView.(Grid.Row)" Value="1" />
+                        <Setter Target="ImageResizerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -49,7 +50,8 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="ImageResizerView">
+        <StackPanel Orientation="Vertical" x:Name="ImageResizerView"
+                    Margin="0,0,48,0">
 
             <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
@@ -61,7 +63,7 @@
             <ListView x:Name="ImagesSizesListView" 
                       x:Uid="ImagesSizesListView"
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
-                      Padding="0"
+                      Padding="0,0,0,24"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       SelectionMode="None"
                       ScrollViewer.HorizontalScrollMode="Enabled"

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -206,6 +206,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="KeyboardManagerView.(Grid.Row)" Value="1" />
+                        <Setter Target="KeyboardManagerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -223,7 +224,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="KeyboardManagerView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="KeyboardManagerView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -29,6 +29,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="LauncherView.(Grid.Row)" Value="1" />
+                        <Setter Target="LauncherView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -46,7 +47,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="LauncherView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="LauncherView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"/>
 

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml

@@ -30,6 +30,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="PowerPreviewView.(Grid.Row)" Value="1" />
+                        <Setter Target="PowerPreviewView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -48,7 +49,10 @@
         </Grid.RowDefinitions>
 
         <StackPanel Orientation="Vertical"
-                    x:Name="PowerPreviewView">
+                    x:Name="PowerPreviewView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <TextBlock x:Uid="FileExplorerPreview_RunAsAdminRequired"
                        Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
                        Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml

@@ -27,6 +27,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="PowerRenameView.(Grid.Row)" Value="1" />
+                        <Setter Target="PowerRenameView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -44,7 +45,10 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical"
-                    x:Name="PowerRenameView">
+                    x:Name="PowerRenameView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"                          

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml

@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="ShortcutGuideView.(Grid.Row)" Value="1" />
+                        <Setter Target="ShortcutGuideView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -49,7 +50,11 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="ShortcutGuideView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="ShortcutGuideView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="ShortcutGuide_Enable"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>