New settings pages (XAML) and improvements to ShellPage. Added more styles for typical margins and textblocks (#1735)

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

@@ -11,22 +11,23 @@
 
     <Grid>
         <ScrollViewer>
-            <StackPanel Orientation="Vertical" Margin="14,0,14,48">
+            <StackPanel Orientation="Vertical">
 
-                <ToggleSwitch Header="Run at startup" x:Name="ToggleSwitch_RunAtStartUp"  Margin="0,14,0,0" Toggled="ToggleSwitch_RunAtStartUp_Toggled" />
+                <ToggleSwitch Header="Run at startup" x:Name="ToggleSwitch_RunAtStartUp"  Margin="{StaticResource SmallTopMargin}" Toggled="ToggleSwitch_RunAtStartUp_Toggled" />
 
-                <muxc:RadioButtons Header="Theme" Margin="0, 28,0,0">
+                <muxc:RadioButtons Header="Theme" Margin="{StaticResource SmallTopMargin}">
                     <RadioButton x:Name="Rodio_Theme_Dark" Content="Dark" Tag="Dark" Checked="Theme_Changed"/>
                     <RadioButton x:Name="Rodio_Theme_Light"  Content="Light" Tag="Light" Checked="Theme_Changed"/>
                     <RadioButton x:Name="Rodio_Theme_Default"  Content="System default" Tag="System" Checked="Theme_Changed"/>
                 </muxc:RadioButtons>
 
                 <!--
+                    <TextBlock Text="Default apps" Style="{StaticResource SettingsGroupTitleStyle}"/>
                 <ToggleSwitch Header="Disable telemetry" IsOn="True" Margin="0,14,0,0" />
                 <TextBlock Text="PowerToys currently respects the Windows data &amp; feedback setting" Opacity="0.8" Margin="0,0,0,0" />
                     -->
 
-                <Button Background="{ThemeResource SystemAccentColor}" Content="Restart as admin" Margin="0,10,0,0" Foreground="White" Click="Restart_Elevated" />
+                <Button Background="{ThemeResource SystemAccentColor}" Content="Restart as admin" Margin="{StaticResource SmallTopMargin}" Foreground="White" Click="Restart_Elevated" />
 
                 <!--
                 <TextBlock Text="Default apps" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,34,0,8"/>
@@ -38,12 +39,12 @@
                 </ComboBox>
                -->
 
-                <TextBlock Text="About PowerToys" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,34,0,8"/>
-                <TextBlock FontWeight="Bold" Text="Version 0.15.1.0" Margin="0,14,0,0" />
+                <TextBlock Text="About PowerToys" Style="{StaticResource SettingsGroupTitleStyle}"/>
+                <TextBlock Text="Version 0.15.1.0" FontWeight="Bold" Margin="{StaticResource SmallTopMargin}" />
                 <!--<Button Background="{ThemeResource SystemAccentColor}" Content="Check for updates" Margin="0,10,0,0" Foreground="White" />
                  TO DO: The styling of this button should be improved so the hover/pressed states are representing the SystemAccentColor -->
 
-                <HyperlinkButton Content="Report a bug" Margin="0,14,0,0" NavigateUri="https://github.com/microsoft/PowerToys/issues" />
+                <HyperlinkButton Content="Report a bug" NavigateUri="https://github.com/microsoft/PowerToys/issues" />
                 <HyperlinkButton Content="Request a feature"  NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
                 <HyperlinkButton Content="Privacy statement" NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839" />
             </StackPanel>

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

@@ -35,14 +35,14 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         /// <inheritdoc/>
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
-            GeneralSettings settings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
+            //GeneralSettings settings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
             base.OnNavigatedTo(e);
             
             // load and apply theme settings
-            this.ReLoadTheme(settings.theme);
+          //  this.ReLoadTheme(settings.theme);
 
             // load run on start up ui settings value and update the ui state.
-            this.ToggleSwitch_RunAtStartUp.IsOn = settings.startup;
+            //this.ToggleSwitch_RunAtStartUp.IsOn = settings.startup;
         }
 
         /// <summary>

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

