Add keyboard manager settings ui[Part-1] (#1979)

* Added view and data models for keyboard remapper settings page

* Added intial UI of Keyboard manager settings page

* Fixed Sln file configs

* Resolve UI changes PR comments

* Added UId for UI elements

* Moved Ui strings to resx

* resolve stylecop warnings

* Fixed missing tag from resx file

src/core/Microsoft.PowerToys.Settings.UI.Lib/KeyboardManagerProperties.cs

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json;
+
+namespace Microsoft.PowerToys.Settings.UI.Lib
+{
+    public class KeyboardManagerProperties
+    {
+        // Bool property to notify Keyboard Manager module if the Edit Shortcut button is pressed.
+        public BoolProperty EditShortcut { get; set; }
+
+        // Bool property to notify Keyboard Manager module if the Remap Keyboard button is pressed.
+        public BoolProperty RemapKeyboard { get; set; }
+
+        public KeyboardManagerProperties()
+        {
+            this.EditShortcut = new BoolProperty();
+            this.RemapKeyboard = new BoolProperty();
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}

src/core/Microsoft.PowerToys.Settings.UI.Lib/KeyboardManagerSettings.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace Microsoft.PowerToys.Settings.UI.Lib
+{
+    public class KeyboardManagerSettings : BasePTModuleSettings
+    {
+        public KeyboardManagerProperties properties { get; set; }
+
+        public KeyboardManagerSettings() 
+        {
+            this.properties = new KeyboardManagerProperties();
+            this.version = "1";
+            this.name = "_unset_";
+        }
+
+        public KeyboardManagerSettings(string ptName)
+        {
+            this.properties = new KeyboardManagerProperties();
+            this.version = "1";
+            this.name = ptName;
+        }
+    }
+}

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

@@ -1,7 +1,16 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
+    <Platforms>AnyCPU;x64</Platforms>
+  </PropertyGroup>
+
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|x64'">
+    <PlatformTarget>x64</PlatformTarget>
+  </PropertyGroup>
+
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|x64'">
+    <PlatformTarget>x64</PlatformTarget>
   </PropertyGroup>
 
   <ItemGroup>

src/core/Microsoft.PowerToys.Settings.UI.Lib/SndKeyboardManagerSettings.cs

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Lib
+{
+    public class SndKeyboardManagerSettings
+    {
+        [JsonPropertyName("Keyboard Manager")]
+        public KeyboardManagerSettings keyboardManagerSettings { get; }
+
+        public SndKeyboardManagerSettings(KeyboardManagerSettings keyboardManagerSettings)
+        {
+            this.keyboardManagerSettings = keyboardManagerSettings;
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}

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

@@ -3,8 +3,8 @@
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
     <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
-    <Platform Condition=" '$(Platform)' == '' ">x86</Platform>
-    <ProjectGuid>{4EB9C181-96E2-4587-AB98-2DB84C1A2310}</ProjectGuid>
+    <Platform Condition=" '$(Platform)' == '' ">x64</Platform>
+    <ProjectGuid>{A7D5099E-F0FD-4BF3-8522-5A682759F915}</ProjectGuid>
     <OutputType>AppContainerExe</OutputType>
     <AppDesignerFolder>Properties</AppDesignerFolder>
     <RootNamespace>Microsoft.PowerToys.Settings.UI</RootNamespace>
@@ -19,79 +19,9 @@
     <WindowsXamlEnableOverview>true</WindowsXamlEnableOverview>
     <AppxPackageSigningEnabled>false</AppxPackageSigningEnabled>
   </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x86'">
-    <DebugSymbols>true</DebugSymbols>
-    <OutputPath>bin\x86\Debug\</OutputPath>
-    <DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>full</DebugType>
-    <PlatformTarget>x86</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
-    <OutputPath>bin\x86\Release\</OutputPath>
-    <DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <Optimize>true</Optimize>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>pdbonly</DebugType>
-    <PlatformTarget>x86</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-    <UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|ARM'">
-    <DebugSymbols>true</DebugSymbols>
-    <OutputPath>bin\ARM\Debug\</OutputPath>
-    <DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>full</DebugType>
-    <PlatformTarget>ARM</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|ARM'">
-    <OutputPath>bin\ARM\Release\</OutputPath>
-    <DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <Optimize>true</Optimize>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>pdbonly</DebugType>
-    <PlatformTarget>ARM</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-    <UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|ARM64'">
-    <DebugSymbols>true</DebugSymbols>
-    <OutputPath>bin\ARM64\Debug\</OutputPath>
-    <DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>full</DebugType>
-    <PlatformTarget>ARM64</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-    <UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|ARM64'">
-    <OutputPath>bin\ARM64\Release\</OutputPath>
-    <DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
-    <Optimize>true</Optimize>
-    <NoWarn>;2008</NoWarn>
-    <DebugType>pdbonly</DebugType>
-    <PlatformTarget>ARM64</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <Prefer32Bit>true</Prefer32Bit>
-    <UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
-  </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
     <DebugSymbols>true</DebugSymbols>
-    <OutputPath>bin\x64\Debug\</OutputPath>
+    <OutputPath>..\..\..\x64\Debug\</OutputPath>
     <DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
     <NoWarn>;2008</NoWarn>
     <DebugType>full</DebugType>
@@ -101,7 +31,7 @@
     <Prefer32Bit>true</Prefer32Bit>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
-    <OutputPath>bin\x64\Release\</OutputPath>
+    <OutputPath>..\..\..\x64\Release\</OutputPath>
     <DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP</DefineConstants>
     <Optimize>true</Optimize>
     <NoWarn>;2008</NoWarn>
@@ -137,8 +67,10 @@
     <Compile Include="ViewModels\GeneralViewModel.cs" />
     <Compile Include="ViewModels\FancyZonesViewModel.cs" />
     <Compile Include="ViewModels\ImageResizerViewModel.cs" />
+    <Compile Include="ViewModels\KeyboardManagerViewModel.cs" />
     <Compile Include="ViewModels\PowerRenameViewModel.cs" />
     <Compile Include="ViewModels\PowerLauncherViewModel.cs" />
+    <Compile Include="ViewModels\RemapKeysModel.cs" />
     <Compile Include="ViewModels\ShellViewModel.cs" />
     <Compile Include="ViewModels\ShortcutGuideViewModel.cs" />
     <Compile Include="Views\GeneralPage.xaml.cs">
@@ -147,6 +79,9 @@
     <Compile Include="Views\ImageResizerPage.xaml.cs">
       <DependentUpon>ImageResizerPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\KeyboardManagerPage.xaml.cs">
+      <DependentUpon>KeyboardManagerPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\PowerLauncherPage.xaml.cs">
       <DependentUpon>PowerLauncherPage.xaml</DependentUpon>
     </Compile>
@@ -244,6 +179,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\KeyboardManagerPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\PowerLauncherPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -157,6 +157,50 @@
     <value>Image Resizer</value>
     <comment>Navigation view item name for Image Resizer</comment>
   </data>
+  <data name="Shell_KeyboardManager.Content" xml:space="preserve">
+    <value>Keyboard Manager</value>
+    <comment>Navigation view item name for Keyboard Manager</comment>
+  </data>
+  <data name="KeyboardManager_ConfigHeader.Text" xml:space="preserve">
+    <value>Current configuration</value>
+    <comment>Keyboard Manager current configuration header</comment>
+  </data>
+  <data name="KeyboardManager_Description.Text" xml:space="preserve">
+    <value>Reconfigure your keyboard by remapping keys and shortcuts</value>
+    <comment>Keyboard Manager page description</comment>
+  </data>
+  <data name="KeyboardManager_EnableToggle.Header" xml:space="preserve">
+    <value>Enable Keyboard Manager</value>
+    <comment>Keyboard Manager enable toggle header</comment>
+  </data>
+  <data name="KeyboardManager_ProfileDescription.Text" xml:space="preserve">
+    <value>Select the profile to display the active key remap and shortcuts</value>
+    <comment>Keyboard Manager configuration dropdown decription</comment>
+  </data>
+  <data name="KeyboardManager_RemapKeyboardButton.Content" xml:space="preserve">
+    <value>Remap a key</value>
+    <comment>Keyboard Manager remap keyboard button content</comment>
+  </data>
+  <data name="KeyboardManager_RemapKeyboardHeader.Text" xml:space="preserve">
+    <value>Remap Keyboard</value>
+    <comment>Keyboard Manager remap keyboard header</comment>
+  </data>
+  <data name="KeyboardManager_RemapShortcutsButton.Content" xml:space="preserve">
+    <value>Redefine a shortcut</value>
+    <comment>Keyboard Manager edit shortcuts button</comment>
+  </data>
+  <data name="KeyboardManager_RemapShortcutsHeader.Text" xml:space="preserve">
+    <value>Edit Shortcuts</value>
+    <comment>Keyboard Manager edit shortcuts header</comment>
+  </data>
+  <data name="KeyboardManager_KeysMappingLayoutLeftHeader.Text" xml:space="preserve">
+    <value>From:</value>
+    <comment>Keyboard Manager mapping keys view left header</comment>
+  </data>
+  <data name="KeyboardManager_KeysMappingLayoutRightHeader.Text" xml:space="preserve">
+    <value>To:</value>
+    <comment>Keyboard Manager mapping keys view right header</comment>
+  </data>
   <data name="PowerLauncher_Description.Text" xml:space="preserve">
     <value>A quick launcher that has additional capabilities without sacrificing performance.</value>
   </data>

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

@@ -1,5 +1,5 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="ThemeControlForegroundBaseHighBrush" Color="{ThemeResource SystemBaseHighColor}"></SolidColorBrush>
 </ResourceDictionary>

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

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.Helpers;
+
+namespace Microsoft.PowerToys.Settings.UI.ViewModels
+{
+    public class KeyboardManagerViewModel : Observable
+    {
+        public KeyboardManagerViewModel()
+        {
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Collections.ObjectModel;
+
+namespace Microsoft.PowerToys.Settings.UI.ViewModels
+{
+    // Dummy data model for the UI. Will be removed moving forward.
+    public class RemapKeysModel : ObservableCollection<Keys>
+    {
+        public RemapKeysModel()
+        {
+            this.Add(new Keys { From = "A", To = "B" });
+            this.Add(new Keys { From = "B", To = "A" });
+            this.Add(new Keys { From = "Ctrl", To = "Shift" });
+            this.Add(new Keys { From = "Shift", To = "Ctrl" });
+            this.Add(new Keys { From = "A", To = "B" });
+            this.Add(new Keys { From = "B", To = "B" });
+            this.Add(new Keys { From = "Ctrl", To = "Shift" });
+            this.Add(new Keys { From = "Shift", To = "Ctrl" });
+        }
+    }
+
+    public class Keys
+    {
+        public string From { get; set; }
+
+        public string To { get; set; }
+    }
+}

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

@@ -0,0 +1,196 @@
+<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:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Page.Resources>
+        <viewmodels:RemapKeysModel x:Key="dummyData"/>
+
+        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="viewmodels:RemapKeysModel">
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="200"/>
+                    <ColumnDefinition Width="200"/>
+                </Grid.ColumnDefinitions>
+                <Border Background="{ThemeResource SystemBaseLowColor}"
+                        CornerRadius="4"
+                        Grid.Column="0"
+                        Width="70"
+                        Height="35"
+                        HorizontalAlignment="Left">
+                    <TextBlock  Grid.Column="0"
+                                Style="{StaticResource BodyTextBlockStyle}"
+                                VerticalAlignment="Center"
+                                TextAlignment="Center"
+                                Text="{Binding From}">
+                    </TextBlock>
+                </Border>
+                <Border Background="{ThemeResource SystemBaseLowColor}"
+                        CornerRadius="4"
+                        Grid.Column="1"
+                        Width="70"
+                        Height="35"
+                        HorizontalAlignment="Left">
+                    <TextBlock Grid.Column="1"
+                               Style="{StaticResource BodyTextBlockStyle}"
+                               VerticalAlignment="Center"
+                               TextAlignment="Center"
+                               Text="{Binding To}">
+                    </TextBlock>
+                </Border>
+            </Grid>
+        </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" />
+                    </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" />
+                    </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"
+                       Style="{StaticResource BodyTextBlockStyle}"/>
+
+            <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock x:Uid="KeyboardManager_ConfigHeader"
+                       Style="{StaticResource SettingsGroupTitleStyle}"
+                       Margin="{StaticResource SmallTopMargin}"/>
+            
+            <ComboBox SelectedIndex="1"
+                      Margin="{StaticResource SmallTopMargin}"
+                      HorizontalAlignment="Left">
+                      <ComboBoxItem Content="Config-1"/>
+                      <ComboBoxItem Content="Config-2"/>
+                      <ComboBoxItem Content="Config-3"/>
+            </ComboBox>
+
+            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
+                       Margin="{StaticResource SmallTopMargin}"/>
+
+            <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
+                       Style="{StaticResource SettingsGroupTitleStyle}"
+                       Margin="{StaticResource SmallTopMargin}"/>
+
+            <Button x:Uid="KeyboardManager_RemapKeyboardButton"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Style="{StaticResource AccentButtonStyle}"
+                    HorizontalAlignment="Left"/>
+
+            <StackPanel Margin="{StaticResource SmallTopMargin}"
+                        Orientation="Horizontal">
+                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutLeftHeader"
+                           Width="200"
+                           FontWeight="SemiBold"/>
+                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutRightHeader"
+                           Width="200"
+                           FontWeight="SemiBold" />
+            </StackPanel>
+
+            <ListView x:Name="RemapKeysList"
+                      ItemsSource="{StaticResource dummyData}"
+                      ItemTemplate="{StaticResource KeysListViewTemplate}"
+                      BorderBrush="LightGray"
+                      BorderThickness="1" 
+                      CornerRadius="4"
+                      Width="400"
+                      MaxHeight="150"
+                      Margin="{StaticResource SmallTopMargin}"
+                      HorizontalAlignment="Left">
+            </ListView>
+
+            <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
+                       Style="{StaticResource SubtitleTextBlockStyle}"
+                       Margin="{StaticResource SmallTopMargin}"/>
+
+            <Button x:Uid="KeyboardManager_RemapShortcutsButton"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Style="{StaticResource AccentButtonStyle}"
+                    HorizontalAlignment="Left"/>
+
+            <StackPanel Margin="{StaticResource SmallTopMargin}"
+                        Orientation="Horizontal">
+                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutLeftHeader"
+                           Width="200"
+                           FontWeight="SemiBold">
+                </TextBlock>
+                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutRightHeader"
+                           Width="200" 
+                           FontWeight="SemiBold" >
+                </TextBlock>
+            </StackPanel>
+
+            <ListView x:Name="RemapShortcutsList"  
+                      ItemsSource="{StaticResource dummyData}"
+                      ItemTemplate="{StaticResource KeysListViewTemplate}"
+                      BorderBrush="LightGray" 
+                      BorderThickness="1" 
+                      CornerRadius="4"
+                      Width="400"
+                      MaxHeight="150"
+                      Margin="{StaticResource SmallTopMargin}"
+                      HorizontalAlignment="Left">
+            </ListView>
+            
+        </StackPanel>
+
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                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>
+</Page>

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

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class KeyboardManagerPage : Page
+    {
+        public KeyboardManagerViewModel ViewModel { get; } = new KeyboardManagerViewModel();
+
+        public KeyboardManagerPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

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

@@ -92,6 +92,13 @@
                         <PathIcon Data="M0 768h1408v1152H0V768zm128 1024h870l-582-581-288 288v293zm1152 0v-102l-224-223-101 101 223 224h102zM128 896v421l288-287 448 447 192-191 224 224V896H128zm832 256q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19zm960-512V347l-339 338-90-90 338-339h-293V128h512v512h-128zm-768-512h256v128h-256V128zm-128 128H768V128h256v128zm-384 0H384V128h256v128zm-384 0H0V128h256v128zM128 640H0V384h128v256zm1920 128v256h-128V768h128zm-128 384h128v256h-128v-256zm0 384h128v256h-128v-256zm-384 256h256v128h-256v-128z"></PathIcon>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
+
+                <!-- TO DO: Update icon -->
+                <winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage">
+                    <winui:NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE765;"/>
+                    </winui:NavigationViewItem.Icon>
+                </winui:NavigationViewItem>
             </winui:NavigationView.MenuItems>
             <i:Interaction.Behaviors>
                 <behaviors:NavigationViewHeaderBehavior

src/tests/win-app-driver/win-app-driver.csproj

@@ -10,7 +10,7 @@
     <AppDesignerFolder>Properties</AppDesignerFolder>
     <RootNamespace>PowerToysTests</RootNamespace>
     <AssemblyName>PowerToysTests</AssemblyName>
-    <TargetFrameworkVersion>v4.7.2</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v4.7.2</TargetFrameworkVersion>
     <FileAlignment>512</FileAlignment>
     <ProjectTypeGuids>{3AC096D0-A1C2-E12C-1390-A8335801FDAB};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">15.0</VisualStudioVersion>
@@ -86,14 +86,14 @@
     </Reference>
   </ItemGroup>
   <ItemGroup>
-    <Compile Include="FancyZonesTests\EditorCanvasZoneResizeTests.cs" />
-    <Compile Include="FancyZonesTests\EditorCustomLayoutsTests.cs" />
-    <Compile Include="FancyZonesTests\EditorGridZoneResizeTests.cs" />
+    <Compile Include="FancyZonesTests\EditorCanvasZoneResizeTests.cs" />
+    <Compile Include="FancyZonesTests\EditorCustomLayoutsTests.cs" />
+    <Compile Include="FancyZonesTests\EditorGridZoneResizeTests.cs" />
     <Compile Include="FancyZonesTests\EditorOpeningTests.cs" />
     <Compile Include="FancyZonesTests\EditorSettingsTests.cs" />
-    <Compile Include="FancyZonesTests\EditorTemplatesApplyTests.cs" />
-    <Compile Include="FancyZonesTests\EditorTemplatesEditTests.cs" />
-    <Compile Include="FancyZonesTests\FancyZonesEditor.cs" />
+    <Compile Include="FancyZonesTests\EditorTemplatesApplyTests.cs" />
+    <Compile Include="FancyZonesTests\EditorTemplatesEditTests.cs" />
+    <Compile Include="FancyZonesTests\FancyZonesEditor.cs" />
     <Compile Include="FancyZonesTests\FancyZonesSettingsTests.cs" />
     <Compile Include="PowerToysSession.cs" />
     <Compile Include="PowerToysTrayTests.cs" />