[Settings] New UX (#12470)

* Removed hardcoded background * Background * Updated pages * Added OOBE to shellpage * Margin fixes * Fix * Resource update * Resource string update * Removed reference from installer file * Updated UI fixes and remove conflicts * Adding new settings control * PowerRename * Sidepanel updates * Shortcut Guide * Updates screeens * General page updates * Awake UX update * Changed order for power preview note * Fixes * UI fixes * KBM * IsEnabled state support * Added new controls * Update * Updated nugest packages * Replaced itemscontrol * Introducing setting button style * FancyZones page * Plugin page * Switch case * Fixed typo * Plugin manager update * Introducing SettingExpander * Setting automation properties * Accesibility improvements * VCM and cleanup * Refactoring OOBE pages part 1 * OOBE XAML refactoring * Added MinWidth to actioncontent controls * Updates to various settings * Spell update * Update to author label * Clean up * Removing redunant files * Move file * Updated files * Revert "Updated files" This reverts commit 1a5c887eae. * Revert "Move file" This reverts commit 2b06c75c1f. * Revert "Removing redunant files" This reverts commit fe79ec1701. * Revert "Clean up" This reverts commit 028e15fab6. * Removed redundant styles * Revert "Removed redundant styles" This reverts commit dfdfd65021. * Files cleanup * Removing converter, updating background and paddings * Styling updates * Unit test updates * Fixes * Installer fixes * Update Resources.resw * Shell page updates * Updated pagelinks * Styles re-ordering * Updated converter * Updated ToggleSwitch style * Bugfixes * Typo fix * [Settings] New UX - installer dll fixes (#12818) * [Settings] New UX - Fix some failing tests (#12822) * Bugfixes * Typo fix * Hiding VCM * Bugfixes * Download button fix * Remove Newtonsoft.Json from installer file * Updated visuals * Bugfixes * Syntax fix * Updated installer file * Bugfixes * New label * Theming support for OOBE * Put back in Documentation hyperlink * Right uid Co-authored-by: Niels Laute <niels9001@hotmail.com> Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>
2026-04-08 12:18:50 +02:00 · 2021-08-23 19:48:52 +02:00
parent c125cc281d
commit eb2ef7070b
68 changed files with 3652 additions and 3362 deletions
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -5,105 +5,96 @@
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    AutomationProperties.LandmarkType="Main">

    <Page.Resources>
        <converters:StringFormatConverter x:Key="StringFormatConverter"/>
    </Page.Resources>

-    <controls:SettingsPageControl x:Uid="About_ShortcutGuide"
+    <controls:SettingsPageControl x:Uid="ShortcutGuide"
                                  ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
                                  ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
        <controls:SettingsPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
+                <controls:Setting x:Uid="ShortcutGuide_Enable">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
+
+                <controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+
+                    <controls:Setting x:Uid="Activation_Shortcut" Icon="&#xEDA7;" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                        <controls:Setting.Description>
+                            <TextBlock>
+                                <Run x:Uid="ShortcutWarningLabel"/>
+                                <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}"
+                                                            Keys="Win, Ctrl, Alt, Shift"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
+
+                <controls:SettingsGroup x:Uid="ShortcutGuide_Appearance_Behavior" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+
+                            <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;">
+                                <controls:Setting.Description>
+                                    <HyperlinkButton Click="OpenColorsSettings_Click"
+                                                     x:Uid="Windows_Color_Settings"/>
+                                </controls:Setting.Description>
+                                <controls:Setting.ActionContent>
+                                    <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}" MinWidth="{StaticResource SettingActionControlMinWidth}">
+                                        <ComboBoxItem x:Uid="Radio_Theme_Dark"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Light"/>
+                                        <ComboBoxItem x:Uid="Radio_Theme_Default"/>
+                                    </ComboBox>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>


-            <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}"/>
+                    <controls:Setting x:Uid="ShortcutGuide_OverlayOpacity">
+                        <controls:Setting.ActionContent>
+                            <Slider Minimum="0"
+                                                Maximum="100"
+                                                MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>

-                <TextBlock x:Uid="Shortcuts"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <controls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
-                                                  HorizontalAlignment="Left"
-                                                  MinWidth="240"
-                                                  Margin="{StaticResource SmallTopMargin}"
-                                                  HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}"
-                                                  Keys="Win, Ctrl, Alt, Shift"
-                                                  Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-                <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
-                    <Slider x:Uid="ShortcutGuide_OverlayOpacity"
-                    Minimum="0"
-                    Maximum="100"
-                    Width="240"
-                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
-                    IsThumbToolTipEnabled="False"
-                    HorizontalAlignment="Left"
-                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
-
-                    <TextBlock
-                        Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
-                        VerticalAlignment="Center"
-                        FontSize="16"
-                        FontWeight="SemiBold"
-                        Margin="0,16,0,0"
-                        Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                </StackPanel>
-
-                <!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
-            The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
-            Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
-                <TextBlock Name="ShortcutGuide_Theme"
-                x:Uid="ColorModeHeader"
-                Margin="{StaticResource SmallTopMargin}"
-                Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                <muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                               SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
-                               AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
-                    <RadioButton x:Uid="Radio_Theme_Dark" />
-                    <RadioButton x:Uid="Radio_Theme_Light" />
-                    <RadioButton x:Uid="Radio_Theme_Default"/>
-                </muxc:RadioButtons>
-                <HyperlinkButton Click="OpenColorsSettings_Click"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <TextBlock x:Uid="Windows_Color_Settings" />
-                </HyperlinkButton>
-
-                <TextBlock x:Uid="ShortcutGuide_DisabledApps"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
-                     Margin="{StaticResource SmallTopMargin}"
-                     Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps, UpdateSourceTrigger=PropertyChanged}"
-                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                     ScrollViewer.VerticalScrollBarVisibility ="Visible"
-                     ScrollViewer.VerticalScrollMode="Enabled"
-                     ScrollViewer.IsVerticalRailEnabled="True"
-                     TextWrapping="Wrap"
-                     AcceptsReturn="True"
-                     HorizontalAlignment="Left"
-                     MinWidth="240"
-                     MinHeight="160" />
+                <controls:SettingsGroup x:Uid="ExcludedApps" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="ShortcutGuide_DisabledApps" Icon="&#xE103;" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
+                                     Margin="{StaticResource ExpanderSettingMargin}"
+                                         Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps, UpdateSourceTrigger=PropertyChanged}"
+                                         ScrollViewer.VerticalScrollBarVisibility ="Visible"
+                                         ScrollViewer.VerticalScrollMode="Enabled"
+                                         ScrollViewer.IsVerticalRailEnabled="True"
+                                         TextWrapping="Wrap"
+                                         AcceptsReturn="True"
+                                         MinWidth="240"
+                                         MinHeight="160" />
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>
-        <controls:SettingsPageControl.ModuleLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
+            <controls:PageLink x:Uid="LearnMore_ShortcutGuide" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
+        </controls:SettingsPageControl.PrimaryLinks>
    </controls:SettingsPageControl>
 </Page>