@@ -0,0 +1,91 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.PowerLauncherPage"
+    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"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+
+        <StackPanel Orientation="Vertical">
+            <TextBlock Text="A quick launcher that has additional capabilities without sacrificing performance."
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch Header="Enable PowerLauncher"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Search &amp; results"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <ComboBox Header="Search result preference"
+                          SelectedIndex="0"
+                              MinWidth="320"
+                          Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem>Most commonly used</ComboBoxItem>
+                <ComboBoxItem>Most recently used</ComboBoxItem>
+                <ComboBoxItem>Alphabetical order</ComboBoxItem>
+                <ComboBoxItem>Running processes/opened applications</ComboBoxItem>
+            </ComboBox>
+
+            <ComboBox Header="Search type preference"
+                          SelectedIndex="0"
+                          MinWidth="320"
+                          Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem>Application name</ComboBoxItem>
+                <ComboBoxItem>A string that is contained in the application</ComboBoxItem>
+                <ComboBoxItem>Executable name</ComboBoxItem>
+            </ComboBox>
+
+            <muxc:NumberBox Header="Maximum numbers of results"
+                            Value="4"
+                            Width="320"
+                            SpinButtonPlacementMode="Inline"
+                            HorizontalAlignment="Left"
+                            Margin="{StaticResource SmallTopMargin}" />
+
+
+            <TextBlock Text="Shortcuts"
+                       Width="320"
+                       HorizontalAlignment="Left"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <!-- TO DO: Add logic to only allow specific (or combination of) keys as entries -->
+            <TextBox Header="Open PowerLauncher"
+                     Width="320"
+                     HorizontalAlignment="Left"
+                     Margin="{StaticResource SmallTopMargin}"/>
+
+            <!-- TO DO: Add logic to only allow specific (or combination of) keys as entries -->
+            <TextBox Header="Open file location"
+                     Width="320"
+                     HorizontalAlignment="Left"
+                     Margin="{StaticResource SmallTopMargin}"/>
+
+            <!-- TO DO: Add logic to only allow specific (or combination of) keys as entries -->
+            <TextBox Header="Copy path location"
+                     Width="320"
+                     HorizontalAlignment="Left"
+                     Margin="{StaticResource SmallTopMargin}"/>
+
+            <!-- TO DO: Add logic to only allow specific (or combination of) keys as entries -->
+            <TextBox Header="Open console"
+                     HorizontalAlignment="Left"
+                     Width="320"
+                     Margin="{StaticResource SmallTopMargin}"/>
+
+            <ToggleSwitch Header="Override Win+R key"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <ToggleSwitch Header="Override Win+S key"
+                          IsOn="True" 
+                          Margin="{StaticResource SmallTopMargin}" />
+
+        </StackPanel>
+    </Grid>
+</Page>

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

