[FHL] New static UX for Keyboard Manager Editor (#37747)

* Set up static new UX for Keyboard Manager Editor

* Improve the formatting and performance

* fix spelling

src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml

@@ -8,7 +8,8 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-                <!--  Other merged dictionaries here  -->
+                <ResourceDictionary Source="/Styles/KeyVisual.xaml" />
+                <ResourceDictionary Source="/Styles/CommonStyle.xaml" />
             </ResourceDictionary.MergedDictionaries>
             <!--  Other app resources here  -->
         </ResourceDictionary>

src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml.cs

@@ -7,7 +7,10 @@
 using System.IO;
 using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
+using System.Threading.Tasks;
 using ManagedCommon;
+using Microsoft.UI;
+using Microsoft.UI.Dispatching;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
@@ -35,8 +38,14 @@ public partial class App : Application
         public App()
         {
             this.InitializeComponent();
-            Logger.InitializeLogger("\\Keyboard Manager\\WinUI3Editor\\Logs");
-            Logger.LogInfo("keyboard-manager WinUI3 editor logger is initialized");
+
+            Task.Run(() =>
+            {
+                Logger.InitializeLogger("\\Keyboard Manager\\WinUI3Editor\\Logs");
+                Logger.LogInfo("keyboard-manager WinUI3 editor logger is initialized");
+            });
+
+            UnhandledException += App_UnhandledException;
         }
 
         /// <summary>
@@ -46,10 +55,42 @@ public App()
         protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
         {
             window = new MainWindow();
-            window.Activate();
+
+            var appWindow = window.AppWindow;
+            var titleBar = appWindow.TitleBar;
+
+            titleBar.ExtendsContentIntoTitleBar = true;
+            titleBar.BackgroundColor = Colors.Transparent;
+
+            var windowSize = new Windows.Graphics.SizeInt32(960, 600);
+            appWindow.Resize(windowSize);
+
+            Task.Run(() =>
+            {
+                App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+                {
+                    Source = new Uri("ms-appx:///Styles/CommonStyle.xaml"),
+                });
+            }).ContinueWith(_ =>
+            {
+                window.DispatcherQueue.TryEnqueue(() =>
+                {
+                    window.Activate();
+                    window.DispatcherQueue.TryEnqueue(DispatcherQueuePriority.Low, () =>
+                    {
+                        (window.Content as FrameworkElement)?.UpdateLayout();
+                    });
+                });
+            });
+
             Logger.LogInfo("keyboard-manager WinUI3 editor window is launched");
         }
 
+        private void App_UnhandledException(object sender, Microsoft.UI.Xaml.UnhandledExceptionEventArgs e)
+        {
+            Logger.LogError("Unhandled exception", e.Exception);
+        }
+
         private Window? window;
     }
 }

src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/Remapping.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;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace KeyboardManagerEditorUI.Helpers
+{
+    public class Remapping
+    {
+        public List<string> OriginalKeys { get; set; } = new List<string>();
+
+        public List<string> RemappedKeys { get; set; } = new List<string>();
+
+        public bool IsAllApps { get; set; } = true;
+
+        public string AppName { get; set; } = "All apps";
+
+        public bool IsEnabled { get; set; } = true;
+    }
+}

src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/URLShortcut.cs

@@ -0,0 +1,19 @@
+// 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;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace KeyboardManagerEditorUI.Helpers
+{
+    public class URLShortcut
+    {
+        public List<string> Shortcut { get; set; } = new List<string>();
+
+        public string URL { get; set; } = string.Empty;
+    }
+}

src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj

@@ -18,6 +18,22 @@
     <OutputPath>..\..\..\..\$(Platform)\$(Configuration)\$(MSBuildProjectName)</OutputPath>
   </PropertyGroup>
 
+  <PropertyGroup>
+	<EnableDefaultXamlItems>true</EnableDefaultXamlItems>
+	<EnableXamlJitOptimization>true</EnableXamlJitOptimization>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Remove="Pages\ExistingUI.xaml" />
+    <None Remove="Pages\Programs.xaml" />
+    <None Remove="Pages\Shortcuts.xaml" />
+    <None Remove="Pages\Text.xaml" />
+    <None Remove="Pages\URLs.xaml" />
+    <None Remove="Styles\CommonStyle.xaml" />
+    <None Remove="Styles\InputControl.xaml" />
+    <None Remove="Styles\KeyVisual.xaml" />
+  </ItemGroup>
+
   <ItemGroup>
     <Manifest Include="$(ApplicationManifest)" />
   </ItemGroup>
