[Settings]Change text color for disabled controls (#4837)

* change text color for disabled controls

* added custom textblock controls and updated FZ Xaml

* updated Image Resizer Page

* updated Shotcut Guid

* updated KBM Settings

* reverted unrealted changes

* reverted unrealted changes

* reverted unrealted changes

* reverted unrealted changes

* updated power launcher

* reverted unrealted changes

* Image Resizer: renoved spaces in file format hint text

* Image Resizer: restored file format header

Co-authored-by: Lavius Motileng <laviusntk>

src/core/Microsoft.PowerToys.Settings.UI/Controls/BodyTextBlock.xaml

@@ -0,0 +1,28 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.BodyTextBlock"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"       
+    mc:Ignorable="d"
+    d:DesignHeight="300"
+    d:DesignWidth="400">
+
+    <Grid>
+        <TextBlock x:Name="CustomTextBlock" 
+                       Style="{StaticResource BodyTextBlockStyle}"
+                       Margin="{StaticResource SmallTopMargin}" >
+                        <Interactivity:Interaction.Behaviors>
+                            <Core:DataTriggerBehavior Binding="{Binding Tag, ElementName=CustomTextBlock}" Value="False">
+                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=CustomTextBlock}" PropertyName="Foreground" Value="{ThemeResource SystemColorGrayTextBrush}" />
+                            </Core:DataTriggerBehavior>
+                            <Core:DataTriggerBehavior Binding="{Binding Tag, ElementName=CustomTextBlock}" Value="True">
+                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=CustomTextBlock}" PropertyName="Foreground" Value="{ThemeResource SystemBaseHighColor}" />
+                            </Core:DataTriggerBehavior>            
+                        </Interactivity:Interaction.Behaviors>            
+        </TextBlock>
+    </Grid>
+</UserControl>

src/core/Microsoft.PowerToys.Settings.UI/Controls/BodyTextBlock.xaml.cs

@@ -0,0 +1,91 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class BodyTextBlock : UserControl
+    {
+        public static readonly DependencyProperty TextProperty =
+            DependencyProperty.Register(
+                "Text",
+                typeof(string),
+                typeof(GroupTitleTextBlock),
+                null);
+
+        public string _text;
+
+        public string Text
+        {
+            get
+            {
+                return _text;
+            }
+
+            set
+            {
+                _text = value;
+                CustomTextBlock.Text = value;
+                SetValue(TextProperty, value);
+            }
+        }
+
+        public static readonly DependencyProperty IsActiveProperty =
+            DependencyProperty.Register(
+                "IsActive",
+                typeof(string),
+                typeof(GroupTitleTextBlock),
+                null);
+
+        private string _isActive = "False";
+
+        public string IsActive
+        {
+            get
+            {
+                return _isActive;
+            }
+
+            set
+            {
+                SetValue(IsActiveProperty, value);
+                _isActive = value;
+                CustomTextBlock.Tag = value;
+            }
+        }
+
+        private Windows.UI.Text.FontWeight _fontWeight;
+
+        public Windows.UI.Text.FontWeight FontWeight
+        {
+            get
+            {
+                return _fontWeight;
+            }
+
+            set
+            {
+                _fontWeight = value;
+                CustomTextBlock.FontWeight = value;
+            }
+        }
+
+        public BodyTextBlock()
+        {
+            this.InitializeComponent();
+            CustomTextBlock.Tag = "False";
+        }
+    }
+}

src/core/Microsoft.PowerToys.Settings.UI/Controls/GroupTitleTextBlock.xaml

@@ -0,0 +1,29 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.Controls.GroupTitleTextBlock"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"    
+    mc:Ignorable="d"
+    d:DesignHeight="300"
+    d:DesignWidth="400">
+
+    <Grid>
+        <TextBlock 
+            x:Name="CustomTextBlock"
+            Style="{StaticResource SettingsGroupTitleStyle}"
+            Margin="{StaticResource MediumTopMargin}">
+        <Interactivity:Interaction.Behaviors>
+            <Core:DataTriggerBehavior Binding="{Binding Tag, ElementName=CustomTextBlock}" Value="False">
+                <Core:ChangePropertyAction TargetObject="{Binding ElementName=CustomTextBlock}" PropertyName="Foreground" Value="{ThemeResource SystemColorGrayTextBrush}" />
+            </Core:DataTriggerBehavior>
+            <Core:DataTriggerBehavior Binding="{Binding Tag, ElementName=CustomTextBlock}" Value="True">
+                <Core:ChangePropertyAction TargetObject="{Binding ElementName=CustomTextBlock}" PropertyName="Foreground" Value="{ThemeResource SystemBaseHighColor}" />
+            </Core:DataTriggerBehavior>            
+        </Interactivity:Interaction.Behaviors>
+        </TextBlock>
+    </Grid>
+</UserControl>

src/core/Microsoft.PowerToys.Settings.UI/Controls/GroupTitleTextBlock.xaml.cs

@@ -0,0 +1,70 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Popups;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
+
+namespace Microsoft.PowerToys.Settings.UI.Controls
+{
+    public sealed partial class GroupTitleTextBlock : UserControl
+    {
+        public string _text;
+
+        public string Text
+        {
+            get
+            {
+                return _text;
+            }
+
+            set
+            {
+                _text = value;
+                CustomTextBlock.Text = value;
+            }
+        }
+
+        public static readonly DependencyProperty IsActiveProperty =
+            DependencyProperty.Register(
+                "IsActive",
+                typeof(string),
+                typeof(GroupTitleTextBlock),
+                null);
+
+        private string _isActive = "False";
+
+        public string IsActive
+        {
+            get
+            {
+                return _isActive;
+            }
+
+            set
+            {
+                SetValue(IsActiveProperty, value.ToString());
+                _isActive = value.ToString();
+                CustomTextBlock.Tag = value.ToString();
+            }
+        }
+
+        public GroupTitleTextBlock()
+        {
+            this.InitializeComponent();
+            DataContext = this;
+            CustomTextBlock.Tag = "False";
+        }
+    }
+}

src/core/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml.cs

