[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
2026-04-03 09:46:54 +02:00 · 2021-01-05 17:24:14 +01:00
parent 4958f6c158
commit f0600f1725
11 changed files with 59 additions and 15 deletions
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
+++ b/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"/>
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
+++ b/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>
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/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"/>
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
+++ b/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}"/>
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/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"/>
@@ -50,8 +51,11 @@
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

-        <StackPanel Orientation="Vertical" 
-                    x:Name="GeneralView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="GeneralView"
+                    Margin="0,0,48,0"
+                    HorizontalAlignment="Left"
+                    MaxWidth="{StaticResource MaxContentWidth}">
            <TextBlock x:Uid="Admin_Mode" 
                       FontWeight="SemiBold"
                       TextWrapping="Wrap"
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/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"
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/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}"/>

--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
+++ b/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}"/>

--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/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"/>
@@ -47,8 +48,11 @@
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

-        <StackPanel Orientation="Vertical" 
-                    x:Name="PowerPreviewView">
+        <StackPanel Orientation="Vertical"
+                    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}}"
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
+++ b/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}"                          
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/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}"/>