@@ -0,0 +1,28 @@
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+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;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    public sealed partial class PowerLauncherPage : Page
+    {
+        public PowerLauncherViewModel ViewModel { get; } = new PowerLauncherViewModel();
+
+        public PowerLauncherPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.PowerRenamePage"
+    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"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+
+        <StackPanel Orientation="Vertical">
+            <TextBlock Text="A Windows Shell Extension for more advanced bulk renaming using search and replace or regular expressions."
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch Header="Enable PowerRename"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Shell integration"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <ToggleSwitch Header="Show on default context menu"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <ToggleSwitch Header="Only show on extended context menu (Shift + Right-click)"
+                          IsOn="True" 
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Miscellaneous" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <ToggleSwitch Header="Enable autocomplete and autosuggest of recently used inputs for search and replace values"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <ToggleSwitch Header="Restore search, replace and flags values on launch from previous run" 
+                          IsOn="True" 
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <muxc:NumberBox Header="Maximum numbers of items to show in recently used list"
+                            Value="10"
+                            SpinButtonPlacementMode="Inline"
+                            HorizontalAlignment="Left"
+                            Margin="{StaticResource SmallTopMargin}" />
+        </StackPanel>
+    </Grid>
+</Page>

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

@@ -0,0 +1,28 @@
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+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;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    public sealed partial class PowerRenamePage : Page
+    {
+        public PowerRenameViewModel ViewModel { get; } = new PowerRenameViewModel();
+
+        public PowerRenamePage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

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

@@ -18,10 +18,30 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
 
-    <!-- 
-        TODO: 
-            Style clean up for navview
-    -->
+    <Grid>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="LargeLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="1100" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="480" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+   
     <winui:NavigationView
         x:Name="navigationView"
         IsBackButtonVisible="Collapsed"
@@ -31,15 +51,17 @@
         IsPaneToggleButtonVisible="False" 
         PaneDisplayMode="Left"
         Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
-        <winui:NavigationView.PaneHeader>
-            <!-- 
+            <!--     <winui:NavigationView.PaneHeader>
+           
                 TODO: 
                     PowerToys needs to be string 
                     Think maybe about svg logo here
                     Margin should be style
-            -->
-            <TextBlock Margin="12, 24, 0, 6" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold">PowerToys</TextBlock>
-        </winui:NavigationView.PaneHeader>
+   
+            <TextBlock Margin="12, 24, 0, 6" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold">PowerToys</TextBlock>    
+            
+          
+        </winui:NavigationView.PaneHeader>   -->
         <winui:NavigationView.MenuItems>
             <!--
             TODO WTS: Change the symbols for each item as appropriate for your app
@@ -52,10 +74,27 @@
                     <FontIcon Glyph="&#xE713;"/>
                 </winui:NavigationViewItem.Icon>
             </winui:NavigationViewItem>
-            <!--<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Home" helpers:NavHelper.NavigateTo="views:MainPage" />
-            <winui:NavigationViewItem x:Uid="Shell_Test1" Icon="Play" helpers:NavHelper.NavigateTo="views:Test1Page" />
-            <winui:NavigationViewItem x:Uid="Shell_Test2" Icon="Refresh" helpers:NavHelper.NavigateTo="views:Test2Page" />
-            <winui:NavigationViewItem x:Uid="Shell_Test3" Icon="Save" helpers:NavHelper.NavigateTo="views:Test3Page" />-->
+
+            <!-- TO DO: Update icon -->
+            <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage">
+                <winui:NavigationViewItem.Icon>
+                    <FontIcon Glyph="&#xE8AC;"/>
+                </winui:NavigationViewItem.Icon>
+            </winui:NavigationViewItem>
+
+            <!-- TO DO: Update icon -->
+            <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage">
+                <winui:NavigationViewItem.Icon>
+                    <FontIcon Glyph="&#xEDA7;"/>
+                </winui:NavigationViewItem.Icon>
+            </winui:NavigationViewItem>
+
+            <!-- TO DO: Update icon -->
+            <winui:NavigationViewItem x:Uid="Shell_PowerLauncher" helpers:NavHelper.NavigateTo="views:PowerLauncherPage">
+                <winui:NavigationViewItem.Icon>
+                    <FontIcon Glyph="&#xE8A7;"/>
+                </winui:NavigationViewItem.Icon>
+            </winui:NavigationViewItem>
         </winui:NavigationView.MenuItems>
         <i:Interaction.Behaviors>
             <behaviors:NavigationViewHeaderBehavior
@@ -77,8 +116,42 @@
                 <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
             </ic:EventTriggerBehavior>
         </i:Interaction.Behaviors>
-        <Grid>
-            <Frame x:Name="shellFrame" />
-        </Grid>
+        <ScrollViewer Grid.Column="0">
+            <Grid RowSpacing="32"
+                      Margin="{StaticResource MediumLeftRightBottomMargin}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="*"/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+                <Frame x:Name="shellFrame" />
+
+                <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="240"
+                                Grid.Column="1">
+
+                    <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+                    <HyperlinkButton Content="Module overview"/>
+                    <HyperlinkButton Content="Give feedback"/>
+
+                    <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+                    <HyperlinkButton Content="Contributor name"/>
+                    <HyperlinkButton Content="Contributor name"/>
+                    <HyperlinkButton Content="Contributor name"/>
+                </StackPanel>
+            </Grid>
+        </ScrollViewer>
     </winui:NavigationView>
-</UserControl>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,45 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.ShortcutGuidePage"
+    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"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <StackPanel Orientation="Vertical">
+            <TextBlock Text="Shows a help overlay with Windows shortcuts when the Windows key is pressed."
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch Header="Enable Shortcut Guide"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Appearance &amp; behaviour" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <muxc:NumberBox Header="How long to press the Windows key before showing the Shortcut Guide"
+                            Minimum="100"
+                            Value="900"
+                            SpinButtonPlacementMode="Inline"
+                            HorizontalAlignment="Left"
+                            Margin="{StaticResource SmallTopMargin}" />
+
+            <Slider Header="Opacity of the Shortcut Guide's overlay background (%)"
+                    Minimum="0"
+                    Maximum="100"
+                    Value="70"
+                    HorizontalAlignment="Left"
+                    Margin="{StaticResource MediumTopMargin}"/>
+
+            <muxc:RadioButtons Header="Theme" Margin="{StaticResource SmallTopMargin}">
+                <RadioButton Content="Dark"/>
+                <RadioButton Content="Light"/>
+                <RadioButton Content="System default" IsChecked="True"/>
+            </muxc:RadioButtons>
+        </StackPanel>
+    </Grid>
+</Page>

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

@@ -0,0 +1,28 @@
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+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;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    public sealed partial class ShortcutGuidePage : Page
+    {
+        public ShortcutGuideViewModel ViewModel { get; } = new ShortcutGuideViewModel();
+
+        public ShortcutGuidePage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}