@@ -17,6 +17,38 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
     {
         public string Header { get; set; }
 
+        public static readonly DependencyProperty IsActiveProperty =
+            DependencyProperty.Register(
+                "Enabled",
+                typeof(string),
+                typeof(HotkeySettingsControl),
+                null);
+
+        private string _enabled = "False";
+
+        public string Enabled
+        {
+            get
+            {
+                return _enabled;
+            }
+
+            set
+            {
+                SetValue(IsActiveProperty, value);
+                _enabled = value;
+
+                if (value.ToString().ToLower() == "true")
+                {
+                    HotkeyTextBox.IsEnabled = true;
+                }
+                else
+                {
+                    HotkeyTextBox.IsEnabled = false;
+                }
+            }
+        }
+
         public static readonly DependencyProperty HotkeySettingsProperty =
             DependencyProperty.Register(
                 "HotkeySettings",

src/core/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj

@@ -93,6 +93,12 @@
     </Compile>
     <Compile Include="Behaviors\NavigationViewHeaderBehavior.cs" />
     <Compile Include="Behaviors\NavigationViewHeaderMode.cs" />
+    <Compile Include="Controls\BodyTextBlock.xaml.cs">
+      <DependentUpon>BodyTextBlock.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Controls\GroupTitleTextBlock.xaml.cs">
+      <DependentUpon>GroupTitleTextBlock.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\HotkeySettingsControl.xaml.cs">
       <DependentUpon>HotkeySettingsControl.xaml</DependentUpon>
     </Compile>
@@ -195,6 +201,14 @@
     <PRIResource Include="Strings\en-us\Resources.resw" />
   </ItemGroup>
   <ItemGroup>
+    <Page Include="Controls\BodyTextBlock.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Controls\GroupTitleTextBlock.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Controls\HotkeySettingsControl.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -226,7 +226,7 @@
   <data name="PowerLauncher_SearchTypePreference_ExecutableName" xml:space="preserve">
     <value>Executable name</value>
   </data>
-  <data name="PowerLauncher_MaximumNumberOfResults.Header" xml:space="preserve">
+  <data name="PowerLauncher_MaximumNumberOfResults.Text" xml:space="preserve">
     <value>Maximum number of results</value>
   </data>
   <data name="PowerLauncher_Shortcuts.Text" xml:space="preserve">
@@ -389,7 +389,7 @@
   <data name="PowerRename_Toggle_EnableOnExtendedContextMenu.Header" xml:space="preserve">
     <value>Appear only in extended context menu (Shift + Right-click)</value>
   </data>
-  <data name="PowerRename_Toggle_MaxDispListNum.Header" xml:space="preserve">
+  <data name="PowerRename_Toggle_MaxDispListNum.Text" xml:space="preserve">
     <value>Maximum number of items</value>
   </data>
   <data name="PowerRename_Toggle_RestoreFlagsOnLaunch.Header" xml:space="preserve">
@@ -428,7 +428,7 @@
   <data name="ShortcutGuide_Description.Text" xml:space="preserve">
     <value>Shows a help overlay with Windows shortcuts when the Windows key is pressed.</value>
   </data>
-  <data name="ShortcutGuide_PressTime.Header" xml:space="preserve">
+  <data name="ShortcutGuide_PressTime.Text" xml:space="preserve">
     <value>Press duration before showing (ms)</value>
   </data>
   <data name="ShortcutGuide_Appearance_Behavior.Text" xml:space="preserve">
@@ -440,7 +440,7 @@
   <data name="ShortcutGuide_OverlayOpacity.Header" xml:space="preserve">
     <value>Opacity of background</value>
   </data>
-  <data name="ShortcutGuide_Theme.Header" xml:space="preserve">
+  <data name="ShortcutGuide_Theme.Text" xml:space="preserve">
     <value>Choose Shortcut Guide overlay color</value>
   </data>
   <data name="ImageResizer_CustomSizes.Text" xml:space="preserve">
@@ -608,4 +608,19 @@
   <data name="FancyZones_RestoreSize.Content" xml:space="preserve">
     <value>Restore the original size of windows when unsnapping</value>
   </data>
+  <data name="ImageResizer_FallBackEncoderText.Header" xml:space="preserve">
+    <value>Fallback encoder</value>
+  </data>
+  <data name="ImageResizer_FileFormatDescription.Text" xml:space="preserve">
+    <value>The following parameters can be used:</value>
+  </data>
+  <data name="ImageResizer_FilenameFormatHeader.Header" xml:space="preserve">
+    <value>Filename format</value>
+  </data>
+  <data name="ImageResizer_UseOriginalDate.Content" xml:space="preserve">
+    <value>Use original date modified</value>
+  </data>
+  <data name="Encoding.Text" xml:space="preserve">
+    <value>Encoding</value>
+  </data>
 </root>

src/core/Microsoft.PowerToys.Settings.UI/Styles/_Thickness.xaml

@@ -32,4 +32,7 @@
     <!--Extra Extra Small size margins-->
     <Thickness x:Key="XXSmallTopMargin">0, 4, 0, 0</Thickness>
     <Thickness x:Key="XXSmallTopRightBottomMargin">0, 4, 4, 4</Thickness>
+
+    <!--Control Header Text Margin-->
+    <Thickness x:Key="HeaderTextTopMargin">0, 4, 0, 0</Thickness>
 </ResourceDictionary>

src/core/Microsoft.PowerToys.Settings.UI/ViewModels/PowerLauncherViewModel.cs

@@ -20,7 +20,173 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private readonly SendCallback callback;
 
         public PowerLauncherViewModel()
-        {
+        {
+            callback = (PowerLauncherSettings settings) =>
+            {
+                // Propagate changes to Power Launcher through IPC
+                ShellPage.DefaultSndMSGCallback(
+                    string.Format("{{ \"powertoys\": {{ \"{0}\": {1} }} }}", PowerLauncherSettings.POWERTOYNAME, JsonSerializer.Serialize(settings)));
+            };
+            if (SettingsUtils.SettingsExists(PowerLauncherSettings.POWERTOYNAME))
+            {
+                settings = SettingsUtils.GetSettings<PowerLauncherSettings>(PowerLauncherSettings.POWERTOYNAME);
+            }
+            else
+            {
+                settings = new PowerLauncherSettings();
+                settings.properties.open_powerlauncher.Alt = true;
+                settings.properties.open_powerlauncher.Code = (int)Windows.System.VirtualKey.Space;
+                settings.properties.maximum_number_of_results = 4;
+                callback(settings);
+            }
+
+            if (SettingsUtils.SettingsExists())
+            {
+                generalSettings = SettingsUtils.GetSettings<GeneralSettings>();
+            }
+            else
+            {
+                generalSettings = new GeneralSettings();
+            }
+        }
+
+        public PowerLauncherViewModel(PowerLauncherSettings settings, SendCallback callback)
+        {
+            this.settings = settings;
+            this.callback = callback;
+        }
+
+        private void UpdateSettings([CallerMemberName] string propertyName = null)
+        {
+            // Notify UI of property change
+            OnPropertyChanged(propertyName);
+
+            callback(settings);
+        }
+
+        public bool EnablePowerLauncher
+        {
+            get
+            {
+                return generalSettings.Enabled.PowerLauncher;
+            }
+
+            set
+            {
+                if (generalSettings.Enabled.PowerLauncher != value)
+                {
+                    generalSettings.Enabled.PowerLauncher = value;
+                    OnPropertyChanged(nameof(EnablePowerLauncher));
+                    OutGoingGeneralSettings outgoing = new OutGoingGeneralSettings(generalSettings);
+                    ShellPage.DefaultSndMSGCallback(outgoing.ToString());
+                }
+            }
+        }
+
+        public string SearchResultPreference
+        {
+            get
+            {
+                return settings.properties.search_result_preference;
+            }
+
+            set
+            {
+                if (settings.properties.search_result_preference != value)
+                {
+                    settings.properties.search_result_preference = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public string SearchTypePreference
+        {
+            get
+            {
+                return settings.properties.search_type_preference;
+            }
+
+            set
+            {
+                if (settings.properties.search_type_preference != value)
+                {
+                    settings.properties.search_type_preference = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public int MaximumNumberOfResults
+        {
+            get
+            {
+                return settings.properties.maximum_number_of_results;
+            }
+
+            set
+            {
+                if (settings.properties.maximum_number_of_results != value)
+                {
+                    settings.properties.maximum_number_of_results = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public HotkeySettings OpenPowerLauncher
+        {
+            get
+            {
+                return settings.properties.open_powerlauncher;
+            }
+
+            set
+            {
+                if (settings.properties.open_powerlauncher != value)
+                {
+                    settings.properties.open_powerlauncher = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public HotkeySettings OpenFileLocation
+        {
+            get
+            {
+                return settings.properties.open_file_location;
+            }
+
+            set
+            {
+                if (settings.properties.open_file_location != value)
+                {
+                    settings.properties.open_file_location = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public HotkeySettings CopyPathLocation
+        {
+            get
+            {
+                return settings.properties.copy_path_location;
+            }
+
+            set
+            {
+                if (settings.properties.copy_path_location != value)
+                {
+                    settings.properties.copy_path_location = value;
+                    UpdateSettings();
+                }
+            }
+        }
+
+        public HotkeySettings OpenConsole
+        {
             callback = (PowerLauncherSettings settings) =>
             {
                 // Propagate changes to Power Launcher through IPC

src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml

@@ -1,4 +1,4 @@
-<Page
+ <Page
     x:Class="Microsoft.PowerToys.Settings.UI.Views.FancyZonesPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -9,6 +9,8 @@
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"        
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
@@ -17,7 +19,7 @@
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}" x:Name="MainView">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
@@ -55,34 +57,49 @@
             <TextBlock x:Uid="FancyZones_Description"
                        TextWrapping="Wrap"/>
 
-            <ToggleSwitch x:Uid="FancyZones_EnableToggleControl_HeaderText"
-                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
+            <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
+                          x:Uid="FancyZones_EnableToggleControl_HeaderText"
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
                           Margin="{StaticResource MediumTopMargin}" />
 
             <Button Margin="{StaticResource MediumTopMargin}"
                     Style="{StaticResource AccentButtonStyle}"
-                    Command = "{Binding LaunchEditorEventHandler, Source={StaticResource eventViewModel}}"
-                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}">
+                    Command = "{x:Bind ViewModel.LaunchEditorEventHandler}"
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                 <StackPanel Orientation="Horizontal">
                     <Viewbox Height="12" Width="12">
-                    <PathIcon Data="M896 0v896H0V0h896zM768 768V128H128v640h640zM0 1920v-896h1920v896H0zm128-768v640h1664v-640H128zM1024 0h896v896h-896V0zm768 768V128h-640v640h640z"/>
+                        <PathIcon Data="M896 0v896H0V0h896zM768 768V128H128v640h640zM0 1920v-896h1920v896H0zm128-768v640h1664v-640H128zM1024 0h896v896h-896V0zm768 768V128h-640v640h640z"/>
                     </Viewbox>
                     <TextBlock Margin="12,0,0,0" x:Uid="FancyZones_LaunchEditorButtonControl"/>
                 </StackPanel>
             </Button>
 
-            <TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       />
+            <CustomControls:GroupTitleTextBlock 
+                x:Uid="FancyZones_ZoneBehavior_GroupSettings"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                />
 
             <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}">
-                <TextBlock x:Uid="FancyZones_HotkeyEditorControl"
-                           Text="Editor Hotkeys"/>
+                <CustomControls:BodyTextBlock 
+                    x:Uid="FancyZones_HotkeyEditorControl"
+                    IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                    Margin="5,-12,0,0"
+                    />
                 <Viewbox Height="14" Width="14" Margin="5,2,0,0" >
                     <PathIcon
+                        x:Name="FancyZones_HotkeyEditorControl_Icon"
                         x:Uid="FancyZones_HotkeyEditorControl_Icon"
                         VerticalAlignment="Center"
-                        Data="M960 1920q-133 0-255-34t-230-96-194-150-150-195-97-229T0 960q0-133 34-255t96-230 150-194 195-150 229-97T960 0q133 0 255 34t230 96 194 150 150 195 97 229 34 256q0 133-34 255t-96 230-150 194-195 150-229 97-256 34zm0-1792q-115 0-221 30t-198 84-169 130-130 168-84 199-30 221q0 114 30 220t84 199 130 169 168 130 199 84 221 30q114 0 220-30t199-84 169-130 130-168 84-199 30-221q0-114-30-220t-84-199-130-169-168-130-199-84-221-30zm-64 640h128v640H896V768zm0-256h128v128H896V512z"/>
+                        Data="M960 1920q-133 0-255-34t-230-96-194-150-150-195-97-229T0 960q0-133 34-255t96-230 150-194 195-150 229-97T960 0q133 0 255 34t230 96 194 150 150 195 97 229 34 256q0 133-34 255t-96 230-150 194-195 150-229 97-256 34zm0-1792q-115 0-221 30t-198 84-169 130-130 168-84 199-30 221q0 114 30 220t84 199 130 169 168 130 199 84 221 30q114 0 220-30t199-84 169-130 130-168 84-199 30-221q0-114-30-220t-84-199-130-169-168-130-199-84-221-30zm-64 640h128v640H896V768zm0-256h128v128H896V512z">
+                        <Interactivity:Interaction.Behaviors>
+                            <Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="False">
+                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemChromeDisabledLowColor}" />
+                            </Core:DataTriggerBehavior>
+                            <Core:DataTriggerBehavior Binding="{Binding IsOn, ElementName=FancyZones_EnableToggleControl_HeaderText}" Value="True">
+                                <Core:ChangePropertyAction TargetObject="{Binding ElementName=FancyZones_HotkeyEditorControl_Icon}" PropertyName="Foreground" Value="{ThemeResource SystemBaseHighColor}" />
+                            </Core:DataTriggerBehavior>
+                        </Interactivity:Interaction.Behaviors>
+                    </PathIcon>
                 </Viewbox>
             </StackPanel>
 
@@ -92,46 +109,46 @@
                 HorizontalAlignment="Left"
                 Margin="0,5,0,0"
                 HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
-                IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                 />
 
             <CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header"
-                      IsChecked="{ Binding Mode=TwoWay, Path=ShiftDrag}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       />
 
             <CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header"
-                      IsChecked="{ Binding Mode=TwoWay, Path=MouseSwitch}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       />
 
             <CheckBox x:Uid="FancyZones_OverrideSnapHotkeysCheckBoxControl"
-                      IsChecked="{ Binding Mode=TwoWay, Path=OverrideSnapHotkeys}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideSnapHotkeys}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_MoveWindowsAcrossAllMonitorsCheckBoxControl"
-                      IsChecked="{ Binding Mode=TwoWay, Path=MoveWindowsAcrossMonitors}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MoveWindowsAcrossMonitors}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_DisplayChangeMoveWindowsCheckBoxControl"
-                      IsChecked="{ Binding Mode=TwoWay, Path=DisplayChangeMoveWindows}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.DisplayChangeMoveWindows}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       />
 
             <CheckBox x:Uid="FancyZones_ZoneSetChangeMoveWindows"
-                      IsChecked="{ Binding Mode=TwoWay, Path=ZoneSetChangeMoveWindows}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ZoneSetChangeMoveWindows}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_AppLastZoneMoveWindows"
-                      IsChecked="{ Binding Mode=TwoWay, Path=AppLastZoneMoveWindows}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.AppLastZoneMoveWindows}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_OpenWindowOnActiveMonitor"
                       IsChecked="{ Binding Mode=TwoWay, Path=OpenWindowOnActiveMonitor}"
@@ -139,57 +156,59 @@
                       IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_RestoreSize"
-                      IsChecked="{ Binding Mode=TwoWay, Path=RestoreSize}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreSize}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_UseCursorPosEditorStartupScreen"
-                      IsChecked="{ Binding Mode=TwoWay, Path=UseCursorPosEditorStartupScreen}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.UseCursorPosEditorStartupScreen}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_ShowZonesOnAllMonitorsCheckBoxControl"
-                      IsChecked="{ Binding Mode=TwoWay, Path=ShowOnAllMonitors}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShowOnAllMonitors}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
             <CheckBox x:Uid="FancyZones_MakeDraggedWindowTransparentCheckBoxControl"
-                      IsChecked="{ Binding Mode=TwoWay, Path=MakeDraggedWindowsTransparent}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MakeDraggedWindowsTransparent}"
                       Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-
-            <TextBlock x:Uid="Appearance_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock x:Uid="Appearance_GroupSettings"
+                       IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                       />
 
             <StackPanel Orientation="Horizontal" Margin="{StaticResource SmallTopMargin}" Spacing="12">
-            <Slider x:Uid="FancyZones_HighlightOpacity"
+                <Slider x:Uid="FancyZones_HighlightOpacity"
                     Minimum="0"
                     Maximum="100"
                     Width="240"
                     IsThumbToolTipEnabled="False"
-                    Value="{ Binding Mode=TwoWay, Path=HighlightOpacity}"
+                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.HighlightOpacity}"
                     HorizontalAlignment="Left"
-                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
-                <TextBlock Text="{ Binding Mode=OneWay, Path=HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }" 
-                           VerticalAlignment="Center"
-                           FontSize="16"
-                           Margin="0,21,0,0"/>
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock
+                    Text="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
+                    IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                    VerticalAlignment="Center"
+                    FontSize="16"
+                    Margin="0,21,0,0"/>
             </StackPanel>
-            
-            <TextBlock x:Uid="FancyZones_ZoneHighlightColor" 
-                       Style="{StaticResource BodyTextBlockStyle}"
-                       Margin="{StaticResource SmallTopMargin}" />
 
-            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" Padding="4,4,8,4">
+            <CustomControls:BodyTextBlock
+                x:Uid="FancyZones_ZoneHighlightColor"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+
+            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                 <Border Width="48" CornerRadius="2" Height="24">
                     <Border.Background>
-                        <SolidColorBrush Color="{Binding Path=ZoneHighlightColor, Mode=TwoWay}"/>
+                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"/>
                     </Border.Background>
                 </Border>
                 <muxc:DropDownButton.Flyout>
                     <Flyout>
-                    <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColor"
+                        <muxc:ColorPicker x:Name="FancyZones_ZoneHighlightColor"
                               Margin="0,6,0,0"
                               HorizontalAlignment="Left"
                               IsColorSliderVisible="True"
@@ -198,22 +217,21 @@
                               IsAlphaEnabled="False"
                               IsAlphaSliderVisible="False"
                               IsAlphaTextInputVisible="False"
-                              Color="{Binding Path=ZoneHighlightColor, Mode=TwoWay}"
+                              Color="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}"
                               />
                     </Flyout>
                 </muxc:DropDownButton.Flyout>
-            
+
             </muxc:DropDownButton>
-            
 
-            <TextBlock x:Uid="FancyZones_InActiveColor" 
-                       Style="{StaticResource BodyTextBlockStyle}"
-                       Margin="{StaticResource SmallTopMargin}" />
+            <CustomControls:BodyTextBlock
+                x:Uid="FancyZones_InActiveColor"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" Padding="4,4,8,4">
+            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                 <Border Width="48" CornerRadius="2" Height="24">
                     <Border.Background>
-                        <SolidColorBrush Color="{Binding Path=ZoneInActiveColor, Mode=TwoWay}"/>
+                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
                     </Border.Background>
                 </Border>
                 <muxc:DropDownButton.Flyout>
@@ -227,21 +245,19 @@
                               IsAlphaEnabled="False"
                               IsAlphaSliderVisible="False"
                               IsAlphaTextInputVisible="False"
-                              Color="{Binding Path=ZoneInActiveColor, Mode=TwoWay}"/>
+                              Color="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}"/>
                     </Flyout>
                 </muxc:DropDownButton.Flyout>
             </muxc:DropDownButton>
-            
-            
-            <TextBlock x:Uid="FancyZones_BorderColor" 
-                       Style="{StaticResource BodyTextBlockStyle}"
-                       Margin="{StaticResource SmallTopMargin}" />
 
+            <CustomControls:BodyTextBlock
+                x:Uid="FancyZones_BorderColor"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" />
 
-            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" Padding="4,4,8,4">
+            <muxc:DropDownButton Margin="0,4,0,0" IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" Padding="4,4,8,4">
                 <Border Width="48" CornerRadius="2" Height="24">
                     <Border.Background>
-                        <SolidColorBrush Color="{Binding Path=ZoneBorderColor, Mode=TwoWay}"/>
+                        <SolidColorBrush Color="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"/>
                     </Border.Background>
                 </Border>
                 <muxc:DropDownButton.Flyout>
@@ -255,19 +271,21 @@
                               IsAlphaEnabled="False"
                               IsAlphaSliderVisible="False"
                               IsAlphaTextInputVisible="False"
-                              Color="{Binding Path=ZoneBorderColor, Mode=TwoWay}"
-                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                              Color="{x:Bind  Path=ViewModel.ZoneBorderColor, Mode=TwoWay}"
+                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
                     </Flyout>
                 </muxc:DropDownButton.Flyout>
             </muxc:DropDownButton>
 
-            <TextBlock x:Uid="FancyZones_ExcludeApps"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
+            <CustomControls:GroupTitleTextBlock 
+                x:Uid="FancyZones_ExcludeApps"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                />
+            
             <TextBox x:Uid="FancyZones_ExcludeApps_TextBoxControl"
                      Margin="{StaticResource SmallTopMargin}"
-                     Text="{ Binding Mode=TwoWay, Path=ExcludedApps}"
-                     IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                     Text="{x:Bind Mode=TwoWay, Path=ViewModel.ExcludedApps}"
+                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      Width="380"
                      Height="160"
                      HorizontalAlignment="Left"

src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml.cs

@@ -22,13 +22,13 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class FancyZonesPage : Page
     {
-        public FancyZonesViewModel ViewModel { get; set; }
+        private FancyZonesViewModel ViewModel { get; set; }
 
         public FancyZonesPage()
         {
             this.InitializeComponent();
             ViewModel = new FancyZonesViewModel();
-            this.FZSettingsView.DataContext = ViewModel;
+            MainView.DataContext = ViewModel;
         }
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

@@ -3,6 +3,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"    
     xmlns:models="using:Microsoft.PowerToys.Settings.UI.Lib"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -50,20 +51,22 @@
         <StackPanel Orientation="Vertical" x:Name="ImageResizerView">
 
             <TextBlock x:Uid="ImageResizer_Description"
-                       TextWrapping="Wrap"/>
+                       TextWrapping="Wrap"
+                       />
 
             <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
                           Margin="{StaticResource MediumTopMargin}"
-                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"/>
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
 
-            <TextBlock x:Uid="ImageResizer_CustomSizes"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock 
+                x:Uid="ImageResizer_CustomSizes"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
 
             <ListView x:Name="ImagesSizesListView" 
                       ItemsSource="{Binding Sizes, Mode=TwoWay, Source={StaticResource ViewModel}}"
                       Padding="0"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       Margin="0"
                       SelectionMode="None">
 
@@ -171,21 +174,22 @@
                               x:Name="AddSizeButton"
                               Width="560"
                               Style="{StaticResource AddItemAppBarButtonStyle}"
-                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}" 
-                             x:Uid="ImageResizer_AddSizeButton"
+                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" 
+                              x:Uid="ImageResizer_AddSizeButton"
                               Margin="{StaticResource AddItemButtonMargin}"
                               Command = "{Binding AddImageSizeEventHandler, Source={StaticResource ViewModel}}"
                           />
             </StackPanel>
 
-            <TextBlock Text="Encoding" 
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock 
+                x:Uid="Encoding"
+                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-            <ComboBox Header="Fallback encoder"
+            <ComboBox x:Uid="ImageResizer_FallBackEncoderText"
                           SelectedIndex="{Binding Path=Encoder, Mode=TwoWay, Source={StaticResource ViewModel}}"
                           Width="240"
                           Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
@@ -194,32 +198,32 @@
                 <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
             </ComboBox>
 
-
-            <muxc:NumberBox Header="JPEG Quality level"
-                            Minimum="0"
+            <CustomControls:BodyTextBlock x:Uid="ImageResizer_Encoding" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            <muxc:NumberBox Minimum="0"
                             Maximum="100"
                             Value="{ Binding Mode=TwoWay, Path=JPEGQualityLevel, Source={StaticResource ViewModel}}"
                             Width="240"
+                            Margin="{StaticResource HeaderTextTopMargin}"
                             SpinButtonPlacementMode="Compact"
                             HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}" 
-                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"/>
+                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                            />
 
-            <ComboBox Header="PNG interlacing"
+            <ComboBox x:Uid="ImageResizer_PNGInterlacing"
                           SelectedIndex="{ Binding Mode=TwoWay, Path=PngInterlaceOption, Source={StaticResource ViewModel}}"
                           Width="240"
                           Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                 <ComboBoxItem x:Uid="Default"/>
                 <ComboBoxItem x:Uid="On"/>
                 <ComboBoxItem x:Uid="Off"/>
             </ComboBox>
 
-            <ComboBox Header="TIFF Compression"
+            <ComboBox x:Uid="ImageResizer_TIFFCompression"
                           SelectedIndex="{ Binding Mode=TwoWay, Path=TiffCompressOption, Source={StaticResource ViewModel}}"
                           Width="240"
                           Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default"/>
                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None"/>
                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3"/>
@@ -229,44 +233,49 @@
                 <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip"/>
             </ComboBox>
 
-            <TextBlock Text="File" Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock x:Uid="File" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-            <TextBlock Text="The following parameters can be used:" Margin="{StaticResource SmallTopBottomMargin}"/>
+            <CustomControls:BodyTextBlock x:Uid="ImageResizer_FileFormatDescription"
+                                          IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                                          Margin="{StaticResource SmallTopBottomMargin}"/>
 
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%1</Run>
-                <Run>  -  Original filename</Run>
-            </TextBlock>
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%2</Run>
-                <Run>  -  Size name</Run>
-            </TextBlock>
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%3</Run>
-                <Run>  -  Selected width</Run>
-            </TextBlock>
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%4</Run>
-                <Run>  -  Selected height</Run>
-            </TextBlock>
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%5</Run>
-                <Run>  -  Actual height</Run>
-            </TextBlock>
-            <TextBlock FontSize="12">
-                <Run FontWeight="Bold">%6</Run>
-                <Run>  -  Actual width</Run>
-            </TextBlock>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%1" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Original filename" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%2" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Size name" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%3" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Selected width" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%4" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Selected height" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%5" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Actual height" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" Margin="0,-5,0,-5">
+                <CustomControls:BodyTextBlock FontSize="12" FontWeight="Bold" Text="%6" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock FontSize="12" Text=" - Actual width" IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            </StackPanel>
 
-            <TextBox  Header="Filename format"
-                      Text="{ Binding Mode=TwoWay, Path=FileName, Source={StaticResource ViewModel}}"
+            
+            <TextBox  x:Uid="ImageResizer_FilenameFormatHeader"
+                      Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}"
                       HorizontalAlignment="Left"
                       MinWidth="240"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
-                      Margin="{StaticResource SmallTopMargin}"/>
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                      Margin="{StaticResource SmallTopMargin}"
+                      
+                      />
 
-            <CheckBox Content="Use original date modified"
-                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
+            <CheckBox x:Uid="ImageResizer_UseOriginalDate"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       Margin="{StaticResource SmallTopMargin}"
                       IsChecked="{Binding Mode=TwoWay, Path=KeepDateModified, Source={StaticResource ViewModel}}"/>
         </StackPanel>
@@ -293,8 +302,8 @@
 
             <TextBlock 
                 x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
-
+                Style="{StaticResource SettingsGroupTitleStyle}"/>
+            
             <HyperlinkButton 
                 NavigateUri="https://github.com/bricelam/ImageResizer/">
                 <TextBlock Text="Brice Lambson's ImageResizer" TextWrapping="Wrap" />

src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs

@@ -9,12 +9,14 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class ImageResizerPage : Page
     {
-        public ImageResizerViewModel ViewModel { get; set;  }
+        ImageResizerViewModel ViewModel { get; set; }
 
         public ImageResizerPage()
         {
             InitializeComponent();
+
             ViewModel = new ImageResizerViewModel();
+            DataContext = ViewModel;
         }
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -1,332 +1,336 @@
-<Page
-    x:Class="Microsoft.PowerToys.Settings.UI.Views.KeyboardManagerPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
-    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
-    xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Lib"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-
-    <Page.Resources>
-        <viewModel:KeyboardManagerViewModel x:Key="eventViewModel"/>
-        <local:VisibleIfNotEmpty x:Key="visibleIfNotEmptyConverter" />
-        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
-            <StackPanel
-                Orientation="Horizontal"
-                Height="56">
-                <ItemsControl
-                    ItemsSource="{x:Bind GetOriginalKeys()}">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl
-                    ItemsSource="{x:Bind GetNewRemapKeys()}"
-                    Grid.Column="2">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-            </StackPanel>
-        </DataTemplate>
-        <DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
-            <StackPanel
-                Orientation="Horizontal"
-                Height="56">
-                <ItemsControl
-                    ItemsSource="{x:Bind GetOriginalKeys()}">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl
-                    ItemsSource="{x:Bind GetNewRemapKeys()}"
-                    Grid.Column="2">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="3"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <Border
-                    Background="{ThemeResource SystemAccentColor}"
-                    Grid.Column="4"
-                    CornerRadius="4"
-                    Padding="14,0,14,0"
-                    Margin="5,0,5,0"
-                    Height="36"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Left">
-                    <TextBlock
-                        FontWeight="SemiBold"
-                        VerticalAlignment="Center"
-                        TextAlignment="Center"
-                        Foreground="White"
-                        FontSize="12"
-                        Text="{x:Bind TargetApp}" />
-                </Border>
-            </StackPanel>
-        </DataTemplate>
-    </Page.Resources>
-
-    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
-                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
-                        <Setter Target="SidePanel.Width" Value="Auto" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel Orientation="Vertical">
-            <TextBlock x:Uid="KeyboardManager_Description"
-                       TextWrapping="Wrap"/>
-
-            <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
-                          IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"
-                          Margin="{StaticResource MediumTopMargin}" />
-
-            <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
-                       Margin="{StaticResource SmallTopMargin}"/>
-
-            <ComboBox SelectedIndex="1" MinWidth="160"
-                      Margin="{StaticResource SmallTopMargin}">
-                <ComboBoxItem Content="Config-1"/>
-                <ComboBoxItem Content="Config-2"/>
-                <ComboBoxItem Content="Config-3"/>
-            </ComboBox>-->
-
-            <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-            <TextBlock Text="Click below to remap a single key to another key"
-                       Margin="{StaticResource SmallTopMargin}"
-                       TextWrapping="Wrap"/>
-
-            <Button x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
-
-            <ListView x:Name="RemapKeysList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
-                      ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
-                      ItemTemplate="{StaticResource KeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
-                      SelectionMode="None"
-                      IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
-                      />
-
-            <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Icon="Add"
-                    Width="370"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    Margin="{StaticResource AddItemButtonMargin}"
-                    HorizontalAlignment="Left"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->
-
-            <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-            <TextBlock Text="Click below to remap a shortcut (hotkey) to another shortcut"
-                       TextWrapping="Wrap" Margin="{StaticResource SmallTopMargin}"/>
-
-            <Button x:Uid="KeyboardManager_RemapShortcutsButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Command="{Binding Path=EditShortcutCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                    />
-
-            <ListView x:Name="RemapShortcutsList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
-                      ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
-                      ItemTemplate="{StaticResource ShortcutKeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
-                      SelectionMode="None"
-                      IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
-                      ScrollViewer.HorizontalScrollMode="Enabled"
-                      ScrollViewer.HorizontalScrollBarVisibility="Visible"
-                      ScrollViewer.IsHorizontalRailEnabled="True"
-                      />
-
-            <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
-                    Icon="Add"
-                    Width="370"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
-                    Command="{Binding Path=EditShortcutCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                    Margin="{StaticResource AddItemButtonMargin}"
-                    HorizontalAlignment="Left"
-                    />-->
-        </StackPanel>
-
-        <StackPanel 
-            x:Name="SidePanel"
-            Orientation="Vertical"
-            HorizontalAlignment="Left"
-            Width="{StaticResource SidePanelWidth}"
-            Grid.Column="1">
-
-            <TextBlock
-                x:Uid="About_KeyboardManager"
-                Style="{StaticResource SettingsGroupTitleStyle}"
-                Margin="{StaticResource XSmallBottomMargin}"/>
-
-            <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_KeyboardManager">
-                <TextBlock x:Uid="Module_overview" />
-            </HyperlinkButton>
-
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                <TextBlock x:Uid="Give_Feedback" />
-            </HyperlinkButton>
-        </StackPanel>
-    </Grid>
-</Page>
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.KeyboardManagerPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Lib"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Page.Resources>
+        <viewModel:KeyboardManagerViewModel x:Key="eventViewModel"/>
+        <local:VisibleIfNotEmpty x:Key="visibleIfNotEmptyConverter" />
+        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
+            <StackPanel
+                Orientation="Horizontal"
+                Height="56">
+                <ItemsControl
+                    ItemsSource="{x:Bind GetOriginalKeys()}">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal"/>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border
+                                Background="{ThemeResource SystemBaseLowColor}"
+                                CornerRadius="4"
+                                Padding="14,0,14,0"
+                                Margin="5,0,5,0"
+                                Height="36"
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Left">
+                                <TextBlock
+                                    FontWeight="SemiBold"
+                                    VerticalAlignment="Center"
+                                    TextAlignment="Center"
+                                    FontSize="12"
+                                    Text="{Binding}" />
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <FontIcon Glyph="&#xE72A;"
+                          Grid.Column="1"
+                          FontSize="14"
+                          VerticalAlignment="Center" 
+                          Margin="5,0,5,0"/>
+                <ItemsControl
+                    ItemsSource="{x:Bind GetNewRemapKeys()}"
+                    Grid.Column="2">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal"/>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border
+                                Background="{ThemeResource SystemAccentColor}"
+                                CornerRadius="4"
+                                Padding="14,0,14,0"
+                                Margin="5,0,5,0"
+                                Height="36"
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Left">
+                                <TextBlock
+                                    FontWeight="SemiBold"
+                                    VerticalAlignment="Center"
+                                    TextAlignment="Center"
+                                    Foreground="White"
+                                    FontSize="12"
+                                    Text="{Binding}" />
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </StackPanel>
+        </DataTemplate>
+        <DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
+            <StackPanel
+                Orientation="Horizontal"
+                Height="56">
+                <ItemsControl
+                    ItemsSource="{x:Bind GetOriginalKeys()}">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal"/>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border
+                                Background="{ThemeResource SystemBaseLowColor}"
+                                CornerRadius="4"
+                                Padding="14,0,14,0"
+                                Margin="5,0,5,0"
+                                Height="36"
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Left">
+                                <TextBlock
+                                    FontWeight="SemiBold"
+                                    VerticalAlignment="Center"
+                                    TextAlignment="Center"
+                                    FontSize="12"
+                                    Text="{Binding}" />
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <FontIcon Glyph="&#xE72A;"
+                          Grid.Column="1"
+                          FontSize="14"
+                          VerticalAlignment="Center" 
+                          Margin="5,0,5,0"/>
+                <ItemsControl
+                    ItemsSource="{x:Bind GetNewRemapKeys()}"
+                    Grid.Column="2">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal"/>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border
+                                Background="{ThemeResource SystemAccentColor}"
+                                CornerRadius="4"
+                                Padding="14,0,14,0"
+                                Margin="5,0,5,0"
+                                Height="36"
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Left">
+                                <TextBlock
+                                    FontWeight="SemiBold"
+                                    VerticalAlignment="Center"
+                                    TextAlignment="Center"
+                                    Foreground="White"
+                                    FontSize="12"
+                                    Text="{Binding}" />
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <FontIcon Glyph="&#xE72A;"
+                          Grid.Column="3"
+                          FontSize="14"
+                          VerticalAlignment="Center" 
+                          Margin="5,0,5,0"/>
+                <Border
+                    Background="{ThemeResource SystemAccentColor}"
+                    Grid.Column="4"
+                    CornerRadius="4"
+                    Padding="14,0,14,0"
+                    Margin="5,0,5,0"
+                    Height="36"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left">
+                    <TextBlock
+                        FontWeight="SemiBold"
+                        VerticalAlignment="Center"
+                        TextAlignment="Center"
+                        Foreground="White"
+                        FontSize="12"
+                        Text="{x:Bind TargetApp}" />
+                </Border>
+            </StackPanel>
+        </DataTemplate>
+    </Page.Resources>
+
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                        <Setter Target="SidePanel.Width" Value="Auto" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <StackPanel Orientation="Vertical">
+            <TextBlock x:Uid="KeyboardManager_Description"
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
+                          IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"
+                          Margin="{StaticResource MediumTopMargin}" />
+
+            <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
+                       Margin="{StaticResource SmallTopMargin}"/>
+
+            <ComboBox SelectedIndex="1" MinWidth="160"
+                      Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem Content="Config-1"/>
+                <ComboBoxItem Content="Config-2"/>
+                <ComboBoxItem Content="Config-3"/>
+            </ComboBox>-->
+
+            <CustomControls:GroupTitleTextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
+                                                IsActive="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
+
+            <CustomControls:BodyTextBlock Text="Click below to remap a single key to another key" 
+                                          IsActive="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <Button x:Uid="KeyboardManager_RemapKeyboardButton"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Style="{StaticResource AccentButtonStyle}"
+                    Command="{Binding Path=RemapKeyboardCommand}"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
+
+            <ListView x:Name="RemapKeysList"
+                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
+                      ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
+                      ItemTemplate="{StaticResource KeysListViewTemplate}"
+                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                      BorderThickness="1" 
+                      CornerRadius="4"
+                      MinWidth="350"
+                      MaxHeight="200"
+                      Margin="{StaticResource SmallTopBottomMargin}"
+                      HorizontalAlignment="Left"
+                      SelectionMode="None"
+                      IsSwipeEnabled="False"
+                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
+                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                      />
+
+            <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
+                    Icon="Add"
+                    Width="370"
+                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                    Command="{Binding Path=RemapKeyboardCommand}"
+                    Margin="{StaticResource AddItemButtonMargin}"
+                    HorizontalAlignment="Left"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->
+
+            <CustomControls:GroupTitleTextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
+                                                IsActive="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
+
+            <CustomControls:BodyTextBlock Text="Click below to remap a shortcut (hotkey) to another shortcut"
+                                          IsActive="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
+
+            <Button x:Uid="KeyboardManager_RemapShortcutsButton"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Style="{StaticResource AccentButtonStyle}"
+                    Command="{Binding Path=EditShortcutCommand}"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                    />
+
+            <ListView x:Name="RemapShortcutsList"
+                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
+                      ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
+                      ItemTemplate="{StaticResource ShortcutKeysListViewTemplate}"
+                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                      BorderThickness="1" 
+                      CornerRadius="4"
+                      MinWidth="350"
+                      MaxHeight="200"
+                      Margin="{StaticResource SmallTopBottomMargin}"
+                      HorizontalAlignment="Left"
+                      SelectionMode="None"
+                      IsSwipeEnabled="False"
+                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
+                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                      ScrollViewer.HorizontalScrollMode="Enabled"
+                      ScrollViewer.HorizontalScrollBarVisibility="Visible"
+                      ScrollViewer.IsHorizontalRailEnabled="True"
+                      />
+
+            <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
+                    Icon="Add"
+                    Width="370"
+                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                    Command="{Binding Path=EditShortcutCommand}"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                    Margin="{StaticResource AddItemButtonMargin}"
+                    HorizontalAlignment="Left"
+                    />-->
+        </StackPanel>
+
+        <StackPanel 
+            x:Name="SidePanel"
+            Orientation="Vertical"
+            HorizontalAlignment="Left"
+            Width="{StaticResource SidePanelWidth}"
+            Grid.Column="1">
+
+            <TextBlock
+                x:Uid="About_KeyboardManager"
+                Style="{StaticResource SettingsGroupTitleStyle}"
+                Margin="{StaticResource XSmallBottomMargin}"
+                Foreground="{Binding Mode=TwoWay, Path=TextColor}"/>
+
+            <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_KeyboardManager">
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
+        </StackPanel>
+    </Grid>
+</Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -1,177 +1,180 @@
-<Page
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:Custom="using:Microsoft.PowerToys.Settings.UI.Controls"
-    x:Class="Microsoft.PowerToys.Settings.UI.Views.PowerLauncherPage"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-
-    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
-                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
-                        <Setter Target="SidePanel.Width" Value="Auto" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel Orientation="Vertical">
-            <TextBlock x:Uid="PowerLauncher_Description"
-                       TextWrapping="Wrap"/>
-
-            <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"
-                          Margin="{StaticResource MediumTopMargin}"/>
-
-            <TextBlock x:Uid="PowerLauncher_SearchResults"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-            <!--<ComboBox x:Uid="PowerLauncher_SearchResultPreference"
-                      MinWidth="320"
-                      Margin="{StaticResource SmallTopMargin}"
-                      ItemsSource="{x:Bind searchResultPreferencesOptions}"
-                      SelectedItem="{x:Bind Mode=TwoWay, Path=SelectedSearchResultPreference}"
-                      SelectedValuePath="Item2"
-                      DisplayMemberPath="Item1"
-                      IsEnabled="False"
-                      />
-
-            <ComboBox x:Uid="PowerLauncher_SearchTypePreference"
-                      MinWidth="320"
-                      Margin="{StaticResource SmallTopMargin}"
-                      ItemsSource="{x:Bind searchTypePreferencesOptions}"
-                      SelectedItem="{x:Bind Mode=TwoWay, Path=SelectedSearchTypePreference}"
-                      SelectedValuePath="Item2"
-                      DisplayMemberPath="Item1"
-                      IsEnabled="False"
-                      />-->
-
-            <muxc:NumberBox x:Uid="PowerLauncher_MaximumNumberOfResults" 
-                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.MaximumNumberOfResults}"
-                            Width="240"
-                            SpinButtonPlacementMode="Compact"
-                            HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}"
-                            Minimum="1"
-                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
-
-            <TextBlock x:Uid="PowerLauncher_Shortcuts"
-                       HorizontalAlignment="Left"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-            <Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenPowerLauncher"
-                                          Width="240"
-                                          HorizontalAlignment="Left"
-                                          Margin="{StaticResource SmallTopMargin}"
-                                          HotkeySettings="{x:Bind Path=ViewModel.OpenPowerLauncher, Mode=TwoWay}"
-                                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                                        />
-            <!--<Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenFileLocation"
-                                          Width="320"
-                                          HorizontalAlignment="Left"
-                                          Margin="{StaticResource SmallTopMargin}"
-                                          HotkeySettings="{x:Bind Path=ViewModel.OpenFileLocation, Mode=TwoWay}"
-                                          IsEnabled="False"
-                                        />
-            <Custom:HotkeySettingsControl x:Uid="PowerLauncher_CopyPathLocation"
-                                          Width="320"
-                                          HorizontalAlignment="Left"
-                                          Margin="{StaticResource SmallTopMargin}"
-                                          HotkeySettings="{x:Bind Path=ViewModel.CopyPathLocation, Mode=TwoWay}"
-                                          IsEnabled="False"
-                                        />
-            <Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenConsole"
-                                          Width="320"
-                                          HorizontalAlignment="Left"
-                                          Margin="{StaticResource SmallTopMargin}"
-                                          HotkeySettings="{x:Bind Path=ViewModel.OpenConsole, Mode=TwoWay}"
-                                          IsEnabled="False"
-                                        />-->
-
-            <!--<CheckBox x:Uid="PowerLauncher_OverrideWinRKey" 
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="False"
-                      IsEnabled="False"
-                      />-->
-
-            <!--<CheckBox x:Uid="PowerLauncher_OverrideWinSKey"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.OverrideWinSKey}"
-                      IsEnabled="False"
-                      />-->
-
-            <CheckBox x:Uid="PowerLauncher_IgnoreHotkeysInFullScreen"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IgnoreHotkeysInFullScreen}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-                      />
-
-            <CheckBox x:Uid="PowerLauncher_ClearInputOnLaunch"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ClearInputOnLaunch}"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
-            />
-        </StackPanel>
-        <StackPanel
-            x:Name="SidePanel"
-            Orientation="Vertical"
-            HorizontalAlignment="Left"
-            Width="{StaticResource SidePanelWidth}"
-            Grid.Column="1">
-
-            <TextBlock 
-                x:Uid="About_PowerLauncher"
-                Style="{StaticResource SettingsGroupTitleStyle}"
-                Margin="{StaticResource XSmallBottomMargin}"/>
-
-            <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerToysRun">
-                <TextBlock x:Uid="Module_overview" />
-            </HyperlinkButton>
-
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                <TextBlock x:Uid="Give_Feedback" />
-            </HyperlinkButton>
-
-            <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
-
-            <HyperlinkButton NavigateUri="https://github.com/Wox-launcher/Wox/">
-                <TextBlock Text="Wox"/>
-            </HyperlinkButton>
-
-            <HyperlinkButton NavigateUri="https://github.com/betsegaw/windowwalker/">
-                <TextBlock Text="Beta Tadele's Window Walker" />
-            </HyperlinkButton>
-        </StackPanel>
-    </Grid>
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.PowerLauncherPage"
+    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                        <Setter Target="SidePanel.Width" Value="{StaticResource SidePanelWidth}" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                        <Setter Target="SidePanel.Width" Value="Auto" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <StackPanel Orientation="Vertical">
+            <TextBlock x:Uid="PowerLauncher_Description"
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"
+                          Margin="{StaticResource MediumTopMargin}"/>
+
+            <CustomControls:GroupTitleTextBlock x:Uid="PowerLauncher_SearchResults"
+                                        IsActive="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+
+            <!--<ComboBox x:Uid="PowerLauncher_SearchResultPreference"
+                      MinWidth="320"
+                      Margin="{StaticResource SmallTopMargin}"
+                      ItemsSource="{Binding searchResultPreferencesOptions}"
+                      SelectedItem="{Binding Mode=TwoWay, Path=SelectedSearchResultPreference}"
+                      SelectedValuePath="Item2"
+                      DisplayMemberPath="Item1"
+                      IsEnabled="False"
+                      />
+
+            <ComboBox x:Uid="PowerLauncher_SearchTypePreference"
+                      MinWidth="320"
+                      Margin="{StaticResource SmallTopMargin}"
+                      ItemsSource="{Binding searchTypePreferencesOptions}"
+                      SelectedItem="{Binding Mode=TwoWay, Path=SelectedSearchTypePreference}"
+                      SelectedValuePath="Item2"
+                      DisplayMemberPath="Item1"
+                      IsEnabled="False"
+                      />-->
+
+            <CustomControls:BodyTextBlock x:Uid="PowerLauncher_MaximumNumberOfResults"
+                                  Margin="{StaticResource SmallTopMargin}"
+                                  IsActive="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+            <muxc:NumberBox Value="{Binding Mode=TwoWay, Path=MaximumNumberOfResults}"
+                            Width="240"
+                            SpinButtonPlacementMode="Compact"
+                            HorizontalAlignment="Left"
+                            Minimum="1"
+                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+
+            <CustomControls:GroupTitleTextBlock x:Uid="PowerLauncher_Shortcuts"
+                       HorizontalAlignment="Left"
+                       IsActive="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+
+            <CustomControls:HotkeySettingsControl x:Uid="PowerLauncher_OpenPowerLauncher"
+                                                  Width="240"
+                                                  HorizontalAlignment="Left"
+                                                  Margin="{StaticResource SmallTopMargin}"
+                                                  HotkeySettings="{x:Bind Path=ViewModel.OpenPowerLauncher, Mode=TwoWay}"
+                                                  Enabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"/>
+            <!--<Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenFileLocation"
+                                          Width="320"
+                                          HorizontalAlignment="Left"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          HotkeySettings="{Binding Path=ViewModel.OpenFileLocation, Mode=TwoWay}"
+                                          IsEnabled="False"
+                                        />
+            <Custom:HotkeySettingsControl x:Uid="PowerLauncher_CopyPathLocation"
+                                          Width="320"
+                                          HorizontalAlignment="Left"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          HotkeySettings="{Binding Path=ViewModel.CopyPathLocation, Mode=TwoWay}"
+                                          IsEnabled="False"
+                                        />
+            <Custom:HotkeySettingsControl x:Uid="PowerLauncher_OpenConsole"
+                                          Width="320"
+                                          HorizontalAlignment="Left"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          HotkeySettings="{Binding Path=ViewModel.OpenConsole, Mode=TwoWay}"
+                                          IsEnabled="False"
+                                        />-->
+
+            <!--<CheckBox x:Uid="PowerLauncher_OverrideWinRKey" 
+                      Margin="{StaticResource SmallTopMargin}"
+                      IsChecked="False"
+                      IsEnabled="False"
+                      />-->
+
+            <!--<CheckBox x:Uid="PowerLauncher_OverrideWinSKey"
+                      Margin="{StaticResource SmallTopMargin}"
+                      IsChecked="{Binding Mode=TwoWay, Path=ViewModel.OverrideWinSKey}"
+                      IsEnabled="False"
+                      />-->
+
+            <CheckBox x:Uid="PowerLauncher_IgnoreHotkeysInFullScreen"
+                      Margin="{StaticResource SmallTopMargin}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.IgnoreHotkeysInFullScreen}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
+                      />
+
+            <CheckBox x:Uid="PowerLauncher_ClearInputOnLaunch"
+                      Margin="{StaticResource SmallTopMargin}"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ClearInputOnLaunch}"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.EnablePowerLauncher}"
+            />
+        </StackPanel>
+        <StackPanel
+            x:Name="SidePanel"
+            Orientation="Vertical"
+            HorizontalAlignment="Left"
+            Width="{StaticResource SidePanelWidth}"
+            Grid.Column="1">
+
+            <TextBlock 
+                x:Uid="About_PowerLauncher"
+                Style="{StaticResource SettingsGroupTitleStyle}"
+                Margin="{StaticResource XSmallBottomMargin}"
+                Foreground="{ Binding Mode=TwoWay, Path=TextColor}"/>
+
+            <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerToysRun">
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
+
+            <TextBlock 
+                x:Uid="AttributionTitle"
+                Style="{StaticResource SettingsGroupTitleStyle}" 
+                Foreground="{ Binding Mode=TwoWay, Path=TextColor}"/>
+
+            <HyperlinkButton NavigateUri="https://github.com/Wox-launcher/Wox/">
+                <TextBlock Text="Wox"/>
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/betsegaw/windowwalker/">
+                <TextBlock Text="Beta Tadele's Window Walker" />
+            </HyperlinkButton>
+        </StackPanel>
+    </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml.cs

@@ -11,7 +11,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class PowerLauncherPage : Page
     {
-        public PowerLauncherViewModel ViewModel { get; } = new PowerLauncherViewModel();
+        public PowerLauncherViewModel ViewModel { get; set; }
 
         private readonly ObservableCollection<Tuple<string, string>> searchResultPreferencesOptions;
         private readonly ObservableCollection<Tuple<string, string>> searchTypePreferencesOptions;
@@ -19,6 +19,8 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         public PowerLauncherPage()
         {
             InitializeComponent();
+            ViewModel = new PowerLauncherViewModel();
+            DataContext = ViewModel;
 
             var loader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();
 
@@ -33,6 +35,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             searchTypePreferencesOptions.Add(Tuple.Create(loader.GetString("PowerLauncher_SearchTypePreference_ExecutableName"), "executable_name"));
         }
 
+        /*
         public Tuple<string, string> SelectedSearchResultPreference
         {
             get
@@ -64,5 +67,6 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                 }
             }
         }
+        */
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml

@@ -4,10 +4,11 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-
+    
     <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
@@ -49,50 +50,51 @@
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
                           Margin="{StaticResource MediumTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=IsEnabled}"                          
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"                          
                            />
 
-            <TextBlock  x:Uid="PowerRename_ShellIntegration"
-                        Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock 
+                        x:Uid="PowerRename_ShellIntegration"
+                        IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                        />
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_EnableOnContextMenu"
                           Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=EnabledOnContextMenu}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextMenu}"
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                            />
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_EnableOnExtendedContextMenu"
                           Margin="{StaticResource SmallTopMargin}"
-                          IsOn="{Binding Mode=TwoWay, Path=EnabledOnContextExtendedMenu}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnabledOnContextExtendedMenu}"
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                            />
 
-            <TextBlock x:Uid="PowerRename_AutoCompleteHeader" 
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-
+            <CustomControls:GroupTitleTextBlock x:Uid="PowerRename_AutoCompleteHeader"
+                                                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            
             <ToggleSwitch x:Uid="PowerRename_Toggle_AutoComplete"
                           Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=MRUEnabled}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.MRUEnabled}"
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                            />
 
-            <muxc:NumberBox x:Uid="PowerRename_Toggle_MaxDispListNum"
-                            SpinButtonPlacementMode="Compact"
+            <CustomControls:BodyTextBlock x:Uid="PowerRename_Toggle_MaxDispListNum"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            <muxc:NumberBox SpinButtonPlacementMode="Compact"
                             HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}" 
-                            Value="{Binding Mode=TwoWay, Path=MaxDispListNum}"
+                            Margin="{StaticResource HeaderTextTopMargin}"
+                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.MaxDispListNum}"
                             Minimum="0"
                             Width="240"
                             Maximum="20"
-                            IsEnabled="{ Binding Mode=TwoWay, Path=GlobalAndMruEnabled}"
-                            />
+                            IsEnabled="{ x:Bind Mode=OneWay, Path=ViewModel.GlobalAndMruEnabled}"/>
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_RestoreFlagsOnLaunch"
                           Margin="0, 17, 0, 0" 
-                          IsOn="{Binding Mode=TwoWay, Path=RestoreFlagsOnLaunch}"
-                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                           />
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.RestoreFlagsOnLaunch}"
+                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
         </StackPanel>
 
 
@@ -104,7 +106,8 @@
 
             <TextBlock x:Uid="About_PowerRename"
                        Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource XSmallBottomMargin}"/>
+                       Margin="{StaticResource XSmallBottomMargin}"
+                       />
 
             <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerRename">
                 <TextBlock x:Uid="Module_overview" />
@@ -117,7 +120,8 @@
 
             <TextBlock 
                 x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
+                Style="{StaticResource SettingsGroupTitleStyle}"
+                />
 
             <HyperlinkButton 
                 NavigateUri="https://github.com/chrdavis/SmartRename">

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml.cs

@@ -14,14 +14,14 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class PowerRenamePage : Page
     {
-        public PowerRenameViewModel ViewModel { get; set; }
+        private PowerRenameViewModel ViewModel { get; set; }
 
         public PowerRenamePage()
         {
             this.InitializeComponent();
-
             ViewModel = new PowerRenameViewModel();
-            this.PowerRenameSettingsView.DataContext = ViewModel;
+
+            DataContext = ViewModel;
         }
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml

@@ -5,6 +5,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
@@ -48,51 +50,54 @@
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical" x:Name="ShortCutGuideView">
             <TextBlock x:Uid="ShortcutGuide_Description"
-                       TextWrapping="Wrap"/>
+                       TextWrapping="Wrap"
+                       />
 
             <ToggleSwitch x:Uid="ShortcutGuide_Enable"
-                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"
                           Margin="{StaticResource MediumTopMargin}"/>
 
-            <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior" 
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <CustomControls:GroupTitleTextBlock x:Uid="ShortcutGuide_Appearance_Behavior" 
+                                                IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
 
-            <muxc:NumberBox x:Uid="ShortcutGuide_PressTime"
-                            Minimum="100"
+            <CustomControls:BodyTextBlock x:Uid="ShortcutGuide_PressTime"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            <muxc:NumberBox Minimum="100"
                             SpinButtonPlacementMode="Compact"
                             HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}"
+                            Margin="{StaticResource HeaderTextTopMargin}"
                             Width="240"
-                            Value="{ Binding Mode=TwoWay, Path=PressTime}"
-                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" SmallChange="50" LargeChange="100"/>
+                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.PressTime}"
+                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}" 
+                            SmallChange="50" 
+                            LargeChange="100"/>
 
             <StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
                 <Slider x:Uid="ShortcutGuide_OverlayOpacity"
                     Minimum="0"
                     Maximum="100"
                     Width="240"