@@ -42,6 +58,46 @@
   <ItemGroup>
     <Folder Include="Assets\" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="Styles\CommonStyle.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\URLs.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Text.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Programs.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Shortcuts.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Styles\InputControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Styles\KeyVisual.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\ExistingUI.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
 
   <!--
     Defining the "HasPackageAndPublishMenuAddedByProject" property here allows the Solution

src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml

@@ -6,91 +6,70 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:KeyboardManagerEditorUI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="using:KeyboardManagerEditorUI.Pages"
     Title="KeyboardManagerEditorUI"
     mc:Ignorable="d">
 
-    <Grid Padding="16">
-        <StackPanel>
-            <TextBlock
-                Margin="10"
-                FontSize="24"
-                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                Text="Remap keys" />
-
-            <TextBlock
-                Margin="10"
-                FontSize="16"
-                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Text="Select the key you want to change and then configure the key, shortcut or text you want it to send."
-                TextWrapping="Wrap" />
+    <Grid
+        x:Name="LayoutRoot"
+        HorizontalAlignment="Stretch"
+        VerticalAlignment="Stretch"
+        CornerRadius="4"
+        RowSpacing="6">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="32" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
 
+        <StackPanel
+            Grid.ColumnSpan="2"
+            Margin="16,8,8,8"
+            VerticalAlignment="Top"
+            Orientation="Horizontal">
+            <Image Width="16" Source="ms-appx:///Assets/FluentIconsKeyboardManager.png" />
             <TextBlock
-                Margin="10"
-                FontSize="16"
-                FontStyle="Italic"
-                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Text="Example of a remapping: Select A and send &quot;Ctrl+C&quot;, &quot;A&quot; would be your &quot;Select&quot; and &quot;Ctrl+C&quot; would be your &quot;To send&quot; command."
-                TextWrapping="Wrap" />
-
-            <Grid Margin="10">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="240" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="240" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <TextBlock
-                    Margin="0,12,0,0"
-                    FontSize="16"
-                    FontWeight="Bold"
-                    Text="Selected:" />
-                <Grid Grid.Row="1" Margin="0,8,0,0">
-                    <StackPanel>
-                        <ToggleButton Click="Button_Click" Content="Select" />
-                        <ComboBox
-                            x:Name="keyComboBox"
-                            Width="250"
-                            PlaceholderText="select keys please" />
-                    </StackPanel>
-                </Grid>
-
-                <TextBlock
-                    Grid.Row="1"
-                    Grid.Column="1"
-                    Margin="24,0,24,0"
-                    HorizontalAlignment="Center"
-                    VerticalAlignment="Center"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    Text="&#xE0AB;" />
-
-                <TextBlock
-                    Grid.Column="2"
-                    Margin="0,12,0,0"
-                    FontSize="16"
-                    FontWeight="Bold"
-                    Text="To Send:" />
-                <Grid
-                    Grid.Row="1"
-                    Grid.Column="2"
-                    Margin="0,8,0,0">
-                    <StackPanel>
-                        <ToggleButton Click="Button_Click" Content="Click to select" />
-                        <ComboBox
-                            x:Name="newKeyComboBox"
-                            Width="250"
-                            PlaceholderText="select keys please" />
-                    </StackPanel>
-                </Grid>
-            </Grid>
-            <Button
-                Margin="10"
-                Content="+ Add Key Remapping"
-                Style="{StaticResource AccentButtonStyle}" />
-
+                Margin="12,0,0,0"
+                Style="{StaticResource CaptionTextBlockStyle}"
+                Text="Keyboard Manager" />
         </StackPanel>
 
+        <NavigationView
+            x:Name="RootView"
+            Grid.RowSpan="2"
+            Margin="0,32,0,0"
+            IsBackButtonVisible="Collapsed"
+            IsBackEnabled="False"
+            IsPaneToggleButtonVisible="False"
+            IsTitleBarAutoPaddingEnabled="True"
+            OpenPaneLength="240"
+            PaneDisplayMode="Top"
+            SelectionChanged="RootView_SelectionChanged">
+            <NavigationView.MenuItems>
+                <NavigationViewItem Content="Remappings" Tag="Remappings">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xEDA7;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="Programs" Tag="Programs">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xECAA;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="Text" Tag="Text">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE8D2;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="URLs" Tag="URLs">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE8A7;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+            </NavigationView.MenuItems>
+            <NavigationView.Content>
+                <Frame x:Name="NavigationFrame" Margin="0,0,0,0" />
+            </NavigationView.Content>
+        </NavigationView>
     </Grid>
+
 </Window>