-                    Value="{ Binding Mode=TwoWay, Path=OverlayOpacity}"
+                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
                     IsThumbToolTipEnabled="False"
                     HorizontalAlignment="Left"
-                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
-                <TextBlock Text="{ Binding Mode=OneWay, Path=OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }" 
-                           VerticalAlignment="Center"
-                           FontSize="16"
-                           Margin="0,21,0,0"/>
+                    IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                <CustomControls:BodyTextBlock Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
+                                              VerticalAlignment="Center"
+                                              FontSize="16"
+                                              Margin="0,21,0,0"
+                                              IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
             </StackPanel>
-            
-            <muxc:RadioButtons x:Uid="ShortcutGuide_Theme"
-                               Margin="{StaticResource SmallTopMargin}"
-                               IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                               SelectedIndex="{ Binding Mode=TwoWay, Path=ThemeIndex}">
-                <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsDarkThemeRadioButtonChecked}"/>
 
-                <RadioButton x:Uid="GeneralPage_Radio_Theme_Light" 
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsLightThemeRadioButtonChecked}"/>
-
-                <RadioButton x:Uid="GeneralPage_Radio_Theme_Default"
-                             IsChecked="{ Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked}"/>
+            <CustomControls:BodyTextBlock x:Uid="ShortcutGuide_Theme"
+                                          Margin="{StaticResource SmallTopMargin}"
+                                          IsActive="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+            <muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                               SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
+                               Margin="{StaticResource HeaderTextTopMargin}">
+                <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"/>
+                <RadioButton x:Uid="GeneralPage_Radio_Theme_Light" />
+                <RadioButton x:Uid="GeneralPage_Radio_Theme_Default"/>
             </muxc:RadioButtons>
         </StackPanel>
 
@@ -106,9 +111,8 @@
             <TextBlock 
                 x:Uid="About_ShortcutGuide"
                 Style="{StaticResource SettingsGroupTitleStyle}"
-                Margin="{StaticResource XSmallBottomMargin}"/>
-
-            <Image MaxWidth="240" Source="https://aka.ms/powerToysShortcutGuideSettingImage" />
+                Margin="{StaticResource XSmallBottomMargin}"
+                />
 
             <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ShortcutGuide">
                 <TextBlock x:Uid="Module_overview"/>

src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml.cs

@@ -9,13 +9,14 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class ShortcutGuidePage : Page
     {
-        public ShortcutGuideViewModel ViewModel { get; set; }
+        private ShortcutGuideViewModel ViewModel { get; set; }
 
         public ShortcutGuidePage()
         {
             InitializeComponent();
+
             ViewModel = new ShortcutGuideViewModel();
-            this.ShortCutGuideView.DataContext = ViewModel;
+            DataContext = ViewModel;
         }
     }
 }