Auto-format our XAML files and enforce in CI (#9589)

This adds [`XamlStyler.Console`] to our solution, and calls it when we
format the code, to also format
our .xaml files. 
* `XamlStyler.Console` is a dotnet tool so it needs to be restored with
  `dotnet tool restore`
* I've added a set of rules to approximately follow [@cmaneu's XAML guidelines].
  Those guidelines also recommend things based on the code-behind, which
  this tool can't figure out, but also _don't matter that much_.
* There's an extra step to strip BOMs from the output, since Xaml Styler
  adds a BOM by default. Some had them before and others didn't. BOMs
  have been nothing but trouble though.

[`XamlStyler.Console`]: https://github.com/Xavalon/XamlStyler
[@cmaneu's XAML guidelines]: https://github.com/cmaneu/xaml-coding-guidelines

.config/dotnet-tools.json

@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "XamlStyler.Console": {
+      "version": "3.2008.4",
+      "commands": [
+        "xstyler"
+      ]
+    }
+  }
+}

.github/actions/spelling/excludes.txt

@@ -64,3 +64,4 @@ SUMS$
 ^\.github/actions/spelling/
 ^\.gitignore$
 ^doc/reference/master-sequence-list.csv$
+^\XamlStyler.json$

.github/actions/spelling/expect/expect.txt

@@ -2061,6 +2061,7 @@ runtests
 runtimeclass
 runuia
 runut
+runxamlformat
 rvalue
 RVERTICAL
 rxvt
@@ -2852,6 +2853,7 @@ XResource
 xsd
 xsi
 xsize
+xstyler
 XSubstantial
 xtended
 xterm

XamlStyler.json

@@ -0,0 +1,41 @@
+{
+    "AttributesTolerance": 1,
+    "KeepFirstAttributeOnSameLine": true,
+    "MaxAttributeCharactersPerLine": 0,
+    "MaxAttributesPerLine": 1,
+    "NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransform, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter",
+    "SeparateByGroups": false,
+    "AttributeIndentation": 0,
+    "AttributeIndentationStyle": 1,
+    "RemoveDesignTimeReferences":  false,
+    "EnableAttributeReordering": true,
+    "AttributeOrderingRuleGroups": [
+        "x:Class",
+        "xmlns, xmlns:x",
+        "xmlns:*",
+        "x:Key, Key, x:Name, Name, x:Uid, Uid, Title",
+        "Grid.Row, Grid.RowSpan, Grid.Column, Grid.ColumnSpan, Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom",
+        "Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight",
+        "Margin, Padding, HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment, VerticalContentAlignment, Panel.ZIndex",
+        "*:*, *",
+        "PageSource, PageIndex, Offset, Color, TargetName, Property, Value, StartPoint, EndPoint",
+        "mc:Ignorable, d:IsDataSource, d:LayoutOverrides, d:IsStaticText",
+        "Storyboard.*, From, To, Duration"
+    ],
+    "FirstLineAttributes": "",
+    "OrderAttributesByName": true,
+    "PutEndingBracketOnNewLine": false,
+    "RemoveEndingTagOfEmptyElement": true,
+    "SpaceBeforeClosingSlash": true,
+    "RootElementLineBreakRule": 0,
+    "ReorderVSM": 2,
+    "ReorderGridChildren": false,
+    "ReorderCanvasChildren": false,
+    "ReorderSetters": 0,
+    "FormatMarkupExtension": true,
+    "NoNewLineMarkupExtensions": "x:Bind, Binding",
+    "ThicknessSeparator": 2,
+    "ThicknessAttributes": "Margin, Padding, BorderThickness, ThumbnailClipMargin",
+    "FormatOnSave": true,
+    "CommentPadding": 2,
+}

build/scripts/Invoke-FormattingCheck.ps1

@@ -3,12 +3,24 @@
 # Checks for code formatting errors. Will throw exception if any are found.
 function Invoke-CheckBadCodeFormatting() {
     Import-Module ./tools/OpenConsole.psm1
-    Invoke-CodeFormat
+
+    # Don't run the XAML formatter in this step - even if it changes nothing,
+    # it'll still touch all the .xaml files.
+    Invoke-CodeFormat -IgnoreXaml
+
     # returns a non-zero exit code if there are any diffs in the tracked files in the repo
     git diff-index --quiet HEAD --
     if ($lastExitCode -eq 1) {
+
+        # Write the list of files that need updating to the log
+        git diff-index --name-only HEAD
+
         throw "code formatting bad, run Invoke-CodeFormat on branch"
     }
+
+    # Manually check the formatting of our .xaml files, without touching them.
+    Verify-XamlFormat
+
 }
 
 Invoke-CheckBadCodeFormatting

consolegit2gitfilters.json

@@ -38,6 +38,7 @@
     ".wrn",
     ".rec",
     ".err",
+    "XamlStyler.json",
     ".xlsx"
   ]
 }

samples/ConPTY/GUIConsole/GUIConsole.WPF/App.xaml

@@ -1,8 +1,6 @@
-<Application x:Class="GUIConsole.Wpf.App"
+<Application x:Class="GUIConsole.Wpf.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              StartupUri="MainWindow.xaml">
-    <Application.Resources>
+    <Application.Resources />
-         
-    </Application.Resources>
 </Application>

samples/ConPTY/GUIConsole/GUIConsole.WPF/MainWindow.xaml

@@ -1,22 +1,23 @@
-<Window x:Class="GUIConsole.Wpf.MainWindow"
+<Window x:Class="GUIConsole.Wpf.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         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"
-        mc:Ignorable="d"
+        Title="MainWindow"
-        
+        Width="800"
-        Title="MainWindow" Height="450" Width="800"
+        Height="450"
-        Background="#C7000000"
         AllowsTransparency="True"
-        WindowStyle="None"
+        Background="#C7000000"
-        MouseDown="Window_MouseDown"
-        BorderThickness="1"
         BorderBrush="LightSlateGray"
-        
+        BorderThickness="1"
         KeyDown="Window_KeyDown"
-        Loaded="Window_Loaded">
+        Loaded="Window_Loaded"
+        MouseDown="Window_MouseDown"
+        WindowStyle="None"
+        mc:Ignorable="d">
     <Window.Resources>
-        <Style x:Key="TitleBarButtonStyle" TargetType="{x:Type Button}">
+        <Style x:Key="TitleBarButtonStyle"
+               TargetType="{x:Type Button}">
             <Setter Property="Background" Value="Transparent" />
             <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
             <Setter Property="FontSize" Value="14" />
@@ -27,14 +28,17 @@
             <Setter Property="BorderThickness" Value="0" />
         </Style>
 
-        <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource TitleBarButtonStyle}">
+        <Style x:Key="CloseButtonStyle"
+               BasedOn="{StaticResource TitleBarButtonStyle}"
+               TargetType="{x:Type Button}">
             <Setter Property="Content" Value="&#xE10A;" />
             <!--  Remove the default Button template's Triggers, otherwise they'll override our trigger below.  -->
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Button}">
                         <Border Background="{TemplateBinding Background}">
-                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                            <ContentPresenter HorizontalAlignment="Center"
+                                              VerticalAlignment="Center" />
                         </Border>
                     </ControlTemplate>
                 </Setter.Value>
@@ -58,10 +62,17 @@
                 <ColumnDefinition Width="*" />
                 <ColumnDefinition Width="Auto" />
             </Grid.ColumnDefinitions>
-            <TextBlock x:Name="TitleBarTitle" Grid.Column="0" VerticalAlignment="Center" Padding="10 0" Foreground="White">
+            <TextBlock x:Name="TitleBarTitle"
+                       Grid.Column="0"
+                       Padding="10,0"
+                       VerticalAlignment="Center"
+                       Foreground="White">
                 GUIConsole
             </TextBlock>
-            <StackPanel x:Name="TitleBarButtons" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Top">
+            <StackPanel x:Name="TitleBarButtons"
+                        Grid.Column="1"
+                        VerticalAlignment="Top"
+                        Orientation="Horizontal">
                 <Button x:Name="MinimizeButton"
                         Click="MinimizeButton_Click"
                         Content="&#xE108;"
@@ -77,8 +88,13 @@
                         Style="{StaticResource CloseButtonStyle}" />
             </StackPanel>
         </Grid>
-        <ScrollViewer x:Name="TerminalHistoryViewer" Grid.Row="1" ScrollChanged="ScrollViewer_ScrollChanged">
+        <ScrollViewer x:Name="TerminalHistoryViewer"
-            <TextBlock x:Name="TerminalHistoryBlock" FontFamily="Consolas" TextWrapping="Wrap" Foreground="White"/>
+                      Grid.Row="1"
+                      ScrollChanged="ScrollViewer_ScrollChanged">
+            <TextBlock x:Name="TerminalHistoryBlock"
+                       FontFamily="Consolas"
+                       Foreground="White"
+                       TextWrapping="Wrap" />
         </ScrollViewer>
     </Grid>
 </Window>

src/cascadia/LocalTests_TerminalApp/TestHostApp/UnitTestApp.xaml

@@ -1,8 +1,5 @@
-<Application
+<Application x:Class="TestHostApp.App"
-    x:Class="TestHostApp.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="using:TestHostApp"
-    RequestedTheme="Dark">
+             RequestedTheme="Dark" />
-
-</Application>

src/cascadia/TerminalApp/App.xaml

@@ -1,17 +1,20 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Toolkit:XamlApplication
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.App"
+-->
+<Toolkit:XamlApplication x:Class="TerminalApp.App"
                          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
-    xmlns:Toolkit="using:Microsoft.Toolkit.Win32.UI.XamlHost"
                          xmlns:TA="using:TerminalApp"
+                         xmlns:Toolkit="using:Microsoft.Toolkit.Win32.UI.XamlHost"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                         xmlns:local="using:TerminalApp"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                          mc:Ignorable="d">
-    <!-- If you want to prove this works, then add `RequestedTheme="Light"` to
+    <!--
-    the properties on the XamlApplication -->
+        If you want to prove this works, then add `RequestedTheme="Light"` to
+        the properties on the XamlApplication
+    -->
     <Toolkit:XamlApplication.Resources>
 
         <ResourceDictionary>
@@ -20,20 +23,26 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                 <ResourceDictionary>
 
-                    <!-- We're going to apply this style to the root Grid acting
+                    <!--
+                        We're going to apply this style to the root Grid acting
                         as the tab row, because we need to be able to set its
                         `Background` property to "{ThemeResource
                         ApplicationPageBackgroundThemeBrush}" so it will be colored
                         appropriately for the theme, regardless of what we set the
-                    RequestedTheme to -->
+                        RequestedTheme to
-                    <Style x:Name="BackgroundGridThemeStyle" TargetType="Grid">
+                    -->
+                    <Style x:Name="BackgroundGridThemeStyle"
+                           TargetType="Grid">
                         <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
                     </Style>
 
-                    <!-- We need to manually create the error text brush as a
+                    <!--
+                        We need to manually create the error text brush as a
                         theme-dependent brush. SystemControlErrorTextForegroundBrush
-                    is unfortunately static. -->
+                        is unfortunately static.
-                    <SolidColorBrush x:Name="ErrorTextBrush" Color="{ThemeResource SystemErrorTextColor}" />
+                    -->
+                    <SolidColorBrush x:Name="ErrorTextBrush"
+                                     Color="{ThemeResource SystemErrorTextColor}" />
 
                     <!--  Suppress all padding except left around the tabs. The TabView looks far better like this.  -->
                     <Thickness x:Key="TabViewHeaderPadding">8,0,0,0</Thickness>
@@ -41,12 +50,14 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <ResourceDictionary.ThemeDictionaries>
                         <ResourceDictionary x:Key="Dark">
                             <!--  Define resources for Dark mode here  -->
-                            <SolidColorBrush x:Key="TabViewBackground" Color="#FF333333" />
+                            <SolidColorBrush x:Key="TabViewBackground"
+                                             Color="#FF333333" />
                         </ResourceDictionary>
 
                         <ResourceDictionary x:Key="Light">
                             <!--  Define resources for Light mode here  -->
-                            <SolidColorBrush x:Key="TabViewBackground" Color="#FFCCCCCC" />
+                            <SolidColorBrush x:Key="TabViewBackground"
+                                             Color="#FFCCCCCC" />
                         </ResourceDictionary>
 
                     </ResourceDictionary.ThemeDictionaries>

src/cascadia/TerminalApp/ColorPickupFlyout.xaml

@@ -1,9 +1,8 @@
-<Flyout
+<Flyout x:Class="TerminalApp.ColorPickupFlyout"
-    x:Class="TerminalApp.ColorPickupFlyout"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:local="using:TerminalApp"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d">
     <Flyout.FlyoutPresenterStyle>
@@ -13,7 +12,10 @@
     </Flyout.FlyoutPresenterStyle>
     <StackPanel Orientation="Horizontal">
         <StackPanel XYFocusKeyboardNavigation="Enabled">
-            <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" HorizontalAlignment="Center" Margin="0, 3, 0, 0">
+            <VariableSizedWrapGrid Margin="0,3,0,0"
+                                   HorizontalAlignment="Center"
+                                   MaximumRowsOrColumns="4"
+                                   Orientation="Horizontal">
                 <VariableSizedWrapGrid.Resources>
                     <Style TargetType="Rectangle">
                         <Setter Property="Width" Value="30" />
@@ -24,123 +26,168 @@
                         <Setter Property="Margin" Value="2" />
                     </Style>
                 </VariableSizedWrapGrid.Resources>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Crimson" x:Uid="CrimsonColorButton">
+                <Button x:Uid="CrimsonColorButton"
+                        AutomationProperties.Name="Crimson"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Crimson" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="SteelBlue" x:Uid="SteelBlueColorButton">
+                <Button x:Uid="SteelBlueColorButton"
+                        AutomationProperties.Name="SteelBlue"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="SteelBlue" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="MediumSeaGreen" x:Uid="MediumSeaGreenColorButton">
+                <Button x:Uid="MediumSeaGreenColorButton"
+                        AutomationProperties.Name="MediumSeaGreen"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="MediumSeaGreen" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="DarkOrange" x:Uid="DarkOrangeColorButton">
+                <Button x:Uid="DarkOrangeColorButton"
+                        AutomationProperties.Name="DarkOrange"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="DarkOrange" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="MediumVioletRed" x:Uid="MediumVioletRedColorButton">
+                <Button x:Uid="MediumVioletRedColorButton"
+                        AutomationProperties.Name="MediumVioletRed"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="MediumVioletRed" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="DodgerBlue" x:Uid="DodgerBlueColorButton">
+                <Button x:Uid="DodgerBlueColorButton"
+                        AutomationProperties.Name="DodgerBlue"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="DodgerBlue" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="LimeGreen" x:Uid="LimeGreenColorButton">
+                <Button x:Uid="LimeGreenColorButton"
+                        AutomationProperties.Name="LimeGreen"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="LimeGreen" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Yellow" x:Uid="YellowColorButton">
+                <Button x:Uid="YellowColorButton"
+                        AutomationProperties.Name="Yellow"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Yellow" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="BlueViolet" x:Uid="BlueVioletColorButton">
+                <Button x:Uid="BlueVioletColorButton"
+                        AutomationProperties.Name="BlueViolet"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="BlueViolet" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="SlateBlue" x:Uid="SlateBlueColorButton">
+                <Button x:Uid="SlateBlueColorButton"
+                        AutomationProperties.Name="SlateBlue"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="SlateBlue" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Lime" x:Uid="LimeColorButton">
+                <Button x:Uid="LimeColorButton"
+                        AutomationProperties.Name="Lime"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Lime" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Tan" x:Uid="TanColorButton">
+                <Button x:Uid="TanColorButton"
+                        AutomationProperties.Name="Tan"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Tan" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Magenta" x:Uid="MagentaColorButton">
+                <Button x:Uid="MagentaColorButton"
+                        AutomationProperties.Name="Magenta"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Magenta" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="Cyan" x:Uid="CyanColorButton">
+                <Button x:Uid="CyanColorButton"
+                        AutomationProperties.Name="Cyan"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="Cyan" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="SkyBlue" x:Uid="SkyBlueColorButton">
+                <Button x:Uid="SkyBlueColorButton"
+                        AutomationProperties.Name="SkyBlue"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="SkyBlue" />
                     </Button.Content>
                 </Button>
-                <Button Click="ColorButton_Click" AutomationProperties.Name="DarkGray" x:Uid="DarkGrayColorButton">
+                <Button x:Uid="DarkGrayColorButton"
+                        AutomationProperties.Name="DarkGray"
+                        Click="ColorButton_Click">
                     <Button.Content>
                         <Rectangle Fill="DarkGray" />
                     </Button.Content>
                 </Button>
             </VariableSizedWrapGrid>
-            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
+            <StackPanel HorizontalAlignment="Center"
+                        Orientation="Horizontal">
                 <StackPanel.Resources>
                     <Style TargetType="Button">
                         <Setter Property="Margin" Value="2" />
                         <Setter Property="HorizontalAlignment" Value="Stretch" />
                     </Style>
                 </StackPanel.Resources>
-                <Button Padding="5"
+                <Button x:Name="ClearColorButton"
+                        x:Uid="TabColorClearButton"
+                        Padding="5"
                         Click="ClearColorButton_Click"
-                    x:Name="ClearColorButton" x:Uid="TabColorClearButton" CornerRadius="2" Content="Reset">
+                        Content="Reset"
-                </Button>
+                        CornerRadius="2" />
-                <Button Padding="5"
+                <Button x:Name="CustomColorButton"
+                        x:Uid="TabColorCustomButton"
+                        Padding="5"
                         Click="ShowColorPickerButton_Click"
-                    x:Name="CustomColorButton" x:Uid="TabColorCustomButton" CornerRadius="2" Content="Custom...">
+                        Content="Custom..."
-                </Button>
+                        CornerRadius="2" />
             </StackPanel>
         </StackPanel>
-        <Grid Visibility="Collapsed" x:Name="customColorPanel" Margin="5">
+        <Grid x:Name="customColorPanel"
+              Margin="5"
+              Visibility="Collapsed">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
             <ColorPicker x:Name="customColorPicker"
-                     IsMoreButtonVisible="True"
+                         Grid.Row="0"
-                     IsColorSliderVisible="True"
+                         ColorChanged="ColorPicker_ColorChanged"
-                     IsColorChannelTextInputVisible="True"
+                         FontSize="10"
-                     IsHexInputVisible="True"
                          IsAlphaEnabled="False"
                          IsAlphaSliderVisible="False"
                          IsAlphaTextInputVisible="False"
-                     FontSize="10"
+                         IsColorChannelTextInputVisible="True"
-                     Grid.Row="0"
+                         IsColorSliderVisible="True"
-                     ColorChanged="ColorPicker_ColorChanged"
+                         IsHexInputVisible="True"
-                     >
+                         IsMoreButtonVisible="True" />
-            </ColorPicker>
+            <Button x:Name="OkButton"
-            <Button x:Name="OkButton" Click="CustomColorButton_Click" Grid.Row="1" HorizontalAlignment="Center" MinWidth="130" MinHeight="12" Margin="0, 5, 0, 0" x:Uid="OkButton" Content="**OK**"/>
+                    x:Uid="OkButton"
+                    Grid.Row="1"
+                    MinWidth="130"
+                    MinHeight="12"
+                    Margin="0,5,0,0"
+                    HorizontalAlignment="Center"
+                    Click="CustomColorButton_Click"
+                    Content="**OK**" />
         </Grid>
     </StackPanel>
 </Flyout>

src/cascadia/TerminalApp/CommandPalette.xaml

@@ -1,31 +1,34 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<UserControl
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.CommandPalette"
+-->
+<UserControl x:Class="TerminalApp.CommandPalette"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
+             xmlns:Windows10version1903="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:TerminalApp"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:model="using:Microsoft.Terminal.Settings.Model"
              xmlns:mux="using:Microsoft.UI.Xaml.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:Windows10version1903="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
-    xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
-    TabNavigation="Cycle"
-    IsTabStop="True"
              AllowFocusOnInteraction="True"
+             AutomationProperties.Name="{x:Bind ControlName, Mode=OneWay}"
+             IsTabStop="True"
+             LostFocus="_lostFocusHandler"
              PointerPressed="_rootPointerPressed"
              PreviewKeyDown="_previewKeyDownHandler"
              PreviewKeyUp="_keyUpHandler"
-    LostFocus="_lostFocusHandler"
+             TabNavigation="Cycle"
-    mc:Ignorable="d"
+             mc:Ignorable="d">
-    AutomationProperties.Name="{x:Bind ControlName, Mode=OneWay}">
 
     <UserControl.Resources>
         <ResourceDictionary>
 
-            <!-- ThemeShadow is only on 18362. This "Windows10version1903" bit
+            <!--
-            adds it conditionally -->
+                ThemeShadow is only on 18362. This "Windows10version1903" bit
+                adds it conditionally
+            -->
             <Windows10version1903:ThemeShadow x:Name="CommandPaletteShadow" />
 
             <!--  This creates an instance of our CommandKeyChordVisibilityConverter we can reference below  -->
@@ -34,14 +37,17 @@ the MIT License. See LICENSE in the project root for license information. -->
             <local:EmptyStringVisibilityConverter x:Key="ParentCommandVisibilityConverter" />
             <model:IconPathConverter x:Key="IconSourceConverter" />
 
-            <DataTemplate x:Key="ListItemTemplate" x:DataType="local:FilteredCommand">
+            <DataTemplate x:Key="ListItemTemplate"
+                          x:DataType="local:FilteredCommand">
                 <ListViewItem HorizontalContentAlignment="Stretch"
-                                  AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}"
+                              AutomationProperties.AcceleratorKey="{x:Bind Item.KeyChordText, Mode=OneWay}"
-                                  AutomationProperties.AcceleratorKey="{x:Bind Item.KeyChordText, Mode=OneWay}"/>
+                              AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}" />
             </DataTemplate>
 
-            <DataTemplate x:Key="GeneralItemTemplate" x:DataType="local:FilteredCommand">
+            <DataTemplate x:Key="GeneralItemTemplate"
-                <Grid HorizontalAlignment="Stretch" ColumnSpacing="8">
+                          x:DataType="local:FilteredCommand">
+                <Grid HorizontalAlignment="Stretch"
+                      ColumnSpacing="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="16" />
                         <!--  icon  -->
@@ -53,49 +59,45 @@ the MIT License. See LICENSE in the project root for license information. -->
                         <!--  gutter for scrollbar  -->
                     </Grid.ColumnDefinitions>
 
-                    <IconSourceElement
+                    <IconSourceElement Grid.Column="0"
-                                Grid.Column="0"
                                        Width="16"
                                        Height="16"
-                                IconSource="{x:Bind Item.Icon,
+                                       IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
-                                                    Mode=OneWay,
-                                                    Converter={StaticResource IconSourceConverter}}"/>
 
-                    <local:HighlightedTextControl
+                    <local:HighlightedTextControl Grid.Column="1"
-                                Grid.Column="1"
                                                   HorizontalAlignment="Left"
                                                   Text="{x:Bind HighlightedName, Mode=OneWay}" />
 
-                    <!-- The block for the key chord is only visible
+                    <!--
+                        The block for the key chord is only visible
                         when there's actual text set as the label. See
                         CommandKeyChordVisibilityConverter for details.
                         We're setting the accessibility view on the
                         border and text block to Raw because otherwise,
                         Narrator will read out the key chord. Problem is,
                         it already did that because it was the list item's
-                            "AcceleratorKey". It's redundant. -->
+                        "AcceleratorKey". It's redundant.
-                    <Border
+                    -->
-                                Grid.Column="2"
+                    <Border Grid.Column="2"
-                                Visibility="{x:Bind Item.KeyChordText,
-                                                Mode=OneWay,
-                                                Converter={StaticResource CommandKeyChordVisibilityConverter}}"
-                                Style="{ThemeResource KeyChordBorderStyle}"
                             Padding="2,0,2,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                                AutomationProperties.AccessibilityView="Raw">
+                            AutomationProperties.AccessibilityView="Raw"
+                            Style="{ThemeResource KeyChordBorderStyle}"
+                            Visibility="{x:Bind Item.KeyChordText, Mode=OneWay, Converter={StaticResource CommandKeyChordVisibilityConverter}}">
 
-                        <TextBlock
+                        <TextBlock AutomationProperties.AccessibilityView="Raw"
-                                    Style="{ThemeResource KeyChordTextBlockStyle}"
                                    FontSize="12"
-                                    Text="{x:Bind Item.KeyChordText, Mode=OneWay}"
+                                   Style="{ThemeResource KeyChordTextBlockStyle}"
-                                    AutomationProperties.AccessibilityView="Raw" />
+                                   Text="{x:Bind Item.KeyChordText, Mode=OneWay}" />
                     </Border>
                 </Grid>
             </DataTemplate>
 
-            <DataTemplate x:Key="NestedItemTemplate" x:DataType="local:FilteredCommand">
+            <DataTemplate x:Key="NestedItemTemplate"
-                <Grid HorizontalAlignment="Stretch" ColumnSpacing="8">
+                          x:DataType="local:FilteredCommand">
+                <Grid HorizontalAlignment="Stretch"
+                      ColumnSpacing="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="16" />
                         <!--  icon  -->
@@ -107,62 +109,58 @@ the MIT License. See LICENSE in the project root for license information. -->
                         <!--  gutter for scrollbar  -->
                     </Grid.ColumnDefinitions>
 
-                    <IconSourceElement
+                    <IconSourceElement Grid.Column="0"
-                                Grid.Column="0"
                                        Width="16"
                                        Height="16"
-                                IconSource="{x:Bind Item.Icon,
+                                       IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
-                                                    Mode=OneWay,
-                                                    Converter={StaticResource IconSourceConverter}}"/>
 
-                    <local:HighlightedTextControl
+                    <local:HighlightedTextControl Grid.Column="1"
-                                Grid.Column="1"
                                                   HorizontalAlignment="Left"
                                                   Text="{x:Bind HighlightedName, Mode=OneWay}" />
 
-                    <!-- The block for the key chord is only visible
+                    <!--
+                        The block for the key chord is only visible
                         when there's actual text set as the label. See
                         CommandKeyChordVisibilityConverter for details.
                         We're setting the accessibility view on the
                         border and text block to Raw because otherwise,
                         Narrator will read out the key chord. Problem is,
                         it already did that because it was the list item's
-                            "AcceleratorKey". It's redundant. -->
+                        "AcceleratorKey". It's redundant.
-                    <Border
+                    -->
-                                Grid.Column="2"
+                    <Border Grid.Column="2"
-                                Visibility="{x:Bind Item.KeyChordText,
-                                                Mode=OneWay,
-                                                Converter={StaticResource CommandKeyChordVisibilityConverter}}"
-                                Style="{ThemeResource KeyChordBorderStyle}"
                             Padding="2,0,2,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                                AutomationProperties.AccessibilityView="Raw">
+                            AutomationProperties.AccessibilityView="Raw"
+                            Style="{ThemeResource KeyChordBorderStyle}"
+                            Visibility="{x:Bind Item.KeyChordText, Mode=OneWay, Converter={StaticResource CommandKeyChordVisibilityConverter}}">
 
-                        <TextBlock
+                        <TextBlock AutomationProperties.AccessibilityView="Raw"
-                                    Style="{ThemeResource KeyChordTextBlockStyle}"
                                    FontSize="12"
-                                    Text="{x:Bind Item.KeyChordText, Mode=OneWay}"
+                                   Style="{ThemeResource KeyChordTextBlockStyle}"
-                                    AutomationProperties.AccessibilityView="Raw" />
+                                   Text="{x:Bind Item.KeyChordText, Mode=OneWay}" />
                     </Border>
 
                     <!--  xE70E is ChevronUp. Rotated 90 degrees, it's _ChevronRight_  -->
-                    <FontIcon
+                    <FontIcon Grid.Column="2"
-                                FontFamily="Segoe MDL2 Assets"
-                                Glyph="&#xE70E;"
                               HorizontalAlignment="Right"
-                                Grid.Column="2">
+                              FontFamily="Segoe MDL2 Assets"
+                              Glyph="&#xE70E;">
 
                         <FontIcon.RenderTransform>
-                            <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
+                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
                         </FontIcon.RenderTransform>
                     </FontIcon>
 
                 </Grid>
             </DataTemplate>
 
-            <DataTemplate x:Key="TabItemTemplate" x:DataType="local:FilteredCommand">
+            <DataTemplate x:Key="TabItemTemplate"
-                <Grid HorizontalAlignment="Stretch" ColumnSpacing="8" AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}">
+                          x:DataType="local:FilteredCommand">
+                <Grid HorizontalAlignment="Stretch"
+                      AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}"
+                      ColumnSpacing="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="16" />
                         <!--  icon / progress  -->
@@ -176,164 +174,196 @@ the MIT License. See LICENSE in the project root for license information. -->
                         <!--  gutter for scrollbar  -->
                     </Grid.ColumnDefinitions>
 
-                    <mux:ProgressRing
+                    <mux:ProgressRing Grid.Column="0"
-                        Grid.Column="0"
+                                      Width="15"
-                        IsActive="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingActive, Mode=OneWay}"
-                        Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingActive, Mode=OneWay}"
-                        IsIndeterminate="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingIndeterminate, Mode=OneWay}"
-                        Value="{x:Bind Item.(local:TabPaletteItem.TabStatus).ProgressValue, Mode=OneWay}"
-                        MinHeight="0"
-                        MinWidth="0"
                                       Height="15"
-                        Width="15"/>
+                                      MinWidth="0"
+                                      MinHeight="0"
+                                      IsActive="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingActive, Mode=OneWay}"
+                                      IsIndeterminate="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingIndeterminate, Mode=OneWay}"
+                                      Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsProgressRingActive, Mode=OneWay}"
+                                      Value="{x:Bind Item.(local:TabPaletteItem.TabStatus).ProgressValue, Mode=OneWay}" />
 
-                    <IconSourceElement
+                    <IconSourceElement Grid.Column="0"
-                                Grid.Column="0"
                                        Width="16"
                                        Height="16"
-                                IconSource="{x:Bind Item.Icon,
+                                       IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
-                                                    Mode=OneWay,
-                                                    Converter={StaticResource IconSourceConverter}}"/>
 
-                    <local:HighlightedTextControl
+                    <local:HighlightedTextControl Grid.Column="1"
-                                Grid.Column="1"
                                                   HorizontalAlignment="Left"
                                                   Text="{x:Bind HighlightedName, Mode=OneWay}" />
 
-                    <StackPanel
+                    <StackPanel Grid.Column="2"
-                        Grid.Column="2"
-                        VerticalAlignment="Center"
                                 HorizontalAlignment="Right"
+                                VerticalAlignment="Center"
                                 Orientation="Horizontal">
 
-                        <FontIcon
+                        <FontIcon Margin="0,0,8,0"
                                   FontFamily="Segoe MDL2 Assets"
-                            Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).BellIndicator, Mode=OneWay}"
+                                  FontSize="12"
                                   Glyph="&#xEA8F;"
-                            FontSize="12"
+                                  Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).BellIndicator, Mode=OneWay}" />
-                            Margin="0,0,8,0"/>
 
-                        <FontIcon
+                        <FontIcon Margin="0,0,8,0"
                                   FontFamily="Segoe MDL2 Assets"
-                            Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsPaneZoomed, Mode=OneWay}"
-                            Glyph="&#xE8A3;"
                                   FontSize="12"
-                            Margin="0,0,8,0"/>
+                                  Glyph="&#xE8A3;"
+                                  Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsPaneZoomed, Mode=OneWay}" />
 
                         <FontIcon x:Name="HeaderLockIcon"
+                                  Margin="0,0,8,0"
                                   FontFamily="Segoe MDL2 Assets"
-                            Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsReadOnlyActive, Mode=OneWay}"
-                            Glyph="&#xE72E;"
                                   FontSize="12"
-                            Margin="0,0,8,0"/>
+                                  Glyph="&#xE72E;"
+                                  Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsReadOnlyActive, Mode=OneWay}" />
 
                     </StackPanel>
                 </Grid>
             </DataTemplate>
 
             <local:PaletteItemTemplateSelector x:Key="PaletteItemTemplateSelector"
-                                               TabItemTemplate="{StaticResource TabItemTemplate}"
                                                GeneralItemTemplate="{StaticResource GeneralItemTemplate}"
-                                               NestedItemTemplate="{StaticResource NestedItemTemplate}"/>
+                                               NestedItemTemplate="{StaticResource NestedItemTemplate}"
+                                               TabItemTemplate="{StaticResource TabItemTemplate}" />
 
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Dark">
-                    <Style x:Key="CommandPaletteBackground" TargetType="Grid">
+                    <Style x:Key="CommandPaletteBackground"
+                           TargetType="Grid">
                         <Setter Property="Background" Value="#333333" />
                     </Style>
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#B5B5B5"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#404040"/>
+                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextControlForeground"
+                                     Color="#B5B5B5" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#B5B5B5" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="#FFFFFF"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border">
+                    <Style x:Key="KeyChordBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
 
                     <!--  ParsedCommandLineText styles  -->
-                    <Style x:Key="ParsedCommandLineBorderStyle" TargetType="Border">
+                    <Style x:Key="ParsedCommandLineBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="ParsedCommandLineTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="ParsedCommandLineTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
-                    <Style x:Key="CommandPaletteBackground" TargetType="Grid">
+                    <Style x:Key="CommandPaletteBackground"
+                           TargetType="Grid">
                         <Setter Property="Background" Value="#CCCCCC" />
                     </Style>
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#636363"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#636363"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#636363" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#636363"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border">
+                    <Style x:Key="KeyChordBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
 
                     <!--  ParsedCommandLineText styles  -->
-                    <Style x:Key="ParsedCommandLineBorderStyle" TargetType="Border">
+                    <Style x:Key="ParsedCommandLineBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="ParsedCommandLineTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="ParsedCommandLineTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
-                    <Style x:Key="CommandPaletteBackground" TargetType="Grid">
+                    <Style x:Key="CommandPaletteBackground"
+                           TargetType="Grid">
                         <Setter Property="Background" Value="{ThemeResource SystemColorWindowColor}" />
                     </Style>
 
                     <!--  KeyChordText styles (use XAML defaults for High Contrast theme)  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border"/>
+                    <Style x:Key="KeyChordBorderStyle"
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock"/>
+                           TargetType="Border" />
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock" />
 
                     <!--  ParsedCommandLineText styles (use XAML defaults for High Contrast theme)  -->
-                    <Style x:Key="ParsedCommandLineBorderStyle" TargetType="Border"/>
+                    <Style x:Key="ParsedCommandLineBorderStyle"
-                    <Style x:Key="ParsedCommandLineTextBlockStyle" TargetType="TextBlock"/>
+                           TargetType="Border" />
+                    <Style x:Key="ParsedCommandLineTextBlockStyle"
+                           TargetType="TextBlock" />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
@@ -351,36 +381,35 @@ the MIT License. See LICENSE in the project root for license information. -->
             <RowDefinition Height="2*" />
         </Grid.RowDefinitions>
 
-        <!-- Setting the row/col span of this shadow backdrop is a bit of a hack. In
+        <!--
+            Setting the row/col span of this shadow backdrop is a bit of a hack. In
             order to receive pointer events, an element needs to be _not_ transparent.
             However, we want to be able to eat all the clicks outside the immediate
             bounds of the command palette, and we don't want a semi-transparent overlay
             over all of the UI. Fortunately, if we make this _shadowBackdrop the size of
             the entire page, then it can be mostly transparent, and cause the root grid
-        to receive clicks _anywhere_ in its bounds. -->
+            to receive clicks _anywhere_ in its bounds.
+        -->
 
-        <Grid
+        <Grid x:Name="_shadowBackdrop"
-            x:Name="_shadowBackdrop"
-            Background="Transparent"
-            Grid.Column="0"
               Grid.Row="0"
-            Grid.ColumnSpan="3"
               Grid.RowSpan="2"
+              Grid.Column="0"
+              Grid.ColumnSpan="3"
               HorizontalAlignment="Stretch"
-            VerticalAlignment="Stretch">
+              VerticalAlignment="Stretch"
-        </Grid>
+              Background="Transparent" />
 
-        <Grid
+        <Grid x:Name="_backdrop"
-            x:Name="_backdrop"
+              Grid.Row="0"
-            Style="{ThemeResource CommandPaletteBackground}"
+              Grid.Column="1"
+              Margin="8"
+              HorizontalAlignment="Stretch"
+              VerticalAlignment="Top"
+              Windows10version1903:Shadow="{StaticResource CommandPaletteShadow}"
               CornerRadius="{ThemeResource ControlCornerRadius}"
               PointerPressed="_backdropPointerPressed"
-            Margin="8"
+              Style="{ThemeResource CommandPaletteBackground}">
-            Grid.Column="1"
-            Grid.Row="0"
-            Windows10version1903:Shadow="{StaticResource CommandPaletteShadow}"
-            HorizontalAlignment="Stretch"
-            VerticalAlignment="Top">
 
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
@@ -388,100 +417,81 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
-            <TextBox
+            <TextBox x:Name="_searchBox"
                      Grid.Row="0"
-                x:Name="_searchBox"
                      Margin="8"
                      Padding="18,8,8,8"
                      IsSpellCheckEnabled="False"
-                TextChanged="_filterTextChanged"
                      PlaceholderText="{x:Bind SearchBoxPlaceholderText, Mode=OneWay}"
-                Text="">
+                     Text=""
-            </TextBox>
+                     TextChanged="_filterTextChanged" />
 
-            <TextBlock
+            <TextBlock x:Name="_prefixCharacter"
                        Grid.Row="0"
-                x:Name="_prefixCharacter"
                        Margin="16,16,0,-8"
-                FontSize="14"
                        HorizontalAlignment="Left"
-                Visibility="{x:Bind PrefixCharacter,
+                       FontSize="14"
-                             Mode=OneWay,
-                             Converter={StaticResource ParentCommandVisibilityConverter}}"
                        Text="{x:Bind PrefixCharacter, Mode=OneWay}"
-                >
+                       Visibility="{x:Bind PrefixCharacter, Mode=OneWay, Converter={StaticResource ParentCommandVisibilityConverter}}" />
-            </TextBlock>
 
-            <StackPanel Orientation="Horizontal"
+            <StackPanel Grid.Row="1"
                         Padding="16,0,16,4"
-                    Grid.Row="1"
+                        Orientation="Horizontal"
-                    Visibility="{x:Bind ParentCommandName,
+                        Visibility="{x:Bind ParentCommandName, Mode=OneWay, Converter={StaticResource ParentCommandVisibilityConverter}}">
-                                 Mode=OneWay,
-                                 Converter={StaticResource ParentCommandVisibilityConverter}}">
 
-                <Button
+                <Button x:Name="_parentCommandBackButton"
-                    Background="Transparent"
-                    x:Name="_parentCommandBackButton"
                         x:Uid="ParentCommandBackButton"
+                        VerticalAlignment="Center"
+                        Background="Transparent"
                         Click="_moveBackButtonClicked"
-                    ClickMode="Press"
+                        ClickMode="Press">
-                    VerticalAlignment="Center">
+                    <FontIcon FontFamily="Segoe MDL2 Assets"
-                    <FontIcon
                               FontSize="12"
-                        FontFamily="Segoe MDL2 Assets"
+                              Glyph="&#xE76b;" />
-                        Glyph="&#xE76b;">
-                    </FontIcon>
                 </Button>
 
-                <TextBlock
+                <TextBlock x:Name="_parentCommandText"
-                    Padding="16, 0, 16, 4"
-                    x:Name="_parentCommandText"
-                    FontStyle="Italic"
                            Grid.Row="1"
-                    Text="{x:Bind ParentCommandName, Mode=OneWay}"
+                           Padding="16,0,16,4"
-                    VerticalAlignment="Center">
+                           VerticalAlignment="Center"
-                </TextBlock>
+                           FontStyle="Italic"
+                           Text="{x:Bind ParentCommandName, Mode=OneWay}" />
             </StackPanel>
 
-            <TextBlock
+            <TextBlock x:Name="_noMatchesText"
+                       Grid.Row="1"
                        Padding="16"
-                x:Name="_noMatchesText"
                        FontStyle="Italic"
-                Visibility="Collapsed"
+                       Text="{x:Bind NoMatchesText, Mode=OneWay}"
-                Grid.Row="1"
+                       Visibility="Collapsed" />
-                Text="{x:Bind NoMatchesText, Mode=OneWay}">
-            </TextBlock>
 
-            <Border
+            <Border Grid.Row="1"
-                Grid.Row="1"
-                Visibility="{x:Bind ParsedCommandLineText, Mode=OneWay, Converter={StaticResource ParsedCommandLineTextVisibilityConverter}}"
-                Style="{ThemeResource ParsedCommandLineBorderStyle}"
                     Padding="16"
                     HorizontalAlignment="Stretch"
-                VerticalAlignment="Center">
+                    VerticalAlignment="Center"
+                    Style="{ThemeResource ParsedCommandLineBorderStyle}"
+                    Visibility="{x:Bind ParsedCommandLineText, Mode=OneWay, Converter={StaticResource ParsedCommandLineTextVisibilityConverter}}">
 
-                <ScrollViewer MaxHeight="200" VerticalScrollBarVisibility="Auto">
+                <ScrollViewer MaxHeight="200"
-                    <TextBlock
+                              VerticalScrollBarVisibility="Auto">
-                        FontStyle="Italic"
+                    <TextBlock FontStyle="Italic"
-                        TextWrapping="Wrap"
+                               Text="{x:Bind ParsedCommandLineText, Mode=OneWay}"
-                        Text="{x:Bind ParsedCommandLineText, Mode=OneWay}"/>
+                               TextWrapping="Wrap" />
                 </ScrollViewer>
             </Border>
 
-            <ListView
+            <ListView x:Name="_filteredActionsView"
                       Grid.Row="2"
-                x:Name="_filteredActionsView"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
-                SelectionMode="Single"
-                CanReorderItems="False"
                       AllowDrop="False"
-                IsItemClickEnabled="True"
+                      CanReorderItems="False"
-                ItemClick="_listItemClicked"
                       ChoosingItemContainer="_choosingItemContainer"
                       ContainerContentChanging="_containerContentChanging"
-                ItemsSource="{x:Bind FilteredActions}">
+                      IsItemClickEnabled="True"
-            </ListView>
+                      ItemClick="_listItemClicked"
+                      ItemsSource="{x:Bind FilteredActions}"
+                      SelectionMode="Single" />
 
         </Grid>
 

src/cascadia/TerminalApp/HighlightedTextControl.xaml

@@ -1,13 +1,11 @@
-<UserControl
+<UserControl x:Class="TerminalApp.HighlightedTextControl"
-    x:Class="TerminalApp.HighlightedTextControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:TerminalApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+             Background="Transparent"
-    Background="Transparent">
+             mc:Ignorable="d">
 
-    <TextBlock
+    <TextBlock x:Name="_textView" />
-        x:Name="_textView"/>
 </UserControl>

src/cascadia/TerminalApp/MinMaxCloseControl.xaml

@@ -1,73 +1,114 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<StackPanel
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.MinMaxCloseControl"
+-->
+<StackPanel x:Class="TerminalApp.MinMaxCloseControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             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"
-    mc:Ignorable="d"
-    Background="Transparent"
             HorizontalAlignment="Left"
             VerticalAlignment="Top"
-    Orientation="Horizontal"
             d:DesignHeight="36"
-    d:DesignWidth="400">
+            d:DesignWidth="400"
+            Background="Transparent"
+            Orientation="Horizontal"
+            mc:Ignorable="d">
 
     <StackPanel.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Light">
                     <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
-                    <StaticResource x:Key="CaptionButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundBaseLowBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                    <StaticResource x:Key="CaptionButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush"/>
+                                    ResourceKey="SystemControlBackgroundBaseLowBrush" />
-                    <StaticResource x:Key="CaptionButtonStroke" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                    <StaticResource x:Key="CaptionButtonStrokeColor" ResourceKey="SystemBaseHighColor"/>
+                                    ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
-                    <StaticResource x:Key="CaptionButtonStrokePointerOver" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonStroke"
-                    <StaticResource x:Key="CaptionButtonStrokePressed" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
-                    <SolidColorBrush x:Key="CaptionButtonBackground" Color="Transparent" />
+                    <StaticResource x:Key="CaptionButtonStrokeColor"
+                                    ResourceKey="SystemBaseHighColor" />
+                    <StaticResource x:Key="CaptionButtonStrokePointerOver"
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
+                    <StaticResource x:Key="CaptionButtonStrokePressed"
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
+                    <SolidColorBrush x:Key="CaptionButtonBackground"
+                                     Color="Transparent" />
                     <Color x:Key="CaptionButtonBackgroundColor">Transparent</Color>
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver" Color="#e81123"/>
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver" Color="White"/>
+                                     Color="#e81123" />
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed" Color="#f1707a"/>
+                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver"
-                    <SolidColorBrush x:Key="CloseButtonStrokePressed" Color="Black"/>
+                                     Color="White" />
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed"
+                                     Color="#f1707a" />
+                    <SolidColorBrush x:Key="CloseButtonStrokePressed"
+                                     Color="Black" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Dark">
                     <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
-                    <StaticResource x:Key="CaptionButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundBaseLowBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                    <StaticResource x:Key="CaptionButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush"/>
+                                    ResourceKey="SystemControlBackgroundBaseLowBrush" />
-                    <StaticResource x:Key="CaptionButtonStroke" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                    <StaticResource x:Key="CaptionButtonStrokeColor" ResourceKey="SystemBaseHighColor"/>
+                                    ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
-                    <StaticResource x:Key="CaptionButtonStrokePointerOver" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                    <StaticResource x:Key="CaptionButtonStroke"
-                    <StaticResource x:Key="CaptionButtonStrokePressed" ResourceKey="SystemControlForegroundBaseHighBrush"/>
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
-                    <SolidColorBrush x:Key="CaptionButtonBackground" Color="Transparent" />
+                    <StaticResource x:Key="CaptionButtonStrokeColor"
+                                    ResourceKey="SystemBaseHighColor" />
+                    <StaticResource x:Key="CaptionButtonStrokePointerOver"
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
+                    <StaticResource x:Key="CaptionButtonStrokePressed"
+                                    ResourceKey="SystemControlForegroundBaseHighBrush" />
+                    <SolidColorBrush x:Key="CaptionButtonBackground"
+                                     Color="Transparent" />
                     <Color x:Key="CaptionButtonBackgroundColor">Transparent</Color>
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver" Color="#e81123"/>
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver" Color="White"/>
+                                     Color="#e81123" />
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed" Color="#f1707a"/>
+                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver"
-                    <SolidColorBrush x:Key="CloseButtonStrokePressed" Color="Black"/>
+                                     Color="White" />
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed"
+                                     Color="#f1707a" />
+                    <SolidColorBrush x:Key="CloseButtonStrokePressed"
+                                     Color="Black" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <x:Double x:Key="CaptionButtonStrokeWidth">3.0</x:Double>
-                    <SolidColorBrush x:Key="CaptionButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                    <SolidColorBrush x:Key="CaptionButtonBackground"
-                    <StaticResource x:Key="CaptionButtonBackgroundColor" ResourceKey="SystemColorButtonFaceColor"/>
+                                     Color="{ThemeResource SystemColorButtonFaceColor}" />
-                    <SolidColorBrush x:Key="CaptionButtonBackgroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                    <StaticResource x:Key="CaptionButtonBackgroundColor"
-                    <SolidColorBrush x:Key="CaptionButtonBackgroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                    ResourceKey="SystemColorButtonFaceColor" />
-                    <SolidColorBrush x:Key="CaptionButtonStroke" Color="{ThemeResource SystemColorButtonTextColor}"/>
+                    <SolidColorBrush x:Key="CaptionButtonBackgroundPointerOver"
-                    <StaticResource x:Key="CaptionButtonStrokeColor" ResourceKey="SystemColorButtonTextColor"/>
+                                     Color="{ThemeResource SystemColorHighlightColor}" />
-                    <SolidColorBrush x:Key="CaptionButtonStrokePointerOver" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                    <SolidColorBrush x:Key="CaptionButtonBackgroundPressed"
-                    <SolidColorBrush x:Key="CaptionButtonStrokePressed" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                     Color="{ThemeResource SystemColorHighlightColor}" />
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                    <SolidColorBrush x:Key="CaptionButtonStroke"
-                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                     Color="{ThemeResource SystemColorButtonTextColor}" />
-                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                    <StaticResource x:Key="CaptionButtonStrokeColor"
-                    <SolidColorBrush x:Key="CloseButtonStrokePressed" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                    ResourceKey="SystemColorButtonTextColor" />
+                    <SolidColorBrush x:Key="CaptionButtonStrokePointerOver"
+                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
+                    <SolidColorBrush x:Key="CaptionButtonStrokePressed"
+                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver"
+                                     Color="{ThemeResource SystemColorHighlightColor}" />
+                    <SolidColorBrush x:Key="CloseButtonStrokePointerOver"
+                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
+                    <SolidColorBrush x:Key="CloseButtonBackgroundPressed"
+                                     Color="{ThemeResource SystemColorHighlightColor}" />
+                    <SolidColorBrush x:Key="CloseButtonStrokePressed"
+                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
-            <x:String x:Key="CaptionButtonPath"></x:String>
+            <!--
-            <x:String x:Key="CaptionButtonPathWindowMaximized"></x:String>
+                These strings need to be initialized to something, so they're
+                just initialized to the path for the close button. Each specific
+                button should override them as needed.
+            -->
+            <x:String x:Key="CaptionButtonPath">M 0 0 L 10 10 M 10 0 L 0 10</x:String>
+            <x:String x:Key="CaptionButtonPathWindowMaximized">M 0 0 L 10 10 M 10 0 L 0 10</x:String>
 
-            <!-- "CaptionButtonHeightWindowed" and
+            <!--
+                "CaptionButtonHeightWindowed" and
                 "CaptionButtonHeightMaximized" define the size we should use
                 for the caption buttons height for the windowed and maximized
                 states, respectively.
@@ -75,11 +116,13 @@ the MIT License. See LICENSE in the project root for license information. -->
                 32 was chosen for the Maximized height to match the height of
                 the TabRowControl. This way, when the window is maximized, the
                 tabs will be flush with the top of the window. See GH#2541 for
-                 details.-->
+                details.
+            -->
             <x:Double x:Key="CaptionButtonHeightWindowed">36.0</x:Double>
             <x:Double x:Key="CaptionButtonHeightMaximized">32.0</x:Double>
 
-            <Style x:Key="CaptionButton" TargetType="Button">
+            <Style x:Key="CaptionButton"
+                   TargetType="Button">
                 <Setter Property="BorderThickness" Value="0" />
                 <Setter Property="Background" Value="{ThemeResource CaptionButtonBackground}" />
                 <Setter Property="IsTabStop" Value="False" />
@@ -88,21 +131,38 @@ the MIT License. See LICENSE in the project root for license information. -->
                         <ControlTemplate TargetType="Button">
 
                             <Border x:Name="ButtonBaseElement"
+                                    Padding="{TemplateBinding Padding}"
+                                    AutomationProperties.AccessibilityView="Raw"
                                     Background="{TemplateBinding Background}"
                                     BackgroundSizing="{TemplateBinding BackgroundSizing}"
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
+                                    CornerRadius="{TemplateBinding CornerRadius}">
-                                Padding="{TemplateBinding Padding}"
+                                <Path x:Name="Path"
-                                AutomationProperties.AccessibilityView="Raw">
+                                      Width="10"
+                                      Height="10"
+                                      Data="{ThemeResource CaptionButtonPath}"
+                                      Stretch="Fill"
+                                      Stroke="{ThemeResource CaptionButtonStroke}"
+                                      StrokeEndLineCap="Square"
+                                      StrokeStartLineCap="Square"
+                                      StrokeThickness="{ThemeResource CaptionButtonStrokeWidth}"
+                                      UseLayoutRounding="True" />
 
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
                                         <VisualStateGroup.Transitions>
-                                            <VisualTransition From="PointerOver" To="Normal">
+                                            <VisualTransition From="PointerOver"
+                                                              To="Normal">
                                                 <Storyboard>
-                                                    <ColorAnimation Storyboard.TargetName="ButtonBaseElement" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)" To="{ThemeResource CaptionButtonBackgroundColor}" Duration="0:0:0.2"/>
+                                                    <ColorAnimation Storyboard.TargetName="ButtonBaseElement"
-                                                    <ColorAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(UIElement.Stroke).(SolidColorBrush.Color)" To="{ThemeResource CaptionButtonStrokeColor}" Duration="0:0:0.1"/>
+                                                                    Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"
+                                                                    To="{ThemeResource CaptionButtonBackgroundColor}"
+                                                                    Duration="0:0:0.2" />
+                                                    <ColorAnimation Storyboard.TargetName="Path"
+                                                                    Storyboard.TargetProperty="(UIElement.Stroke).(SolidColorBrush.Color)"
+                                                                    To="{ThemeResource CaptionButtonStrokeColor}"
+                                                                    Duration="0:0:0.1" />
                                                 </Storyboard>
                                             </VisualTransition>
                                         </VisualStateGroup.Transitions>
@@ -142,18 +202,6 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     </VisualStateGroup>
 
                                 </VisualStateManager.VisualStateGroups>
-
-                                <Path
-                                    x:Name="Path"
-                                    StrokeThickness="{ThemeResource CaptionButtonStrokeWidth}"
-                                    Stroke="{ThemeResource CaptionButtonStroke}"
-                                    Data="{ThemeResource CaptionButtonPath}"
-                                    Stretch="Fill"
-                                    UseLayoutRounding="True"
-                                    Width="10"
-                                    Height="10"
-                                    StrokeEndLineCap="Square"
-                                    StrokeStartLineCap="Square" />
                             </Border>
 
                         </ControlTemplate>
@@ -164,24 +212,28 @@ the MIT License. See LICENSE in the project root for license information. -->
         </ResourceDictionary>
     </StackPanel.Resources>
 
-    <Button Height="{StaticResource CaptionButtonHeightWindowed}" MinWidth="46.0" Width="46.0"
+    <Button x:Name="MinimizeButton"
-            x:Name="MinimizeButton"
             x:Uid="WindowMinimizeButton"
-            Style="{StaticResource CaptionButton}"
+            Width="46.0"
+            Height="{StaticResource CaptionButtonHeightWindowed}"
+            MinWidth="46.0"
+            AutomationProperties.AccessibilityView="Raw"
             Click="_MinimizeClick"
-            AutomationProperties.AccessibilityView="Raw">
+            Style="{StaticResource CaptionButton}">
         <Button.Resources>
             <ResourceDictionary>
                 <x:String x:Key="CaptionButtonPath">M 0 0 H 10</x:String>
             </ResourceDictionary>
         </Button.Resources>
     </Button>
-    <Button Height="{StaticResource CaptionButtonHeightWindowed}" MinWidth="46.0" Width="46.0"
+    <Button x:Name="MaximizeButton"
-            x:Name="MaximizeButton"
             x:Uid="WindowMaximizeButton"
-            Style="{StaticResource CaptionButton}"
+            Width="46.0"
+            Height="{StaticResource CaptionButtonHeightWindowed}"
+            MinWidth="46.0"
+            AutomationProperties.AccessibilityView="Raw"
             Click="_MaximizeClick"
-            AutomationProperties.AccessibilityView="Raw">
+            Style="{StaticResource CaptionButton}">
         <Button.Resources>
             <ResourceDictionary>
                 <x:String x:Key="CaptionButtonPath">M 0 0 H 10 V 10 H 0 V 0</x:String>
@@ -196,32 +248,46 @@ the MIT License. See LICENSE in the project root for license information. -->
             </ToolTip>
         </ToolTipService.ToolTip>
     </Button>
-    <Button Height="{StaticResource CaptionButtonHeightWindowed}" MinWidth="46.0" Width="46.0"
+    <Button x:Name="CloseButton"
-            x:Name="CloseButton"
             x:Uid="WindowCloseButton"
-            Style="{StaticResource CaptionButton}"
+            Width="46.0"
+            Height="{StaticResource CaptionButtonHeightWindowed}"
+            MinWidth="46.0"
+            AutomationProperties.AccessibilityView="Raw"
             Click="_CloseClick"
-            AutomationProperties.AccessibilityView="Raw">
+            Style="{StaticResource CaptionButton}">
         <Button.Resources>
             <ResourceDictionary>
                 <ResourceDictionary.ThemeDictionaries>
                     <ResourceDictionary x:Key="Light">
-                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                        <StaticResource x:Key="CaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
+                                        ResourceKey="CloseButtonBackgroundPointerOver" />
-                        <StaticResource x:Key="CaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                        <StaticResource x:Key="CaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
+                                        ResourceKey="CloseButtonBackgroundPressed" />
+                        <StaticResource x:Key="CaptionButtonStrokePointerOver"
+                                        ResourceKey="CloseButtonStrokePointerOver" />
+                        <StaticResource x:Key="CaptionButtonStrokePressed"
+                                        ResourceKey="CloseButtonStrokePressed" />
                     </ResourceDictionary>
                     <ResourceDictionary x:Key="Dark">
-                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                        <StaticResource x:Key="CaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
+                                        ResourceKey="CloseButtonBackgroundPointerOver" />
-                        <StaticResource x:Key="CaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                        <StaticResource x:Key="CaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
+                                        ResourceKey="CloseButtonBackgroundPressed" />
+                        <StaticResource x:Key="CaptionButtonStrokePointerOver"
+                                        ResourceKey="CloseButtonStrokePointerOver" />
+                        <StaticResource x:Key="CaptionButtonStrokePressed"
+                                        ResourceKey="CloseButtonStrokePressed" />
                     </ResourceDictionary>
                     <ResourceDictionary x:Key="HighContrast">
-                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                        <StaticResource x:Key="CaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
+                                        ResourceKey="CloseButtonBackgroundPointerOver" />
-                        <StaticResource x:Key="CaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
+                        <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                        <StaticResource x:Key="CaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
+                                        ResourceKey="CloseButtonBackgroundPressed" />
+                        <StaticResource x:Key="CaptionButtonStrokePointerOver"
+                                        ResourceKey="CloseButtonStrokePointerOver" />
+                        <StaticResource x:Key="CaptionButtonStrokePressed"
+                                        ResourceKey="CloseButtonStrokePressed" />
                     </ResourceDictionary>
                 </ResourceDictionary.ThemeDictionaries>
 

src/cascadia/TerminalApp/TabHeaderControl.xaml

@@ -1,16 +1,17 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+    the MIT License. See LICENSE in the project root for license information.
+-->
 
-<UserControl
+<UserControl x:Class="TerminalApp.TabHeaderControl"
-    x:Class="TerminalApp.TabHeaderControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
-    xmlns:mux="using:Microsoft.UI.Xaml.Controls"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:TerminalApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+             xmlns:mux="using:Microsoft.UI.Xaml.Controls"
-    MinHeight="16">
+             MinHeight="16"
+             mc:Ignorable="d">
 
     <UserControl.Resources>
         <ResourceDictionary>
@@ -31,48 +32,50 @@ the MIT License. See LICENSE in the project root for license information. -->
     <StackPanel x:Name="HeaderStackPanel"
                 Orientation="Horizontal">
         <mux:ProgressRing x:Name="HeaderProgressRing"
-                          IsActive="{x:Bind TabStatus.IsProgressRingActive, Mode=OneWay}"
-                          Visibility="{x:Bind TabStatus.IsProgressRingActive, Mode=OneWay}"
-                          IsIndeterminate="{x:Bind TabStatus.IsProgressRingIndeterminate, Mode=OneWay}"
-                          Value="{x:Bind TabStatus.ProgressValue, Mode=OneWay}"
-                          MinHeight="0"
-                          MinWidth="0"
-                          Height="15"
                           Width="15"
-                          Margin="-7.5,0,8,0"/>
+                          Height="15"
-        <!--We want the progress ring to 'replace' the tab icon, but we don't have control
+                          MinWidth="0"
-        over the tab icon here (the tab view item does) - so we hide the tab icon there
-        and use a negative margin for the progress ring here to put it where the icon would be-->
-        <FontIcon x:Name="HeaderBellIndicator"
-                  FontFamily="Segoe MDL2 Assets"
-                  Visibility="{x:Bind TabStatus.BellIndicator, Mode=OneWay}"
-                  Glyph="&#xEA8F;"
-                  FontSize="12"
-                  Margin="0,0,8,0"/>
-        <FontIcon x:Name="HeaderZoomIcon"
-                  FontFamily="Segoe MDL2 Assets"
-                  Visibility="{x:Bind TabStatus.IsPaneZoomed, Mode=OneWay}"
-                  Glyph="&#xE8A3;"
-                  FontSize="12"
-                  Margin="0,0,8,0"/>
-        <FontIcon x:Name="HeaderLockIcon"
-                  FontFamily="Segoe MDL2 Assets"
-                  Visibility="{x:Bind TabStatus.IsReadOnlyActive, Mode=OneWay}"
-                  Glyph="&#xE72E;"
-                  FontSize="12"
-                  Margin="0,0,8,0"/>
-        <TextBlock x:Name="HeaderTextBlock"
-                   Visibility="Visible"
-                   Text="{x:Bind Title, Mode=OneWay}"/>
-        <TextBox x:Name="HeaderRenamerTextBox"
-                 Visibility="Collapsed"
                           MinHeight="0"
-                 Padding="4,0,4,0"
+                          Margin="-7.5,0,8,0"
-                 MaxLength="1024"
+                          IsActive="{x:Bind TabStatus.IsProgressRingActive, Mode=OneWay}"
-                 LostFocus="RenameBoxLostFocusHandler"
+                          IsIndeterminate="{x:Bind TabStatus.IsProgressRingIndeterminate, Mode=OneWay}"
+                          Visibility="{x:Bind TabStatus.IsProgressRingActive, Mode=OneWay}"
+                          Value="{x:Bind TabStatus.ProgressValue, Mode=OneWay}" />
+        <!--
+            We want the progress ring to 'replace' the tab icon, but we don't have control
+            over the tab icon here (the tab view item does) - so we hide the tab icon there
+            and use a negative margin for the progress ring here to put it where the icon would be
+        -->
+        <FontIcon x:Name="HeaderBellIndicator"
+                  Margin="0,0,8,0"
+                  FontFamily="Segoe MDL2 Assets"
+                  FontSize="12"
+                  Glyph="&#xEA8F;"
+                  Visibility="{x:Bind TabStatus.BellIndicator, Mode=OneWay}" />
+        <FontIcon x:Name="HeaderZoomIcon"
+                  Margin="0,0,8,0"
+                  FontFamily="Segoe MDL2 Assets"
+                  FontSize="12"
+                  Glyph="&#xE8A3;"
+                  Visibility="{x:Bind TabStatus.IsPaneZoomed, Mode=OneWay}" />
+        <FontIcon x:Name="HeaderLockIcon"
+                  Margin="0,0,8,0"
+                  FontFamily="Segoe MDL2 Assets"
+                  FontSize="12"
+                  Glyph="&#xE72E;"
+                  Visibility="{x:Bind TabStatus.IsReadOnlyActive, Mode=OneWay}" />
+        <TextBlock x:Name="HeaderTextBlock"
+                   Text="{x:Bind Title, Mode=OneWay}"
+                   Visibility="Visible" />
+        <TextBox x:Name="HeaderRenamerTextBox"
                  Height="16"
+                 MinHeight="0"
+                 MaxWidth="{x:Bind RenamerMaxWidth, Mode=OneWay}"
+                 Padding="4,0,4,0"
                  FontSize="12"
                  IsSpellCheckEnabled="False"
-                 MaxWidth="{x:Bind RenamerMaxWidth, Mode=OneWay}"/>
+                 LostFocus="RenameBoxLostFocusHandler"
+                 MaxLength="1024"
+                 Visibility="Collapsed" />
     </StackPanel>
 </UserControl>

src/cascadia/TerminalApp/TabRowControl.xaml

@@ -1,39 +1,39 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<ContentPresenter
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.TabRowControl"
+-->
+<ContentPresenter x:Class="TerminalApp.TabRowControl"
                   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
-    xmlns:mux="using:Microsoft.UI.Xaml.Controls"
                   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                  xmlns:local="using:TerminalApp"
                   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                  xmlns:mux="using:Microsoft.UI.Xaml.Controls"
                   mc:Ignorable="d">
 
     <mux:TabView x:Name="TabView"
                  VerticalAlignment="Bottom"
                  HorizontalContentAlignment="Stretch"
-                 IsAddTabButtonVisible="false"
+                 AllowDropTabs="True"
-                 TabWidthMode="Equal"
-                 CanReorderTabs="True"
                  CanDragTabs="True"
-                 AllowDropTabs="True">
+                 CanReorderTabs="True"
+                 IsAddTabButtonVisible="false"
+                 TabWidthMode="Equal">
 
         <mux:TabView.TabStripFooter>
-            <mux:SplitButton
+            <mux:SplitButton x:Name="NewTabButton"
-                x:Name="NewTabButton"
                              x:Uid="NewTabSplitButton"
-                Click="OnNewTabButtonClick"
-                VerticalAlignment="Stretch"
                              HorizontalAlignment="Left"
-                Content="&#xE710;"
+                             VerticalAlignment="Stretch"
-                UseLayoutRounding="true"
+                             AutomationProperties.AccessibilityView="Control"
-                FontFamily="Segoe MDL2 Assets"
-                FontWeight="SemiLight"
-                FontSize="12"
                              BorderThickness="0"
+                             Click="OnNewTabButtonClick"
+                             Content="&#xE710;"
                              CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}"
-                AutomationProperties.AccessibilityView="Control">
+                             FontFamily="Segoe MDL2 Assets"
+                             FontSize="12"
+                             FontWeight="SemiLight"
+                             UseLayoutRounding="true">
                 <ToolTipService.ToolTip>
                     <ToolTip Placement="Mouse">
                         <TextBlock IsTextSelectionEnabled="False">
@@ -51,28 +51,46 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <ResourceDictionary>
                         <ResourceDictionary.ThemeDictionaries>
                             <ResourceDictionary x:Key="Light">
-                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewButtonBackground" />
+                                <StaticResource x:Key="SplitButtonBackground"
-                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="TabViewButtonForeground" />
+                                                ResourceKey="TabViewButtonBackground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForeground"
-                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                                ResourceKey="TabViewButtonForeground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonBackgroundPressed"
-                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="TabViewItemHeaderForegroundPointerOver" />
+                                                ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForegroundPressed"
+                                                ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                <StaticResource x:Key="SplitButtonBackgroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonForegroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderForegroundPointerOver" />
                             </ResourceDictionary>
                             <ResourceDictionary x:Key="Dark">
-                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewButtonBackground" />
+                                <StaticResource x:Key="SplitButtonBackground"
-                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="TabViewButtonForeground" />
+                                                ResourceKey="TabViewButtonBackground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForeground"
-                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                                ResourceKey="TabViewButtonForeground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonBackgroundPressed"
-                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="TabViewItemHeaderForegroundPointerOver" />
+                                                ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForegroundPressed"
+                                                ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                <StaticResource x:Key="SplitButtonBackgroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonForegroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderForegroundPointerOver" />
                             </ResourceDictionary>
                             <ResourceDictionary x:Key="HighContrast">
-                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewButtonBackground" />
+                                <StaticResource x:Key="SplitButtonBackground"
-                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="TabViewButtonForeground" />
+                                                ResourceKey="TabViewButtonBackground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForeground"
-                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                                ResourceKey="TabViewButtonForeground" />
-                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonBackgroundPressed"
-                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="TabViewItemHeaderForegroundPointerOver" />
+                                                ResourceKey="TabViewItemHeaderBackgroundPressed" />
+                                <StaticResource x:Key="SplitButtonForegroundPressed"
+                                                ResourceKey="TabViewItemHeaderForegroundPressed" />
+                                <StaticResource x:Key="SplitButtonBackgroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
+                                <StaticResource x:Key="SplitButtonForegroundPointerOver"
+                                                ResourceKey="TabViewItemHeaderForegroundPointerOver" />
                             </ResourceDictionary>
                         </ResourceDictionary.ThemeDictionaries>
                     </ResourceDictionary>

src/cascadia/TerminalApp/TerminalPage.xaml

@@ -1,29 +1,34 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.TerminalPage"
+-->
+<Page x:Class="TerminalApp.TerminalPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
-    xmlns:mux="using:Microsoft.UI.Xaml.Controls"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:TerminalApp"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:mux="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
 
-    <Grid x:Name="Root" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid x:Name="Root"
+          Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <local:TabRowControl x:Name="TabRow" Grid.Row="0" />
+        <local:TabRowControl x:Name="TabRow"
+                             Grid.Row="0" />
 
-        <Grid x:Name="TabContent" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
+        <Grid x:Name="TabContent"
+              Grid.Row="1"
+              HorizontalAlignment="Stretch"
+              VerticalAlignment="Stretch" />
 
-        <ContentDialog
+        <ContentDialog x:Name="AboutDialog"
-            x:Load="False"
-            x:Name="AboutDialog"
                        x:Uid="AboutDialog"
+                       x:Load="False"
                        DefaultButton="Close">
             <StackPanel Orientation="Vertical">
                 <TextBlock IsTextSelectionEnabled="True">
@@ -31,106 +36,85 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <Run x:Uid="AboutDialog_VersionLabel" />
                     <Run Text="{x:Bind ApplicationVersion}" />
                 </TextBlock>
-                <HyperlinkButton
+                <HyperlinkButton x:Uid="AboutDialog_DocumentationLink"
-                    x:Uid="AboutDialog_DocumentationLink"
                                  NavigateUri="https://go.microsoft.com/fwlink/?linkid=2125416" />
-                <HyperlinkButton
+                <HyperlinkButton x:Uid="AboutDialog_ReleaseNotesLink"
-                    x:Uid="AboutDialog_ReleaseNotesLink"
                                  NavigateUri="https://go.microsoft.com/fwlink/?linkid=2125417" />
-                <HyperlinkButton
+                <HyperlinkButton x:Uid="AboutDialog_PrivacyPolicyLink"
-                    x:Uid="AboutDialog_PrivacyPolicyLink"
                                  NavigateUri="https://go.microsoft.com/fwlink/?linkid=2125418" />
-                <HyperlinkButton
+                <HyperlinkButton x:Uid="AboutDialog_ThirdPartyNoticesLink"
-                    x:Uid="AboutDialog_ThirdPartyNoticesLink"
                                  Click="_ThirdPartyNoticesOnClick" />
             </StackPanel>
         </ContentDialog>
 
-        <ContentDialog
+        <ContentDialog x:Name="CloseAllDialog"
-            x:Load="False"
-            x:Name="CloseAllDialog"
                        x:Uid="CloseAllDialog"
-            DefaultButton="Primary">
-        </ContentDialog>
-
-        <ContentDialog
                        x:Load="False"
-            x:Name="CloseReadOnlyDialog"
+                       DefaultButton="Primary" />
+
+        <ContentDialog x:Name="CloseReadOnlyDialog"
                        x:Uid="CloseReadOnlyDialog"
-            DefaultButton="Close">
-        </ContentDialog>
-
-        <ContentDialog
                        x:Load="False"
-            x:Name="MultiLinePasteDialog"
+                       DefaultButton="Close" />
+
+        <ContentDialog x:Name="MultiLinePasteDialog"
                        x:Uid="MultiLinePasteDialog"
+                       x:Load="False"
                        DefaultButton="Primary">
             <StackPanel>
-                <TextBlock
+                <TextBlock x:Uid="MultiLineWarningText"
-                    x:Uid="MultiLineWarningText"
+                           TextWrapping="Wrap" />
-                    TextWrapping="Wrap">
+                <TextBlock x:Uid="ClipboardTextHeader"
-                </TextBlock>
+                           Margin="0,16,0,0" />
-                <TextBlock
+                <ScrollViewer x:Name="ClipboardContentScrollViewer"
-                    x:Uid="ClipboardTextHeader"
+                              MaxHeight="100"
-                    Margin="0,16,0,0">
+                              Margin="0,8,0,0">
-                </TextBlock>
+                    <TextBlock x:Name="ClipboardText"
-                <ScrollViewer
+                               FontFamily="Cascadia Mono"
-                    Margin="0,8,0,0"
+                               TextWrapping="Wrap" />
-                    x:Name="ClipboardContentScrollViewer"
-                    MaxHeight="100">
-                    <TextBlock
-                        x:Name="ClipboardText"
-                        TextWrapping="Wrap"
-                        FontFamily="Cascadia Mono">
-                    </TextBlock>
                 </ScrollViewer>
             </StackPanel>
         </ContentDialog>
 
-        <ContentDialog
+        <ContentDialog x:Name="LargePasteDialog"
-            x:Load="False"
-            x:Name="LargePasteDialog"
                        x:Uid="LargePasteDialog"
-            DefaultButton="Primary">
-        </ContentDialog>
-
-        <ContentDialog
                        x:Load="False"
-            x:Name="ControlNoticeDialog"
+                       DefaultButton="Primary" />
+
+        <ContentDialog x:Name="ControlNoticeDialog"
                        x:Uid="ControlNoticeDialog"
+                       x:Load="False"
                        DefaultButton="Primary">
-            <TextBlock IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords">
+            <TextBlock IsTextSelectionEnabled="True"
+                       TextWrapping="WrapWholeWords">
                 <Run x:Name="NoticeMessage" />
             </TextBlock>
         </ContentDialog>
 
-        <ContentDialog
+        <ContentDialog x:Name="CouldNotOpenUriDialog"
-            x:Load="False"
-            x:Name="CouldNotOpenUriDialog"
                        x:Uid="CouldNotOpenUriDialog"
+                       x:Load="False"
                        DefaultButton="Primary">
-            <TextBlock IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords">
+            <TextBlock IsTextSelectionEnabled="True"
+                       TextWrapping="WrapWholeWords">
                 <Run x:Name="CouldNotOpenUriReason" /> <LineBreak />
-                <Run
+                <Run x:Name="UnopenedUri"
-                    x:Name="UnopenedUri"
+                     FontFamily="Cascadia Mono" />
-                    FontFamily="Cascadia Mono">
-                </Run>
             </TextBlock>
         </ContentDialog>
 
-        <local:CommandPalette
+        <local:CommandPalette x:Name="CommandPalette"
-            x:Name="CommandPalette"
                               Grid.Row="1"
-            Visibility="Collapsed"
+                              VerticalAlignment="Stretch"
                               PreviewKeyDown="_KeyDownHandler"
-            VerticalAlignment="Stretch" />
+                              Visibility="Collapsed" />
 
         <mux:InfoBar x:Name="KeyboardWarningInfoBar"
                      x:Load="False"
                      IsClosable="True"
                      IsIconVisible="True"
                      IsOpen="False"
-                     Severity="Warning"
+                     Message="{x:Bind KeyboardServiceDisabledText, Mode=OneWay}"
-                     Message="{x:Bind KeyboardServiceDisabledText, Mode=OneWay}"/>
+                     Severity="Warning" />
     </Grid>
 </Page>

src/cascadia/TerminalApp/TitlebarControl.xaml

@@ -1,27 +1,30 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Grid
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="TerminalApp.TitlebarControl"
+-->
+<Grid x:Class="TerminalApp.TitlebarControl"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:TerminalApp"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:TerminalApp"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
       x:Name="Root"
       HorizontalAlignment="Stretch"
       VerticalAlignment="Top"
-    SizeChanged="Root_SizeChanged"
       d:DesignHeight="36"
+      d:DesignWidth="400"
       Background="{ThemeResource TabViewBackground}"
-    d:DesignWidth="400">
+      SizeChanged="Root_SizeChanged"
+      mc:Ignorable="d">
 
-    <!-- TODO:GH#1988
+    <!--
+        TODO:GH#1988
         This xaml should probably be a template thing, where the background is a
         resource that the app hosting this control can override. Then, it App.xaml,
         we'd make sure to set the resource for our background to the appropriate
         color. SystemControlForegroundAccentBrush also works nicely, to use the
-    accent color. (which is GH#1963)-->
+        accent color. (which is GH#1963)
+    -->
 
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
@@ -29,17 +32,16 @@ the MIT License. See LICENSE in the project root for license information. -->
         <ColumnDefinition Width="Auto" />
     </Grid.ColumnDefinitions>
 
-    <ContentPresenter x:Name="ContentRoot" Grid.Column="0" />
+    <ContentPresenter x:Name="ContentRoot"
+                      Grid.Column="0" />
 
-    <Border
+    <Border x:Name="DragBar"
-        x:Name="DragBar"
             Grid.Column="1"
             MinWidth="45.0"
             DoubleTapped="DragBar_DoubleTapped" />
 
-    <local:MinMaxCloseControl
+    <local:MinMaxCloseControl x:Name="MinMaxCloseControl"
                               Grid.Column="2"
-        x:Name="MinMaxCloseControl"
                               HorizontalAlignment="Right" />
 </Grid>
 

src/cascadia/TerminalControl/SearchBoxControl.xaml

@@ -1,28 +1,29 @@
-<UserControl
+<UserControl x:Class="Microsoft.Terminal.Control.SearchBoxControl"
-    x:Class="Microsoft.Terminal.Control.SearchBoxControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:Microsoft.Terminal.Control"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
              x:Name="Root"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Top"
              d:DesignHeight="55"
              d:DesignWidth="285"
-    TabNavigation="Cycle">
+             TabNavigation="Cycle"
+             mc:Ignorable="d">
 
     <UserControl.Resources>
         <ResourceDictionary>
-            <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
+            <Style x:Key="ToggleButtonStyle"
+                   TargetType="ToggleButton">
                 <Setter Property="Width" Value="25" />
                 <Setter Property="Height" Value="25" />
                 <Setter Property="Background" Value="Transparent" />
                 <Setter Property="Padding" Value="1" />
                 <Setter Property="CornerRadius" Value="2" />
             </Style>
-            <Style x:Key="ButtonStyle" TargetType="Button">
+            <Style x:Key="ButtonStyle"
+                   TargetType="Button">
                 <Setter Property="Width" Value="25" />
                 <Setter Property="Height" Value="25" />
                 <Setter Property="Background" Value="Transparent" />
@@ -30,120 +31,195 @@
             </Style>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Dark">
-                    <Style x:Key="FontIconStyle" TargetType="FontIcon">
+                    <Style x:Key="FontIconStyle"
+                           TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground" TargetType="StackPanel">
+                    <Style x:Key="SearchBoxBackground"
+                           TargetType="StackPanel">
                         <Setter Property="Background" Value="#333333" />
                     </Style>
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#B5B5B5"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#404040"/>
+                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextControlForeground"
+                                     Color="#B5B5B5" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#B5B5B5" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="#FFFFFF"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
 
                     <!--  ToggleButton colors !  -->
-                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="ToggleButtonForeground"
+                                     Color="#B5B5B5" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="#555555"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="#FFFFFF"/>
+                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="#555555"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="#FFFFFF"/>
+                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="#555555"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="#FFFFFF"/>
+                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed"
+                                     Color="Transparent" />
 
                     <!--  Button color !  -->
-                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#555555"/>
+                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="#FFFFFF"/>
+                                     Color="#555555" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="ButtonBorderBrushPressed"
+                                     Color="Transparent" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
-                    <Style x:Key="FontIconStyle" TargetType="FontIcon">
+                    <Style x:Key="FontIconStyle"
+                           TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground" TargetType="StackPanel">
+                    <Style x:Key="SearchBoxBackground"
+                           TargetType="StackPanel">
                         <Setter Property="Background" Value="#CCCCCC" />
                     </Style>
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#636363"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#636363"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#636363" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#636363"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
                     <!--  ToggleButton colors !  -->
-                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="#636363"/>
+                    <SolidColorBrush x:Key="ToggleButtonForeground"
+                                     Color="#636363" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="#000000"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="#B8B8B8"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundPressed"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="#000000"/>
+                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="#B8B8B8"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundChecked"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="#000000"/>
+                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundChecked"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushChecked"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="#000000"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="#B8B8B8"/>
+                    <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed"
-                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="#000000"/>
+                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPressed"
+                                     Color="Transparent" />
 
                     <!--  Button color !  -->
-                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="#000000"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
+                                     Color="Transparent" />
 
-                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#B8B8B8"/>
+                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="#000000"/>
+                                     Color="#B8B8B8" />
-                    <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="Transparent"/>
+                    <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                     Color="#000000" />
+                    <SolidColorBrush x:Key="ButtonBorderBrushPressed"
+                                     Color="Transparent" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
-                    <Style x:Key="FontIconStyle" TargetType="FontIcon">
+                    <Style x:Key="FontIconStyle"
+                           TargetType="FontIcon">
                         <Setter Property="FontSize" Value="12" />
                     </Style>
-                    <Style x:Key="SearchBoxBackground" TargetType="StackPanel">
+                    <Style x:Key="SearchBoxBackground"
+                           TargetType="StackPanel">
                         <Setter Property="Background" Value="{ThemeResource SystemColorWindowColor}" />
                     </Style>
                 </ResourceDictionary>
@@ -151,32 +227,38 @@
         </ResourceDictionary>
     </UserControl.Resources>
 
-    <StackPanel Orientation="Horizontal" Style="{ThemeResource SearchBoxBackground}" Padding="5" CornerRadius="0,0,2,2">
+    <StackPanel Padding="5"
+                CornerRadius="0,0,2,2"
+                Orientation="Horizontal"
+                Style="{ThemeResource SearchBoxBackground}">
         <TextBox x:Name="TextBox"
                  x:Uid="SearchBox_TextBox"
-                  CornerRadius="2"
                  Width="160"
-                  PlaceholderForeground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
-                  FontSize="15"
-                  KeyDown="TextBoxKeyDown"
                  Margin="5"
                  HorizontalAlignment="Left"
-                  VerticalAlignment="Center">
+                 VerticalAlignment="Center"
-        </TextBox>
+                 CornerRadius="2"
+                 FontSize="15"
+                 KeyDown="TextBoxKeyDown"
+                 PlaceholderForeground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" />
 
         <ToggleButton x:Name="GoBackwardButton"
                       x:Uid="SearchBox_SearchBackwards"
                       HorizontalAlignment="Right"
-                      Style="{StaticResource ToggleButtonStyle}"
                       Click="GoBackwardClicked"
-                      IsChecked="True">
+                      IsChecked="True"
-            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74A;" Style="{ThemeResource FontIconStyle}"/>
+                      Style="{StaticResource ToggleButtonStyle}">
+            <FontIcon FontFamily="Segoe MDL2 Assets"
+                      Glyph="&#xE74A;"
+                      Style="{ThemeResource FontIconStyle}" />
         </ToggleButton>
         <ToggleButton x:Name="GoForwardButton"
                       x:Uid="SearchBox_SearchForwards"
-                      Style="{StaticResource ToggleButtonStyle}"
+                      Click="GoForwardClicked"
-                      Click="GoForwardClicked">
+                      Style="{StaticResource ToggleButtonStyle}">
-            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74B;" Style="{ThemeResource FontIconStyle}"/>
+            <FontIcon FontFamily="Segoe MDL2 Assets"
+                      Glyph="&#xE74B;"
+                      Style="{ThemeResource FontIconStyle}" />
         </ToggleButton>
 
         <ToggleButton x:Name="CaseSensitivityButton"
@@ -190,7 +272,9 @@
                 Padding="0"
                 Click="CloseClick"
                 Style="{ThemeResource ButtonStyle}">
-            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE711;" FontSize="12"/>
+            <FontIcon FontFamily="Segoe MDL2 Assets"
+                      FontSize="12"
+                      Glyph="&#xE711;" />
         </Button>
     </StackPanel>
 </UserControl>

src/cascadia/TerminalControl/TSFInputControl.xaml

@@ -1,18 +1,17 @@
-<UserControl
+<UserControl x:Class="Microsoft.Terminal.Control.TSFInputControl"
-    x:Class="Microsoft.Terminal.Control.TSFInputControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              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"
-    mc:Ignorable="d"
              d:DesignHeight="768"
-    d:DesignWidth="1024">
+             d:DesignWidth="1024"
+             mc:Ignorable="d">
 
     <Canvas x:Name="Canvas"
             Visibility="Collapsed">
         <TextBlock x:Name="TextBlock"
                    IsTextSelectionEnabled="false"
-                   TextWrapping="Wrap"
+                   TextDecorations="Underline"
-                   TextDecorations="Underline" />
+                   TextWrapping="Wrap" />
     </Canvas>
 </UserControl>

src/cascadia/TerminalControl/TermControl.xaml

@@ -1,30 +1,31 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<UserControl
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Control.TermControl"
+-->
+<UserControl x:Class="Microsoft.Terminal.Control.TermControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:Microsoft.Terminal.Control"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              d:DesignHeight="768"
              d:DesignWidth="1024"
-    TabNavigation="Cycle"
-    IsTabStop="True"
-    AllowFocusOnInteraction="True"
              AllowDrop="True"
-    Drop="_DragDropHandler"
+             AllowFocusOnInteraction="True"
+             CharacterReceived="_CharacterHandler"
              DragOver="_DragOverHandler"
-    Tapped="_TappedHandler"
+             Drop="_DragDropHandler"
+             GotFocus="_GotFocusHandler"
+             IsTabStop="True"
+             KeyUp="_KeyUpHandler"
+             LostFocus="_LostFocusHandler"
              PointerWheelChanged="_MouseWheelHandler"
              PreviewKeyDown="_KeyDownHandler"
-    KeyUp="_KeyUpHandler"
+             TabNavigation="Cycle"
-    CharacterReceived="_CharacterHandler"
+             Tapped="_TappedHandler"
-    GotFocus="_GotFocusHandler"
+             mc:Ignorable="d">
-    LostFocus="_LostFocusHandler">
     <!--
         TODO GH#4031: We've investigated whether we should be using KeyDown or PreviewKeyDown
         but not necessarily come to a consensus. It's possible that moving input to the SwapChainPanel
@@ -41,16 +42,16 @@ the MIT License. See LICENSE in the project root for license information. -->
             </Grid.ColumnDefinitions>
 
             <Grid Grid.Column="0"
-                  Visibility="Visible"
                   Background="Transparent"
-                  PointerPressed="_PointerPressedHandler"
+                  PointerExited="_PointerExitedHandler"
                   PointerMoved="_PointerMovedHandler"
+                  PointerPressed="_PointerPressedHandler"
                   PointerReleased="_PointerReleasedHandler"
-                  PointerExited="_PointerExitedHandler">
+                  Visibility="Visible">
 
                 <SwapChainPanel x:Name="SwapChainPanel"
-                                SizeChanged="_SwapChainSizeChanged"
+                                CompositionScaleChanged="_SwapChainScaleChanged"
-                                CompositionScaleChanged="_SwapChainScaleChanged">
+                                SizeChanged="_SwapChainSizeChanged">
 
                     <Canvas x:Name="OverlayCanvas"
                             Visibility="Visible">
@@ -62,8 +63,7 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     <TextBlock IsTextSelectionEnabled="True">
                                         <Run x:Name="HoveredUri" /> <LineBreak />
                                         <Run x:Uid="HowToOpenRun"
-                                             FontStyle="Italic">
+                                             FontStyle="Italic" />
-                                        </Run>
                                     </TextBlock>
                                 </ToolTip>
                             </ToolTipService.ToolTip>
@@ -71,31 +71,33 @@ the MIT License. See LICENSE in the project root for license information. -->
                     </Canvas>
                 </SwapChainPanel>
 
-                <!-- Putting this in a grid w/ the SwapChainPanel
+                <!--
-                ensures that it's always aligned w/ the scrollbar -->
+                    Putting this in a grid w/ the SwapChainPanel
+                    ensures that it's always aligned w/ the scrollbar
+                -->
                 <local:SearchBoxControl x:Name="SearchBox"
-                                        x:Load="False"
-                                        Visibility="Collapsed"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Top"
+                                        x:Load="False"
+                                        Closed="_CloseSearchBoxControl"
                                         Search="_Search"
-                                        Closed="_CloseSearchBoxControl" />
+                                        Visibility="Collapsed" />
             </Grid>
 
-            <ScrollBar Grid.Column="1"
+            <ScrollBar x:Name="ScrollBar"
-                       x:Name="ScrollBar"
+                       Grid.Column="1"
-                       Orientation="Vertical"
-                       IndicatorMode="MouseIndicator"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Stretch"
-                       Maximum="1"
+                       IndicatorMode="MouseIndicator"
-                       ViewportSize="10"
                        IsTabStop="False"
-                       SmallChange="1"
                        LargeChange="4"
-                       ValueChanged="_ScrollbarChangeHandler"
+                       Maximum="1"
+                       Orientation="Vertical"
                        PointerPressed="_CapturePointer"
-                       PointerReleased="_ReleasePointerCapture" />
+                       PointerReleased="_ReleasePointerCapture"
+                       SmallChange="1"
+                       ValueChanged="_ScrollbarChangeHandler"
+                       ViewportSize="10" />
         </Grid>
 
         <local:TSFInputControl x:Name="TSFInputControl"
@@ -104,18 +106,22 @@ the MIT License. See LICENSE in the project root for license information. -->
                                CurrentFontInfo="_FontInfoHandler" />
 
         <Grid x:Name="RendererFailedNotice"
-              x:Load="False"
               HorizontalAlignment="Center"
-              VerticalAlignment="Center">
+              VerticalAlignment="Center"
-            <Border Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
+              x:Load="False">
-                    BorderBrush="{ThemeResource SystemAccentColor}"
+            <Border Margin="8,8,8,8"
-                    Margin="8,8,8,8"
                     Padding="8,8,8,8"
+                    Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
+                    BorderBrush="{ThemeResource SystemAccentColor}"
                     BorderThickness="2,2,2,2"
                     CornerRadius="{ThemeResource OverlayCornerRadius}">
                 <StackPanel>
-                    <TextBlock HorizontalAlignment="Center" x:Uid="TermControl_RendererFailedTextBlock" TextWrapping="WrapWholeWords"/>
+                    <TextBlock x:Uid="TermControl_RendererFailedTextBlock"
-                    <Button Click="_RenderRetryButton_Click" x:Uid="TermControl_RendererRetryButton" HorizontalAlignment="Right" />
+                               HorizontalAlignment="Center"
+                               TextWrapping="WrapWholeWords" />
+                    <Button x:Uid="TermControl_RendererRetryButton"
+                            HorizontalAlignment="Right"
+                            Click="_RenderRetryButton_Click" />
                 </StackPanel>
             </Border>
         </Grid>

src/cascadia/TerminalSettingsEditor/Actions.xaml

@@ -1,14 +1,15 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.Actions"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Actions"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
       mc:Ignorable="d">
 
     <Page.Resources>
@@ -19,7 +20,8 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <local:StringIsEmptyConverter x:Key="CommandKeyChordVisibilityConverter" />
 
-            <!-- Template for actions. This is _heavily_ copied from the command
+            <!--
+                Template for actions. This is _heavily_ copied from the command
                 palette, with modifications:
                 * We don't need to use a HighlightedTextControl, because we're
                 not filtering this list
@@ -33,15 +35,19 @@ the MIT License. See LICENSE in the project root for license information. -->
                 TerminalSettingsEditor or moved to it's own project consumed by
                 both TSE and TerminalApp.
             -->
-            <DataTemplate x:Key="GeneralItemTemplate" x:DataType="SettingsModel:Command">
+            <DataTemplate x:Key="GeneralItemTemplate"
+                          x:DataType="SettingsModel:Command">
 
-                <!-- This HorizontalContentAlignment="Stretch" is important
+                <!--
-                     to make sure it takes the entire width of the line -->
+                    This HorizontalContentAlignment="Stretch" is important
+                    to make sure it takes the entire width of the line
+                -->
                 <ListViewItem HorizontalContentAlignment="Stretch"
-                              AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
+                              AutomationProperties.AcceleratorKey="{x:Bind KeyChordText, Mode=OneWay}"
-                              AutomationProperties.AcceleratorKey="{x:Bind KeyChordText, Mode=OneWay}">
+                              AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
 
-                    <Grid HorizontalAlignment="Stretch" ColumnSpacing="8" >
+                    <Grid HorizontalAlignment="Stretch"
+                          ColumnSpacing="8">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="16" />
                             <!--  icon  -->
@@ -57,23 +63,23 @@ the MIT License. See LICENSE in the project root for license information. -->
                                    HorizontalAlignment="Left"
                                    Text="{x:Bind Name, Mode=OneWay}" />
 
-                        <!-- The block for the key chord is only visible
+                        <!--
+                            The block for the key chord is only visible
                             when there's actual text set as the label. See
                             CommandKeyChordVisibilityConverter for details.
                             Inexplicably, we don't need to set the
                             AutomationProperties to Raw here, unlike in the
-                                 CommandPalette. We're not quite sure why.-->
+                            CommandPalette. We're not quite sure why.
+                        -->
                         <Border Grid.Column="2"
-                                Visibility="{x:Bind KeyChordText,
-                                             Mode=OneWay,
-                                             Converter={StaticResource CommandKeyChordVisibilityConverter}}"
-                                Style="{ThemeResource KeyChordBorderStyle}"
                                 Padding="2,0,2,0"
                                 HorizontalAlignment="Right"
-                                VerticalAlignment="Center">
+                                VerticalAlignment="Center"
+                                Style="{ThemeResource KeyChordBorderStyle}"
+                                Visibility="{x:Bind KeyChordText, Mode=OneWay, Converter={StaticResource CommandKeyChordVisibilityConverter}}">
 
-                            <TextBlock Style="{ThemeResource KeyChordTextBlockStyle}"
+                            <TextBlock FontSize="12"
-                                       FontSize="12"
+                                       Style="{ThemeResource KeyChordTextBlockStyle}"
                                        Text="{x:Bind KeyChordText, Mode=OneWay}" />
                         </Border>
                     </Grid>
@@ -84,59 +90,88 @@ the MIT License. See LICENSE in the project root for license information. -->
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Dark">
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#B5B5B5"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#404040"/>
+                                     Color="#B5B5B5" />
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#B5B5B5"/>
+                    <SolidColorBrush x:Key="TextControlForeground"
+                                     Color="#B5B5B5" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#B5B5B5" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="#FFFFFF"/>
+                                     Color="#404040" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#333333"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="#FFFFFF"/>
+                                     Color="#333333" />
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#404040"/>
+                    <SolidColorBrush x:Key="TextControlForegroundFocused"
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                                     Color="#FFFFFF" />
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
+                                     Color="#404040" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border">
+                    <Style x:Key="KeyChordBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
 
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <!--  TextBox colors !  -->
-                    <SolidColorBrush x:Key="TextControlBackground" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackground"
-                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlBorderBrush" Color="#636363"/>
+                    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush"
-                    <SolidColorBrush x:Key="TextControlButtonForeground" Color="#636363"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlBorderBrush"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForeground"
+                                     Color="#636363" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#DADADA"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver"
-                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#636363"/>
+                                     Color="#DADADA" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushPointerOver"
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPointerOver"
+                                     Color="#FF4343" />
 
-                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#CCCCCC"/>
+                    <SolidColorBrush x:Key="TextControlBackgroundFocused"
-                    <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#636363"/>
+                                     Color="#CCCCCC" />
-                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
+                    <SolidColorBrush x:Key="TextControlBorderBrushFocused"
-                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
+                                     Color="#636363" />
+                    <SolidColorBrush x:Key="TextControlButtonForegroundPressed"
+                                     Color="#FFFFFF" />
+                    <SolidColorBrush x:Key="TextControlButtonBackgroundPressed"
+                                     Color="#FF4343" />
 
                     <!--  KeyChordText styles  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border">
+                    <Style x:Key="KeyChordBorderStyle"
+                           TargetType="Border">
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="1" />
                         <Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
                         <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock">
                         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                     </Style>
 
@@ -144,8 +179,10 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary x:Key="HighContrast">
 
                     <!--  KeyChordText styles (use XAML defaults for High Contrast theme)  -->
-                    <Style x:Key="KeyChordBorderStyle" TargetType="Border"/>
+                    <Style x:Key="KeyChordBorderStyle"
-                    <Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock"/>
+                           TargetType="Border" />
+                    <Style x:Key="KeyChordTextBlockStyle"
+                           TargetType="TextBlock" />
 
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
@@ -159,28 +196,32 @@ the MIT License. See LICENSE in the project root for license information. -->
             <TextBlock x:Uid="Globals_KeybindingsDisclaimer"
                        Style="{StaticResource DisclaimerStyle}" />
 
-            <!-- The Nav_OpenJSON resource just so happens to have a .Content
+            <!--
-            and .Tooltip that are _exactly_ what we're looking for here. -->
+                The Nav_OpenJSON resource just so happens to have a .Content
+                and .Tooltip that are _exactly_ what we're looking for here.
+            -->
 
             <HyperlinkButton x:Uid="Nav_OpenJSON"
                              Click="_OpenSettingsClick" />
 
             <!--  Keybindings  -->
 
-            <!-- NOTE: Globals_Keybindings.Header is not defined, because that
+            <!--
+                NOTE: Globals_Keybindings.Header is not defined, because that
                 would result in the page having "Keybindings" displayed twice, which
-            looks quite redundant -->
+                looks quite redundant
-            <ContentPresenter x:Uid="Globals_Keybindings" Margin="0">
+            -->
+            <ContentPresenter x:Uid="Globals_Keybindings"
+                              Margin="0">
 
                 <ListView HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch"
-                          SelectionMode="None"
-                          IsItemClickEnabled="False"
-                          CanReorderItems="False"
                           AllowDrop="False"
+                          CanReorderItems="False"
+                          IsItemClickEnabled="False"
+                          ItemTemplate="{StaticResource GeneralItemTemplate}"
                           ItemsSource="{x:Bind FilteredActions, Mode=OneWay}"
-                          ItemTemplate="{StaticResource GeneralItemTemplate}">
+                          SelectionMode="None" />
-                </ListView>
 
             </ContentPresenter>
 

src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml

@@ -1,14 +1,15 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.ColorSchemes"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.ColorSchemes"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:model="using:Microsoft.Terminal.Settings.Model"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
     <Page.Resources>
@@ -17,25 +18,32 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <Style x:Key="GroupHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource SubtitleTextBlockStyle}">
+            <Style x:Key="GroupHeaderStyle"
+                   BasedOn="{StaticResource SubtitleTextBlockStyle}"
+                   TargetType="TextBlock">
                 <Setter Property="Margin" Value="0,0,0,4" />
             </Style>
 
-            <Style x:Key="ColorLabelStyle" TargetType="TextBlock">
+            <Style x:Key="ColorLabelStyle"
+                   TargetType="TextBlock">
                 <Setter Property="HorizontalAlignment" Value="Left" />
                 <Setter Property="VerticalAlignment" Value="Center" />
             </Style>
 
-            <Style x:Key="ColorTableGridStyle" TargetType="Grid">
+            <Style x:Key="ColorTableGridStyle"
+                   TargetType="Grid">
                 <Setter Property="RowSpacing" Value="10" />
                 <Setter Property="ColumnSpacing" Value="10" />
             </Style>
 
-            <Style x:Key="ColorControlStyle" TargetType="ContentControl">
+            <Style x:Key="ColorControlStyle"
+                   TargetType="ContentControl">
                 <Setter Property="IsTabStop" Value="False" />
             </Style>
 
-            <Style x:Key="ColorButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
+            <Style x:Key="ColorButtonStyle"
+                   BasedOn="{StaticResource BaseButtonStyle}"
+                   TargetType="Button">
                 <Setter Property="BorderBrush" Value="{StaticResource SystemBaseLowColor}" />
                 <Setter Property="Height" Value="30" />
                 <Setter Property="Width" Value="100" />
@@ -49,20 +57,23 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <Setter Property="IsAlphaTextInputVisible" Value="True" />
             </Style>
 
-            <DataTemplate x:Key="ColorTableEntryTemplate" x:DataType="local:ColorTableEntry">
+            <DataTemplate x:Key="ColorTableEntryTemplate"
-                <Button Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
+                          x:DataType="local:ColorTableEntry">
-                        ToolTipService.ToolTip="{x:Bind Name}"
+                <Button AutomationProperties.Name="{x:Bind Name}"
-                        AutomationProperties.Name="{x:Bind Name}"
+                        Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
-                        Style="{StaticResource ColorButtonStyle}">
+                        Style="{StaticResource ColorButtonStyle}"
+                        ToolTipService.ToolTip="{x:Bind Name}">
                     <Button.Resources>
                         <!--  Resources to colorize hover/pressed states based on the color of the button  -->
                         <ResourceDictionary>
                             <ResourceDictionary.ThemeDictionaries>
                                 <ResourceDictionary x:Key="Light">
-                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                     Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}" />
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="Dark">
-                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                     Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}" />
                                 </ResourceDictionary>
                                 <!--  No High contrast dictionary, let's just leave that unchanged.  -->
                             </ResourceDictionary.ThemeDictionaries>
@@ -71,9 +82,9 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                     <Button.Flyout>
                         <Flyout>
-                            <ColorPicker Tag="{x:Bind Tag, Mode=OneWay}"
+                            <ColorPicker ColorChanged="ColorPickerChanged"
-                                         Color="{x:Bind Color, Mode=OneWay}"
+                                         Tag="{x:Bind Tag, Mode=OneWay}"
-                                         ColorChanged="ColorPickerChanged"/>
+                                         Color="{x:Bind Color, Mode=OneWay}" />
                         </Flyout>
                     </Button.Flyout>
                 </Button>
@@ -88,22 +99,6 @@ the MIT License. See LICENSE in the project root for license information. -->
     </Page.Resources>
 
     <ScrollViewer>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup>
-                <VisualState>
-                    <VisualState.StateTriggers>
-                        <!--Official guidance states that 640 is the breakpoint between small and medium devices.
-                        Since MinWindowWidth is an inclusive range, we need to add 1 to it.-->
-                        <AdaptiveTrigger MinWindowWidth="641"/>
-                    </VisualState.StateTriggers>
-
-                    <VisualState.Setters>
-                        <Setter Target="ColorPanel.Orientation" Value="Horizontal"/>
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-
         <StackPanel Margin="{StaticResource StandardIndentMargin}"
                     Spacing="24">
 
@@ -114,8 +109,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                             Visibility="{x:Bind IsRenaming, Converter={StaticResource InvertedBooleanToVisibilityConverter}, Mode=OneWay}">
                     <!--  Select a color scheme  -->
                     <ComboBox x:Name="ColorSchemeComboBox"
-                              SelectedIndex="0"
                               ItemsSource="{x:Bind ColorSchemeList, Mode=OneWay}"
+                              SelectedIndex="0"
                               SelectionChanged="ColorSchemeSelectionChanged"
                               Style="{StaticResource ComboBoxSettingStyle}">
                         <ComboBox.ItemTemplate>
@@ -127,14 +122,14 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                     <!--  Rename Button  -->
                     <!--  Bind IsEnabled to prevent a the color scheme from returning from the dead  -->
-                    <Button x:Uid="Rename"
+                    <Button x:Name="RenameButton"
-                            x:Name="RenameButton"
+                            x:Uid="Rename"
-                            Style="{StaticResource SmallButtonStyle}"
                             Click="Rename_Click"
-                            IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}">
+                            IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
+                            Style="{StaticResource SmallButtonStyle}">
                         <StackPanel Orientation="Horizontal">
-                            <FontIcon Glyph="&#xE8AC;"
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      FontSize="{StaticResource StandardIconSize}"/>
+                                      Glyph="&#xE8AC;" />
                         </StackPanel>
                     </Button>
                 </StackPanel>
@@ -148,27 +143,27 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                     <!--  Name text box  -->
                     <TextBox x:Name="NameBox"
-                             Style="{StaticResource TextBoxSettingStyle}"
+                             PreviewKeyDown="NameBox_PreviewKeyDown"
-                             PreviewKeyDown="NameBox_PreviewKeyDown"/>
+                             Style="{StaticResource TextBoxSettingStyle}" />
 
                     <!--  Accept rename button  -->
-                    <Button x:Uid="RenameAccept"
+                    <Button x:Name="RenameAcceptButton"
-                            x:Name="RenameAcceptButton"
+                            x:Uid="RenameAccept"
-                            Style="{StaticResource AccentSmallButtonStyle}"
+                            Click="RenameAccept_Click"
-                            Click="RenameAccept_Click">
+                            Style="{StaticResource AccentSmallButtonStyle}">
                         <StackPanel Orientation="Horizontal">
-                            <FontIcon Glyph="&#xE8FB;"
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      FontSize="{StaticResource StandardIconSize}"/>
+                                      Glyph="&#xE8FB;" />
                         </StackPanel>
                     </Button>
                     <!--  Cancel rename button  -->
-                    <Button x:Uid="RenameCancel"
+                    <Button x:Name="RenameCancelButton"
-                            x:Name="RenameCancelButton"
+                            x:Uid="RenameCancel"
-                            Style="{StaticResource SmallButtonStyle}"
+                            Click="RenameCancel_Click"
-                            Click="RenameCancel_Click">
+                            Style="{StaticResource SmallButtonStyle}">
                         <StackPanel Orientation="Horizontal">
-                            <FontIcon Glyph="&#xE711;"
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      FontSize="{StaticResource StandardIconSize}"/>
+                                      Glyph="&#xE711;" />
                         </StackPanel>
                     </Button>
                 </StackPanel>
@@ -178,8 +173,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                         Click="AddNew_Click"
                         Style="{StaticResource BrowseButtonStyle}">
                     <StackPanel Orientation="Horizontal">
-                        <FontIcon Glyph="&#xE710;"
+                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  FontSize="{StaticResource StandardIconSize}"/>
+                                  Glyph="&#xE710;" />
                         <TextBlock x:Uid="ColorScheme_AddNewButton"
                                    Style="{StaticResource IconButtonTextBlockStyle}" />
                     </StackPanel>
@@ -238,51 +233,51 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                         <!--  Foreground  -->
                         <TextBlock x:Uid="ColorScheme_Foreground"
-                                   Style="{StaticResource ColorLabelStyle}"
                                    Grid.Row="0"
-                                   Grid.Column="0"/>
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
                         <ContentControl x:Name="ForegroundButton"
-                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
-                                        Content="{x:Bind CurrentForegroundColor, Mode=TwoWay}"
-                                        Style="{StaticResource ColorControlStyle}"
                                         Grid.Row="0"
-                                        Grid.Column="1"/>
+                                        Grid.Column="1"
+                                        Content="{x:Bind CurrentForegroundColor, Mode=TwoWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
 
                         <!--  Background  -->
                         <TextBlock x:Uid="ColorScheme_Background"
-                                   Style="{StaticResource ColorLabelStyle}"
                                    Grid.Row="1"
-                                   Grid.Column="0"/>
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
                         <ContentControl x:Name="BackgroundButton"
-                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
-                                        Content="{x:Bind CurrentBackgroundColor, Mode=TwoWay}"
-                                        Style="{StaticResource ColorControlStyle}"
                                         Grid.Row="1"
-                                        Grid.Column="1"/>
+                                        Grid.Column="1"
+                                        Content="{x:Bind CurrentBackgroundColor, Mode=TwoWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
 
                         <!--  Cursor Color  -->
                         <TextBlock x:Uid="ColorScheme_CursorColor"
-                                   Style="{StaticResource ColorLabelStyle}"
                                    Grid.Row="2"
-                                   Grid.Column="0"/>
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
                         <ContentControl x:Name="CursorColorButton"
-                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
-                                        Content="{x:Bind CurrentCursorColor, Mode=TwoWay}"
-                                        Style="{StaticResource ColorControlStyle}"
                                         Grid.Row="2"
-                                        Grid.Column="1"/>
+                                        Grid.Column="1"
+                                        Content="{x:Bind CurrentCursorColor, Mode=TwoWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
 
                         <!--  Selection Background  -->
                         <TextBlock x:Uid="ColorScheme_SelectionBackground"
-                                   Style="{StaticResource ColorLabelStyle}"
                                    Grid.Row="3"
-                                   Grid.Column="0"/>
+                                   Grid.Column="0"
+                                   Style="{StaticResource ColorLabelStyle}" />
                         <ContentControl x:Name="SelectionBackgroundButton"
-                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
-                                        Content="{x:Bind CurrentSelectionBackgroundColor, Mode=TwoWay}"
-                                        Style="{StaticResource ColorControlStyle}"
                                         Grid.Row="3"
-                                        Grid.Column="1"/>
+                                        Grid.Column="1"
+                                        Content="{x:Bind CurrentSelectionBackgroundColor, Mode=TwoWay}"
+                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
+                                        Style="{StaticResource ColorControlStyle}" />
                     </Grid>
                 </StackPanel>
             </StackPanel>
@@ -296,28 +291,46 @@ the MIT License. See LICENSE in the project root for license information. -->
                         <ResourceDictionary>
                             <ResourceDictionary.ThemeDictionaries>
                                 <ResourceDictionary x:Key="Light">
-                                    <SolidColorBrush x:Key="ButtonBackground" Color="Firebrick"/>
+                                    <SolidColorBrush x:Key="ButtonBackground"
-                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#C23232"/>
+                                                     Color="Firebrick" />
-                                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#A21212"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                    <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
+                                                     Color="#C23232" />
-                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="White"/>
+                                                     Color="#A21212" />
+                                    <SolidColorBrush x:Key="ButtonForeground"
+                                                     Color="White" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                     Color="White" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                     Color="White" />
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="Dark">
-                                    <SolidColorBrush x:Key="ButtonBackground" Color="Firebrick"/>
+                                    <SolidColorBrush x:Key="ButtonBackground"
-                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#C23232"/>
+                                                     Color="Firebrick" />
-                                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#A21212"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                    <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
+                                                     Color="#C23232" />
-                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="White"/>
+                                                     Color="#A21212" />
+                                    <SolidColorBrush x:Key="ButtonForeground"
+                                                     Color="White" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                     Color="White" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                     Color="White" />
                                 </ResourceDictionary>
                                 <ResourceDictionary x:Key="HighContrast">
-                                    <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                    <SolidColorBrush x:Key="ButtonBackground"
-                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                                     Color="{ThemeResource SystemColorButtonFaceColor}" />
-                                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                    <SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorButtonTextColor}"/>
+                                                     Color="{ThemeResource SystemColorHighlightColor}" />
-                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                                     Color="{ThemeResource SystemColorHighlightColor}" />
+                                    <SolidColorBrush x:Key="ButtonForeground"
+                                                     Color="{ThemeResource SystemColorButtonTextColor}" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
                                 </ResourceDictionary>
                             </ResourceDictionary.ThemeDictionaries>
                         </ResourceDictionary>
@@ -341,9 +354,26 @@ the MIT License. See LICENSE in the project root for license information. -->
                     </Button.Flyout>
                 </Button>
                 <TextBlock x:Name="DeleteButtonDisclaimer"
-                           Style="{StaticResource DisclaimerStyle}"
+                           VerticalAlignment="Center"
-                           VerticalAlignment="Center"/>
+                           Style="{StaticResource DisclaimerStyle}" />
             </StackPanel>
         </StackPanel>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <!--
+                            Official guidance states that 640 is the breakpoint between small and medium devices.
+                            Since MinWindowWidth is an inclusive range, we need to add 1 to it.
+                        -->
+                        <AdaptiveTrigger MinWindowWidth="641" />
+                    </VisualState.StateTriggers>
+
+                    <VisualState.Setters>
+                        <Setter Target="ColorPanel.Orientation" Value="Horizontal" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </ScrollViewer>
 </Page>

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

@@ -1,7 +1,8 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<ResourceDictionary
+    the MIT License. See LICENSE in the project root for license information.
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+-->
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
 
@@ -15,98 +16,126 @@ the MIT License. See LICENSE in the project root for license information. -->
     <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
     <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
 
-    <!-- This is for styling the entire items control used on the
+    <!--
-         color schemes page-->
+        This is for styling the entire items control used on the
-    <Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
+        color schemes page
+    -->
+    <Style x:Key="ItemsControlStyle"
+           TargetType="ItemsControl">
         <Setter Property="Margin" Value="{StaticResource StandardControlMargin}" />
     </Style>
 
     <!--  Used to stack a group of settings  -->
-    <Style x:Key="SettingsStackStyle" TargetType="StackPanel">
+    <Style x:Key="SettingsStackStyle"
+           TargetType="StackPanel">
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="Margin" Value="13,0,0,48" />
     </Style>
 
     <!--  Used to stack a group of settings inside a pivot  -->
-    <Style x:Key="PivotStackStyle" TargetType="StackPanel">
+    <Style x:Key="PivotStackStyle"
+           TargetType="StackPanel">
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="Margin" Value="0,0,0,48" />
     </Style>
 
     <!--  Combo Box  -->
-    <Style x:Key="ComboBoxSettingStyle" TargetType="ComboBox" BasedOn="{StaticResource DefaultComboBoxStyle}">
+    <Style x:Key="ComboBoxSettingStyle"
+           BasedOn="{StaticResource DefaultComboBoxStyle}"
+           TargetType="ComboBox">
         <Setter Property="MinWidth" Value="{StaticResource StandardBoxMinWidth}" />
     </Style>
 
     <!--  Text Box  -->
-    <Style x:Key="TextBoxSettingStyle" TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}">
+    <Style x:Key="TextBoxSettingStyle"
+           BasedOn="{StaticResource DefaultTextBoxStyle}"
+           TargetType="TextBox">
         <Setter Property="Width" Value="{StaticResource StandardBoxMinWidth}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="TextWrapping" Value="Wrap" />
     </Style>
 
     <!--  Used for disclaimers  -->
-    <Style x:Key="DisclaimerStyle" TargetType="TextBlock">
+    <Style x:Key="DisclaimerStyle"
+           TargetType="TextBlock">
         <Setter Property="FontStyle" Value="Italic" />
         <Setter Property="TextWrapping" Value="WrapWholeWords" />
     </Style>
 
     <!--  Used for flyout messages  -->
-    <Style x:Key="CustomFlyoutTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
+    <Style x:Key="CustomFlyoutTextStyle"
+           BasedOn="{StaticResource BaseTextBlockStyle}"
+           TargetType="TextBlock">
         <Setter Property="FontWeight" Value="Bold" />
         <Setter Property="Margin" Value="0,0,0,10" />
     </Style>
 
     <!--  Number Box  -->
-    <Style x:Key="NumberBoxSettingStyle" TargetType="muxc:NumberBox">
+    <Style x:Key="NumberBoxSettingStyle"
+           TargetType="muxc:NumberBox">
         <Setter Property="SpinButtonPlacementMode" Value="Compact" />
         <Setter Property="HorizontalAlignment" Value="Left" />
     </Style>
 
     <!--  Button-Related Styling  -->
-    <Style x:Key="BaseButtonStyle" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
+    <Style x:Key="BaseButtonStyle"
+           BasedOn="{StaticResource DefaultButtonStyle}"
+           TargetType="Button">
         <Setter Property="VerticalAlignment" Value="Center" />
     </Style>
 
-    <Style x:Key="BrowseButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
+    <Style x:Key="BrowseButtonStyle"
+           BasedOn="{StaticResource BaseButtonStyle}"
+           TargetType="Button">
         <Setter Property="Margin" Value="10,0,0,0" />
         <Setter Property="Height" Value="33" />
     </Style>
 
-    <Style x:Key="DeleteButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
+    <Style x:Key="DeleteButtonStyle"
+           BasedOn="{StaticResource BaseButtonStyle}"
+           TargetType="Button">
         <Setter Property="Margin" Value="0,0,0,10" />
     </Style>
 
-    <Style x:Key="SmallButtonStyle" TargetType="Button" BasedOn="{StaticResource BrowseButtonStyle}">
+    <Style x:Key="SmallButtonStyle"
+           BasedOn="{StaticResource BrowseButtonStyle}"
+           TargetType="Button">
         <Setter Property="Height" Value="33" />
         <Setter Property="Width" Value="33" />
     </Style>
 
-    <Style x:Key="AccentBrowseButtonStyle" TargetType="Button" BasedOn="{StaticResource AccentButtonStyle}">
+    <Style x:Key="AccentBrowseButtonStyle"
+           BasedOn="{StaticResource AccentButtonStyle}"
+           TargetType="Button">
         <Setter Property="Margin" Value="10,0,0,0" />
         <Setter Property="VerticalAlignment" Value="Bottom" />
     </Style>
 
-    <Style x:Key="AccentSmallButtonStyle" TargetType="Button" BasedOn="{StaticResource AccentButtonStyle}">
+    <Style x:Key="AccentSmallButtonStyle"
+           BasedOn="{StaticResource AccentButtonStyle}"
+           TargetType="Button">
         <Setter Property="Margin" Value="10,0,0,0" />
         <Setter Property="VerticalAlignment" Value="Bottom" />
         <Setter Property="Height" Value="33" />
         <Setter Property="Width" Value="33" />
     </Style>
 
-    <Style x:Key="IconButtonTextBlockStyle" TargetType="TextBlock">
+    <Style x:Key="IconButtonTextBlockStyle"
+           TargetType="TextBlock">
         <Setter Property="Margin" Value="10,0,0,0" />
     </Style>
 
     <!--  Slider-Related Styling  -->
-    <Style x:Key="SliderValueLabelStyle" TargetType="TextBlock">
+    <Style x:Key="SliderValueLabelStyle"
+           TargetType="TextBlock">
         <Setter Property="Width" Value="35" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Margin" Value="5,0,0,0" />
     </Style>
 
-    <Style x:Key="CustomSliderControlGridStyle" TargetType="Grid">
+    <Style x:Key="CustomSliderControlGridStyle"
+           TargetType="Grid">
         <Setter Property="Width" Value="{StaticResource StandardBoxMinWidth}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
     </Style>

src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml

@@ -1,11 +1,12 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.GlobalAppearance"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.GlobalAppearance"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
@@ -16,7 +17,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <DataTemplate x:DataType="local:EnumEntry" x:Key="EnumRadioButtonTemplate">
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
                 <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
             </DataTemplate>
 
@@ -29,9 +31,9 @@ the MIT License. See LICENSE in the project root for license information. -->
             <!--  Theme  -->
             <local:SettingContainer x:Uid="Globals_Theme"
                                     Margin="0">
-                <muxc:RadioButtons SelectedItem="{x:Bind CurrentTheme, Mode=TwoWay}"
+                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind ThemeList, Mode=OneWay}"
-                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                   SelectedItem="{x:Bind CurrentTheme, Mode=TwoWay}" />
             </local:SettingContainer>
 
             <!--  Always show tabs  -->
@@ -56,9 +58,9 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <!--  Tab Width Mode  -->
             <local:SettingContainer x:Uid="Globals_TabWidthMode">
-                <muxc:RadioButtons SelectedItem="{x:Bind CurrentTabWidthMode, Mode=TwoWay}"
+                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabWidthModeList, Mode=OneWay}"
-                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                   SelectedItem="{x:Bind CurrentTabWidthMode, Mode=TwoWay}" />
             </local:SettingContainer>
 
             <!--  Disable Animations  -->

src/cascadia/TerminalSettingsEditor/Interaction.xaml

@@ -1,11 +1,12 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.Interaction"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Interaction"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
@@ -16,7 +17,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <DataTemplate x:DataType="local:EnumEntry" x:Key="EnumRadioButtonTemplate">
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
                 <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
             </DataTemplate>
         </ResourceDictionary>
@@ -32,15 +34,15 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <!--  Copy Format  -->
             <local:SettingContainer x:Uid="Globals_CopyFormat">
-                <muxc:RadioButtons ItemsSource="{x:Bind CopyFormatList, Mode=OneWay}"
+                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                   SelectedItem="{x:Bind CurrentCopyFormat, Mode=TwoWay}"
+                                   ItemsSource="{x:Bind CopyFormatList, Mode=OneWay}"
-                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                   SelectedItem="{x:Bind CurrentCopyFormat, Mode=TwoWay}" />
             </local:SettingContainer>
 
             <!--  Word Delimiters  -->
             <local:SettingContainer x:Uid="Globals_WordDelimiters">
-                <TextBox Text="{x:Bind State.Globals.WordDelimiters, Mode=TwoWay}"
+                <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                         Style="{StaticResource TextBoxSettingStyle}"/>
+                         Text="{x:Bind State.Globals.WordDelimiters, Mode=TwoWay}" />
             </local:SettingContainer>
 
             <!--  Snap On Resize  -->
@@ -50,9 +52,9 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <!--  Tab Switcher Mode  -->
             <local:SettingContainer x:Uid="Globals_TabSwitcherMode">
-                <muxc:RadioButtons SelectedItem="{x:Bind CurrentTabSwitcherMode, Mode=TwoWay}"
+                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabSwitcherModeList}"
-                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                   SelectedItem="{x:Bind CurrentTabSwitcherMode, Mode=TwoWay}" />
             </local:SettingContainer>
 
             <!--  Focus Follow Mouse Mode  -->

src/cascadia/TerminalSettingsEditor/Launch.xaml

@@ -1,14 +1,15 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.Launch"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Launch"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
       mc:Ignorable="d">
 
     <Page.Resources>
@@ -17,11 +18,14 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <DataTemplate x:DataType="local:EnumEntry" x:Key="EnumRadioButtonTemplate">
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
                 <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
             </DataTemplate>
             <SettingsModel:IconPathConverter x:Key="IconSourceConverter" />
-            <Style x:Key="LaunchSizeNumberBoxStyle" TargetType="muxc:NumberBox" BasedOn="{StaticResource NumberBoxSettingStyle}">
+            <Style x:Key="LaunchSizeNumberBoxStyle"
+                   BasedOn="{StaticResource NumberBoxSettingStyle}"
+                   TargetType="muxc:NumberBox">
                 <Setter Property="SmallChange" Value="1" />
                 <Setter Property="LargeChange" Value="10" />
                 <Setter Property="Minimum" Value="1" />
@@ -41,7 +45,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                               Style="{StaticResource ComboBoxSettingStyle}">
                         <ComboBox.ItemTemplate>
                             <DataTemplate x:DataType="SettingsModel:Profile">
-                                <Grid HorizontalAlignment="Stretch" ColumnSpacing="8">
+                                <Grid HorizontalAlignment="Stretch"
+                                      ColumnSpacing="8">
 
                                     <Grid.ColumnDefinitions>
                                         <!--  icon  -->
@@ -50,13 +55,10 @@ the MIT License. See LICENSE in the project root for license information. -->
                                         <ColumnDefinition Width="Auto" />
                                     </Grid.ColumnDefinitions>
 
-                                    <IconSourceElement
+                                    <IconSourceElement Grid.Column="0"
-                                    Grid.Column="0"
                                                        Width="16"
                                                        Height="16"
-                                    IconSource="{x:Bind Icon,
+                                                       IconSource="{x:Bind Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
-                                                        Mode=OneWay,
-                                                        Converter={StaticResource IconSourceConverter}}"/>
 
                                     <TextBlock Grid.Column="1"
                                                Text="{x:Bind Name}" />
@@ -73,8 +75,7 @@ the MIT License. See LICENSE in the project root for license information. -->
                               x:Load="False"
                               ItemsSource="{x:Bind DefaultTerminals, Mode=OneWay}"
                               SelectedItem="{x:Bind CurrentDefaultTerminal, Mode=TwoWay}"
-                              Style="{StaticResource ComboBoxSettingStyle}">
+                              Style="{StaticResource ComboBoxSettingStyle}" />
-                    </ComboBox>
                 </local:SettingContainer>
 
                 <!--  Start on User Login  -->
@@ -84,16 +85,16 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Uid="Globals_LaunchMode">
-                    <muxc:RadioButtons SelectedItem="{x:Bind CurrentLaunchMode, Mode=TwoWay}"
+                    <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind LaunchModeList}"
-                                       ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                       SelectedItem="{x:Bind CurrentLaunchMode, Mode=TwoWay}" />
                 </local:SettingContainer>
 
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Uid="Globals_WindowingBehavior">
-                    <muxc:RadioButtons SelectedItem="{x:Bind CurrentWindowingBehavior, Mode=TwoWay}"
+                    <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind WindowingBehaviorList}"
-                                       ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                       SelectedItem="{x:Bind CurrentWindowingBehavior, Mode=TwoWay}" />
                 </local:SettingContainer>
             </StackPanel>
 
@@ -106,13 +107,13 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <!--  Columns  -->
                 <local:SettingContainer x:Uid="Globals_InitialCols"
                                         Margin="0">
-                    <muxc:NumberBox Value="{x:Bind State.Settings.GlobalSettings.InitialCols, Mode=TwoWay}"
+                    <muxc:NumberBox Style="{StaticResource LaunchSizeNumberBoxStyle}"
-                                    Style="{StaticResource LaunchSizeNumberBoxStyle}"/>
+                                    Value="{x:Bind State.Settings.GlobalSettings.InitialCols, Mode=TwoWay}" />
                 </local:SettingContainer>
                 <!--  Rows  -->
                 <local:SettingContainer x:Uid="Globals_InitialRows">
-                    <muxc:NumberBox Value="{x:Bind State.Settings.GlobalSettings.InitialRows, Mode=TwoWay}"
+                    <muxc:NumberBox Style="{StaticResource LaunchSizeNumberBoxStyle}"
-                                    Style="{StaticResource LaunchSizeNumberBoxStyle}"/>
+                                    Value="{x:Bind State.Settings.GlobalSettings.InitialRows, Mode=TwoWay}" />
                 </local:SettingContainer>
             </StackPanel>
         </StackPanel>

src/cascadia/TerminalSettingsEditor/MainPage.xaml

@@ -1,7 +1,8 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.MainPage"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -31,11 +32,11 @@ the MIT License. See LICENSE in the project root for license information. -->
     </Page.Resources>
 
     <muxc:NavigationView x:Name="SettingsNav"
-                         IsSettingsVisible="False"
                          Header="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}"
-                         Loaded="SettingsNav_Loaded"
-                         ItemInvoked="SettingsNav_ItemInvoked"
                          IsBackButtonVisible="Collapsed"
+                         IsSettingsVisible="False"
+                         ItemInvoked="SettingsNav_ItemInvoked"
+                         Loaded="SettingsNav_Loaded"
                          TabFocusNavigation="Cycle">
 
         <muxc:NavigationView.MenuItems>
@@ -84,8 +85,8 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <muxc:NavigationViewItemHeader x:Uid="Nav_Profiles" />
 
-            <muxc:NavigationViewItem x:Uid="Nav_ProfileDefaults"
+            <muxc:NavigationViewItem x:Name="BaseLayerMenuItem"
-                                     x:Name="BaseLayerMenuItem"
+                                     x:Uid="Nav_ProfileDefaults"
                                      Tag="GlobalProfile_Nav">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xE81E;" />
@@ -96,10 +97,10 @@ the MIT License. See LICENSE in the project root for license information. -->
 
         <muxc:NavigationView.PaneFooter>
             <!--  The OpenJson item needs both Tapped and KeyDown handler  -->
-            <muxc:NavigationViewItem x:Uid="Nav_OpenJSON"
+            <muxc:NavigationViewItem x:Name="OpenJsonNavItem"
-                                     x:Name="OpenJsonNavItem"
+                                     x:Uid="Nav_OpenJSON"
-                                     Tapped="OpenJsonTapped"
+                                     KeyDown="OpenJsonKeyDown"
-                                     KeyDown="OpenJsonKeyDown">
+                                     Tapped="OpenJsonTapped">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xE713;" />
                 </muxc:NavigationViewItem.Icon>
@@ -108,33 +109,37 @@ the MIT License. See LICENSE in the project root for license information. -->
 
         <Grid>
             <Grid.RowDefinitions>
-                <RowDefinition Height="*"></RowDefinition>
+                <RowDefinition Height="*" />
-                <RowDefinition Height="Auto"></RowDefinition>
+                <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
             <Frame x:Name="contentFrame"
-                   Grid.Row="0"></Frame>
+                   Grid.Row="0" />
-            <Grid Height="100" Grid.Row="1"
+            <Grid Grid.Row="1"
+                  Height="100"
                   BorderBrush="{ThemeResource SystemBaseLowColor}"
                   BorderThickness="0,1,0,0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*"></ColumnDefinition>
+                    <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <TextBlock x:Uid="Settings_UnsavedSettingsWarning"
-                           Visibility="Collapsed"
+                           Margin="30,0,0,0"
-                           Foreground="Goldenrod"
-                           VerticalAlignment="Center"
                            HorizontalAlignment="Left"
+                           VerticalAlignment="Center"
+                           Foreground="Goldenrod"
                            TextAlignment="Left"
-                           Margin="30,0,0,0"/>
+                           Visibility="Collapsed" />
-                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,0,30,0">
+                <StackPanel Margin="0,0,30,0"
-                    <Button x:Uid="Settings_ResetSettingsButton"
+                            HorizontalAlignment="Right"
-                            x:Name="ResetButton"
+                            VerticalAlignment="Center"
+                            Orientation="Horizontal">
+                    <Button x:Name="ResetButton"
+                            x:Uid="Settings_ResetSettingsButton"
                             Click="ResetButton_Click" />
-                    <Button x:Uid="Settings_SaveSettingsButton"
+                    <Button x:Name="SaveButton"
-                            x:Name="SaveButton"
+                            x:Uid="Settings_SaveSettingsButton"
-                            Style="{StaticResource AccentButtonStyle}"
                             Margin="10,0,0,0"
-                            Click="SaveButton_Click"/>
+                            Click="SaveButton_Click"
+                            Style="{StaticResource AccentButtonStyle}" />
                 </StackPanel>
             </Grid>
         </Grid>

src/cascadia/TerminalSettingsEditor/Profiles.xaml

@@ -1,13 +1,14 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.Profiles"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
-    xmlns:model="using:Microsoft.Terminal.Settings.Model"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:model="using:Microsoft.Terminal.Settings.Model"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
 
@@ -17,16 +18,20 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <DataTemplate x:DataType="local:EnumEntry" x:Key="EnumRadioButtonTemplate">
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
                 <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
             </DataTemplate>
 
-            <DataTemplate x:DataType="local:EnumEntry" x:Key="EnumComboBoxItemTemplate">
+            <DataTemplate x:Key="EnumComboBoxItemTemplate"
+                          x:DataType="local:EnumEntry">
                 <TextBlock Text="{x:Bind EnumName, Mode=OneWay}" />
             </DataTemplate>
 
-            <DataTemplate x:DataType="local:Font" x:Key="FontFaceComboBoxItemTemplate">
+            <DataTemplate x:Key="FontFaceComboBoxItemTemplate"
-                <TextBlock Text="{x:Bind LocalizedName}" FontFamily="{x:Bind Name}"/>
+                          x:DataType="local:Font">
+                <TextBlock FontFamily="{x:Bind Name}"
+                           Text="{x:Bind LocalizedName}" />
             </DataTemplate>
 
             <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
@@ -55,37 +60,39 @@ the MIT License. See LICENSE in the project root for license information. -->
                    Visibility="{x:Bind State.Profile.IsBaseLayer}" />
 
         <Pivot x:Name="ProfilesPivot"
-               HorizontalAlignment="Left"
                Grid.Row="1"
-               SelectionChanged="Pivot_SelectionChanged"
+               Margin="1,0,0,0"
-               Margin="1,0,0,0">
+               HorizontalAlignment="Left"
+               SelectionChanged="Pivot_SelectionChanged">
             <!--  General Tab  -->
             <PivotItem x:Uid="Profile_General">
                 <ScrollViewer>
                     <StackPanel Style="{StaticResource PivotStackStyle}">
 
                         <!--  Name  -->
-                        <!--NOTE: Has/Clear is not bound because we don't want the reset button & override text to appear.
+                        <!--
+                            NOTE: Has/Clear is not bound because we don't want the reset button & override text to appear.
                             Additionally, the JSON stubs generated by auto-generated profiles come with a name,
-                                  so the name will always be overridden.-->
+                            so the name will always be overridden.
+                        -->
                         <local:SettingContainer x:Uid="Profile_Name"
-                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
+                                                Margin="0,0,0,24"
-                                                Margin="0,0,0,24">
+                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
-                            <TextBox Text="{x:Bind State.Profile.Name, Mode=TwoWay}"
+                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                                     Style="{StaticResource TextBoxSettingStyle}"/>
+                                     Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Commandline  -->
-                        <local:SettingContainer x:Uid="Profile_Commandline"
+                        <local:SettingContainer x:Name="CommandlineContainer"
-                                                x:Name="CommandlineContainer"
+                                                x:Uid="Profile_Commandline"
-                                                HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
+                                                Margin="0,0,0,24"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
+                                                HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
-                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
+                                                Visibility="{x:Bind State.Profile.IsBaseLayer, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">
-                                                Margin="0,0,0,24">
                             <StackPanel Orientation="Horizontal">
-                                <TextBox Text="{x:Bind State.Profile.Commandline, Mode=TwoWay}"
+                                <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                                         Style="{StaticResource TextBoxSettingStyle}"/>
+                                         Text="{x:Bind State.Profile.Commandline, Mode=TwoWay}" />
                                 <Button x:Uid="Profile_CommandlineBrowse"
                                         Click="Commandline_Click"
                                         Style="{StaticResource BrowseButtonStyle}" />
@@ -93,38 +100,38 @@ the MIT License. See LICENSE in the project root for license information. -->
                         </local:SettingContainer>
 
                         <!--  Starting Directory  -->
-                        <local:SettingContainer x:Uid="Profile_StartingDirectory"
+                        <local:SettingContainer x:Name="StartingDirectoryContainer"
-                                                x:Name="StartingDirectoryContainer"
+                                                x:Uid="Profile_StartingDirectory"
-                                                HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
+                                                Margin="0"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
-                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}"
+                                                HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
-                                                Margin="0">
+                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
                             <StackPanel Orientation="Vertical">
                                 <StackPanel Orientation="Horizontal">
-                                    <TextBox Text="{x:Bind State.Profile.StartingDirectory, Mode=TwoWay}"
+                                    <TextBox IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
-                                             IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
+                                             Style="{StaticResource TextBoxSettingStyle}"
-                                             Style="{StaticResource TextBoxSettingStyle}"/>
+                                             Text="{x:Bind State.Profile.StartingDirectory, Mode=TwoWay}" />
-                                    <Button x:Uid="Profile_StartingDirectoryBrowse"
+                                    <Button x:Name="StartingDirectoryBrowse"
-                                            x:Name="StartingDirectoryBrowse"
+                                            x:Uid="Profile_StartingDirectoryBrowse"
                                             Click="StartingDirectory_Click"
                                             IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
                                             Style="{StaticResource BrowseButtonStyle}" />
                                 </StackPanel>
-                                <CheckBox x:Uid="Profile_StartingDirectoryUseParentCheckbox"
+                                <CheckBox x:Name="StartingDirectoryUseParentCheckbox"
-                                          x:Name="StartingDirectoryUseParentCheckbox"
+                                          x:Uid="Profile_StartingDirectoryUseParentCheckbox"
                                           IsChecked="{x:Bind State.Profile.UseParentProcessDirectory, Mode=TwoWay}" />
                             </StackPanel>
                         </local:SettingContainer>
 
                         <!--  Icon  -->
                         <local:SettingContainer x:Uid="Profile_Icon"
-                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearIcon}"
+                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}">
                             <StackPanel Orientation="Horizontal">
-                                <TextBox Text="{x:Bind State.Profile.Icon, Mode=TwoWay}"
+                                <TextBox FontFamily="Segoe UI, Segoe MDL2 Assets"
-                                         FontFamily="Segoe UI, Segoe MDL2 Assets"
+                                         Style="{StaticResource TextBoxSettingStyle}"
-                                         Style="{StaticResource TextBoxSettingStyle}"/>
+                                         Text="{x:Bind State.Profile.Icon, Mode=TwoWay}" />
                                 <Button x:Uid="Profile_IconBrowse"
                                         Click="Icon_Click"
                                         Style="{StaticResource BrowseButtonStyle}" />
@@ -133,11 +140,11 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                         <!--  Tab Title  -->
                         <local:SettingContainer x:Uid="Profile_TabTitle"
-                                                HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearTabTitle}"
+                                                HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}">
-                            <TextBox Text="{x:Bind State.Profile.TabTitle, Mode=TwoWay}"
+                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                                     Style="{StaticResource TextBoxSettingStyle}"/>
+                                     Text="{x:Bind State.Profile.TabTitle, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Hidden  -->
@@ -155,36 +162,54 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     <ResourceDictionary>
                                         <ResourceDictionary.ThemeDictionaries>
                                             <ResourceDictionary x:Key="Light">
-                                                <SolidColorBrush x:Key="ButtonBackground" Color="Firebrick"/>
+                                                <SolidColorBrush x:Key="ButtonBackground"
-                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#C23232"/>
+                                                                 Color="Firebrick" />
-                                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#A21212"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
+                                                                 Color="#C23232" />
-                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="White"/>
+                                                                 Color="#A21212" />
+                                                <SolidColorBrush x:Key="ButtonForeground"
+                                                                 Color="White" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                                 Color="White" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                                 Color="White" />
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="Dark">
-                                                <SolidColorBrush x:Key="ButtonBackground" Color="Firebrick"/>
+                                                <SolidColorBrush x:Key="ButtonBackground"
-                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#C23232"/>
+                                                                 Color="Firebrick" />
-                                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#A21212"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
+                                                                 Color="#C23232" />
-                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="White"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="White"/>
+                                                                 Color="#A21212" />
+                                                <SolidColorBrush x:Key="ButtonForeground"
+                                                                 Color="White" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                                 Color="White" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                                 Color="White" />
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="HighContrast">
-                                                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemColorButtonFaceColor}"/>
+                                                <SolidColorBrush x:Key="ButtonBackground"
-                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                                                 Color="{ThemeResource SystemColorButtonFaceColor}" />
-                                                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemColorHighlightColor}"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                <SolidColorBrush x:Key="ButtonForeground" Color="{ThemeResource SystemColorButtonTextColor}"/>
+                                                                 Color="{ThemeResource SystemColorHighlightColor}" />
-                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                                <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                <SolidColorBrush x:Key="ButtonForegroundPressed" Color="{ThemeResource SystemColorHighlightTextColor}"/>
+                                                                 Color="{ThemeResource SystemColorHighlightColor}" />
+                                                <SolidColorBrush x:Key="ButtonForeground"
+                                                                 Color="{ThemeResource SystemColorButtonTextColor}" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                                 Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                                <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                                 Color="{ThemeResource SystemColorHighlightTextColor}" />
                                             </ResourceDictionary>
                                         </ResourceDictionary.ThemeDictionaries>
                                     </ResourceDictionary>
                                 </Button.Resources>
                                 <Button.Content>
                                     <StackPanel Orientation="Horizontal">
-                                        <FontIcon Glyph="&#xE74D;"
+                                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                                  FontSize="{StaticResource StandardIconSize}"/>
+                                                  Glyph="&#xE74D;" />
                                         <TextBlock x:Uid="Profile_DeleteButton"
                                                    Margin="10,0,0,0" />
                                     </StackPanel>
@@ -201,8 +226,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                                 </Button.Flyout>
                             </Button>
                             <TextBlock x:Name="DeleteButtonDisclaimer"
-                                       Style="{StaticResource DisclaimerStyle}"
+                                       VerticalAlignment="Center"
-                                       VerticalAlignment="Center"/>
+                                       Style="{StaticResource DisclaimerStyle}" />
                         </StackPanel>
                     </StackPanel>
                 </ScrollViewer>
@@ -214,14 +239,15 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <StackPanel>
                         <StackPanel Style="{StaticResource PivotStackStyle}">
                             <!--  Grouping: Text  -->
-                            <TextBlock x:Uid="Profile_TextHeader" Style="{StaticResource SubtitleTextBlockStyle}"/>
+                            <TextBlock x:Uid="Profile_TextHeader"
+                                       Style="{StaticResource SubtitleTextBlockStyle}" />
 
                             <!--  Color Scheme  -->
                             <local:SettingContainer x:Uid="Profile_ColorScheme"
-                                                    HasSettingValue="{x:Bind State.Profile.HasColorSchemeName, Mode=OneWay}"
+                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearColorSchemeName}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.ColorSchemeNameOverrideSource, Mode=OneWay}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasColorSchemeName, Mode=OneWay}"
-                                                    Margin="0">
+                                                    SettingOverrideSource="{x:Bind State.Profile.ColorSchemeNameOverrideSource, Mode=OneWay}">
                                 <ComboBox ItemsSource="{x:Bind ColorSchemeList, Mode=OneWay}"
                                           SelectedItem="{x:Bind CurrentColorScheme, Mode=TwoWay}"
                                           Style="{StaticResource ComboBoxSettingStyle}">
@@ -235,27 +261,29 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                             <!--  Font Face  -->
                             <local:SettingContainer x:Uid="Profile_FontFace"
-                                                    HasSettingValue="{x:Bind State.Profile.HasFontFace, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearFontFace}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasFontFace, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.FontFaceOverrideSource, Mode=OneWay}">
                                 <StackPanel>
-                                    <!--Binding the ItemsSource to a separate variable that switches between the
+                                    <!--
+                                        Binding the ItemsSource to a separate variable that switches between the
                                         two font lists causes a crash within the ComboBox code.
-                                        As a workaround, introduce two ComboBox controls and only display one at a time.-->
+                                        As a workaround, introduce two ComboBox controls and only display one at a time.
-                                    <ComboBox ItemsSource="{x:Bind State.Profile.MonospaceFontList, Mode=OneWay}"
+                                    -->
+                                    <ComboBox ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
+                                              ItemsSource="{x:Bind State.Profile.MonospaceFontList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentFontFace, Mode=OneWay}"
                                               SelectionChanged="FontFace_SelectionChanged"
                                               Style="{StaticResource ComboBoxSettingStyle}"
-                                              ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
                                               Visibility="{x:Bind State.Profile.ShowAllFonts, Mode=OneWay, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" />
-                                    <ComboBox ItemsSource="{x:Bind State.Profile.CompleteFontList, Mode=OneWay}"
+                                    <ComboBox ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
+                                              ItemsSource="{x:Bind State.Profile.CompleteFontList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentFontFace, Mode=OneWay}"
                                               SelectionChanged="FontFace_SelectionChanged"
                                               Style="{StaticResource ComboBoxSettingStyle}"
-                                              ItemTemplate="{StaticResource FontFaceComboBoxItemTemplate}"
                                               Visibility="{x:Bind State.Profile.ShowAllFonts, Mode=OneWay}" />
-                                    <CheckBox x:Uid="Profile_FontFaceShowAllFonts"
+                                    <CheckBox x:Name="ShowAllFontsCheckbox"
-                                              x:Name="ShowAllFontsCheckbox"
+                                              x:Uid="Profile_FontFaceShowAllFonts"
                                               IsChecked="{x:Bind State.Profile.ShowAllFonts, Mode=TwoWay}"
                                               IsEnabled="{x:Bind State.Profile.UsingMonospaceFont, Mode=OneWay}" />
                                 </StackPanel>
@@ -263,58 +291,58 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                             <!--  Font Size  -->
                             <local:SettingContainer x:Uid="Profile_FontSize"
-                                                    HasSettingValue="{x:Bind State.Profile.HasFontSize, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearFontSize}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasFontSize, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.FontSizeOverrideSource, Mode=OneWay}">
-                                <muxc:NumberBox Value="{x:Bind State.Profile.FontSize, Mode=TwoWay}"
+                                <muxc:NumberBox AcceptsExpression="False"
-                                                Style="{StaticResource NumberBoxSettingStyle}"
+                                                LargeChange="10"
-                                                AcceptsExpression="False"
-                                                Minimum="1"
                                                 Maximum="128"
+                                                Minimum="1"
                                                 SmallChange="1"
-                                                LargeChange="10"/>
+                                                Style="{StaticResource NumberBoxSettingStyle}"
+                                                Value="{x:Bind State.Profile.FontSize, Mode=TwoWay}" />
                             </local:SettingContainer>
 
                             <!--  Font Weight  -->
-                            <local:SettingContainer x:Uid="Profile_FontWeight"
+                            <local:SettingContainer x:Name="FontWeightContainer"
-                                                    x:Name="FontWeightContainer"
+                                                    x:Uid="Profile_FontWeight"
-                                                    HasSettingValue="{x:Bind State.Profile.HasFontWeight, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearFontWeight}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasFontWeight, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.FontWeightOverrideSource, Mode=OneWay}">
                                 <StackPanel>
                                     <ComboBox x:Name="FontWeightComboBox"
+                                              ItemTemplate="{StaticResource EnumComboBoxItemTemplate}"
                                               ItemsSource="{x:Bind FontWeightList, Mode=OneWay}"
                                               SelectedItem="{x:Bind CurrentFontWeight, Mode=TwoWay}"
-                                              ItemTemplate="{StaticResource EnumComboBoxItemTemplate}"
                                               Style="{StaticResource ComboBoxSettingStyle}" />
 
                                     <!--  Custom Font Weight Control  -->
                                     <Grid Margin="0,10,0,0"
-                                          Visibility="{x:Bind IsCustomFontWeight, Mode=OneWay}"
+                                          Style="{StaticResource CustomSliderControlGridStyle}"
-                                          Style="{StaticResource CustomSliderControlGridStyle}">
+                                          Visibility="{x:Bind IsCustomFontWeight, Mode=OneWay}">
                                         <Grid.ColumnDefinitions>
                                             <ColumnDefinition Width="*" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
                                         <Slider x:Name="FontWeightSlider"
                                                 Grid.Column="0"
-                                                Minimum="0" Maximum="1000"
+                                                Maximum="1000"
-                                                TickFrequency="50" TickPlacement="Outside"
+                                                Minimum="0"
-                                                Value="{x:Bind State.Profile.FontWeight,
+                                                TickFrequency="50"
-                                                        Converter={StaticResource FontWeightConverter},
+                                                TickPlacement="Outside"
-                                                        Mode=TwoWay}"/>
+                                                Value="{x:Bind State.Profile.FontWeight, Converter={StaticResource FontWeightConverter}, Mode=TwoWay}" />
                                         <TextBlock Grid.Column="1"
-                                                   Text="{Binding ElementName=FontWeightSlider, Path=Value, Mode=OneWay}"
+                                                   Margin="10,0,0,0"
                                                    Style="{StaticResource SliderValueLabelStyle}"
-                                                   Margin="10,0,0,0"/>
+                                                   Text="{Binding ElementName=FontWeightSlider, Path=Value, Mode=OneWay}" />
                                     </Grid>
                                 </StackPanel>
                             </local:SettingContainer>
 
                             <!--  Retro Terminal Effect  -->
                             <local:SettingContainer x:Uid="Profile_RetroTerminalEffect"
-                                                    HasSettingValue="{x:Bind State.Profile.HasRetroTerminalEffect, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearRetroTerminalEffect}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasRetroTerminalEffect, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.RetroTerminalEffectOverrideSource, Mode=OneWay}">
                                 <ToggleSwitch IsOn="{x:Bind State.Profile.RetroTerminalEffect, Mode=TwoWay}" />
                             </local:SettingContainer>
@@ -322,23 +350,24 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                         <!--  Grouping: Cursor  -->
                         <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_CursorHeader" Style="{StaticResource SubtitleTextBlockStyle}"/>
+                            <TextBlock x:Uid="Profile_CursorHeader"
+                                       Style="{StaticResource SubtitleTextBlockStyle}" />
 
                             <!--  Cursor Shape  -->
                             <local:SettingContainer x:Uid="Profile_CursorShape"
-                                                    HasSettingValue="{x:Bind State.Profile.HasCursorShape, Mode=OneWay}"
+                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearCursorShape}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.CursorShapeOverrideSource, Mode=OneWay}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasCursorShape, Mode=OneWay}"
-                                                    Margin="0">
+                                                    SettingOverrideSource="{x:Bind State.Profile.CursorShapeOverrideSource, Mode=OneWay}">
-                                <muxc:RadioButtons ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
+                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                                   SelectedItem="{x:Bind CurrentCursorShape, Mode=TwoWay}"
+                                                   ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
-                                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                                   SelectedItem="{x:Bind CurrentCursorShape, Mode=TwoWay}" />
                             </local:SettingContainer>
 
                             <!--  Cursor Height  -->
                             <local:SettingContainer x:Uid="Profile_CursorHeight"
-                                                    HasSettingValue="{x:Bind State.Profile.HasCursorHeight, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearCursorHeight}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasCursorHeight, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.CursorHeightOverrideSource, Mode=OneWay}"
                                                     Visibility="{x:Bind IsVintageCursor, Mode=OneWay}">
                                 <Grid Style="{StaticResource CustomSliderControlGridStyle}">
@@ -348,58 +377,59 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     </Grid.ColumnDefinitions>
                                     <Slider x:Name="CursorHeightSlider"
                                             Grid.Column="0"
-                                            Minimum="1"
                                             Maximum="100"
+                                            Minimum="1"
                                             Value="{x:Bind State.Profile.CursorHeight, Mode=TwoWay}" />
                                     <TextBlock Grid.Column="1"
-                                               Text="{Binding ElementName=CursorHeightSlider, Path=Value, Mode=OneWay}"
+                                               Style="{StaticResource SliderValueLabelStyle}"
-                                               Style="{StaticResource SliderValueLabelStyle}"/>
+                                               Text="{Binding ElementName=CursorHeightSlider, Path=Value, Mode=OneWay}" />
                                 </Grid>
                             </local:SettingContainer>
                         </StackPanel>
 
                         <!--  Grouping: Background  -->
                         <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_BackgroundHeader" Style="{StaticResource SubtitleTextBlockStyle}"/>
+                            <TextBlock x:Uid="Profile_BackgroundHeader"
+                                       Style="{StaticResource SubtitleTextBlockStyle}" />
 
                             <!--  Background Image  -->
-                            <local:SettingContainer x:Uid="Profile_BackgroundImage"
+                            <local:SettingContainer x:Name="BackgroundImageContainer"
-                                                    x:Name="BackgroundImageContainer"
+                                                    x:Uid="Profile_BackgroundImage"
-                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImagePath, Mode=OneWay}"
+                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImagePath}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImagePathOverrideSource, Mode=OneWay}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImagePath, Mode=OneWay}"
-                                                    Margin="0">
+                                                    SettingOverrideSource="{x:Bind State.Profile.BackgroundImagePathOverrideSource, Mode=OneWay}">
                                 <StackPanel Orientation="Vertical">
                                     <StackPanel Orientation="Horizontal">
-                                        <TextBox Text="{x:Bind State.Profile.BackgroundImagePath, Mode=TwoWay, Converter={StaticResource DesktopWallpaperToEmptyStringConverter}}"
+                                        <TextBox IsEnabled="{x:Bind State.Profile.BackgroundImagePath, Mode=OneWay, Converter={StaticResource StringIsNotDesktopConverter}}"
-                                                 IsEnabled="{x:Bind State.Profile.BackgroundImagePath, Mode=OneWay, Converter={StaticResource StringIsNotDesktopConverter}}"
+                                                 Style="{StaticResource TextBoxSettingStyle}"
-                                                 Style="{StaticResource TextBoxSettingStyle}"/>
+                                                 Text="{x:Bind State.Profile.BackgroundImagePath, Mode=TwoWay, Converter={StaticResource DesktopWallpaperToEmptyStringConverter}}" />
                                         <Button x:Uid="Profile_BackgroundImageBrowse"
                                                 Click="BackgroundImage_Click"
                                                 IsEnabled="{x:Bind State.Profile.BackgroundImagePath, Mode=OneWay, Converter={StaticResource StringIsNotDesktopConverter}}"
                                                 Style="{StaticResource BrowseButtonStyle}" />
                                     </StackPanel>
-                                    <CheckBox x:Uid="Profile_UseDesktopImage"
+                                    <CheckBox x:Name="UseDesktopImageCheckBox"
-                                              x:Name="UseDesktopImageCheckBox"
+                                              x:Uid="Profile_UseDesktopImage"
                                               IsChecked="{x:Bind State.Profile.UseDesktopBGImage, Mode=TwoWay}" />
                                 </StackPanel>
                             </local:SettingContainer>
 
                             <!--  Background Image Stretch Mode  -->
                             <local:SettingContainer x:Uid="Profile_BackgroundImageStretchMode"
-                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageStretchMode, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageStretchMode}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageStretchMode, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.BackgroundImageStretchModeOverrideSource, Mode=OneWay}"
                                                     Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
-                                <muxc:RadioButtons ItemsSource="{x:Bind BackgroundImageStretchModeList, Mode=OneWay}"
+                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                                   SelectedItem="{x:Bind CurrentBackgroundImageStretchMode, Mode=TwoWay}"
+                                                   ItemsSource="{x:Bind BackgroundImageStretchModeList, Mode=OneWay}"
-                                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                                   SelectedItem="{x:Bind CurrentBackgroundImageStretchMode, Mode=TwoWay}" />
                             </local:SettingContainer>
 
                             <!--  Background Image Alignment  -->
                             <local:SettingContainer x:Uid="Profile_BackgroundImageAlignment"
-                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageAlignment, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageAlignment}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageAlignment, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
                                                     Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
                                 <Grid HorizontalAlignment="Left">
@@ -415,7 +445,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     </Grid.ColumnDefinitions>
 
                                     <Grid.Resources>
-                                        <Style TargetType="ToggleButton" BasedOn="{StaticResource DefaultToggleButtonStyle}">
+                                        <Style BasedOn="{StaticResource DefaultToggleButtonStyle}"
+                                               TargetType="ToggleButton">
                                             <Setter Property="Margin" Value="2" />
                                             <Setter Property="Width" Value="40" />
                                             <Setter Property="Height" Value="40" />
@@ -424,48 +455,57 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     </Grid.Resources>
 
                                     <!--  Top Row  -->
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentTopLeft"
+                                    <ToggleButton x:Name="BIAlign_TopLeft"
-                                                  x:Name="BIAlign_TopLeft"
+                                                  x:Uid="Profile_BackgroundImageAlignmentTopLeft"
-                                                  Grid.Row="0" Grid.Column="0"
+                                                  Grid.Row="0"
+                                                  Grid.Column="0"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Left (0x01)  -->
                                             <x:Int32>17</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE744;" RenderTransformOrigin="0.5,0.5">
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xE744;"
+                                                      RenderTransformOrigin="0.5,0.5">
                                                 <FontIcon.RenderTransform>
                                                     <RotateTransform Angle="90" />
                                                 </FontIcon.RenderTransform>
                                             </FontIcon>
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentTop"
+                                    <ToggleButton x:Name="BIAlign_Top"
-                                                  x:Name="BIAlign_Top"
+                                                  x:Uid="Profile_BackgroundImageAlignmentTop"
-                                                  Grid.Row="0" Grid.Column="1"
+                                                  Grid.Row="0"
+                                                  Grid.Column="1"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Center (0x00)  -->
                                             <x:Int32>16</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE745;" RenderTransformOrigin="0.5,0.5">
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xE745;"
+                                                      RenderTransformOrigin="0.5,0.5">
                                                 <FontIcon.RenderTransform>
                                                     <RotateTransform Angle="180" />
                                                 </FontIcon.RenderTransform>
                                             </FontIcon>
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentTopRight"
+                                    <ToggleButton x:Name="BIAlign_TopRight"
-                                                  x:Name="BIAlign_TopRight"
+                                                  x:Uid="Profile_BackgroundImageAlignmentTopRight"
-                                                  Grid.Row="0" Grid.Column="2"
+                                                  Grid.Row="0"
+                                                  Grid.Column="2"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Right (0x02)  -->
                                             <x:Int32>18</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA5F;" RenderTransformOrigin="0.5,0.5">
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xEA5F;"
+                                                      RenderTransformOrigin="0.5,0.5">
                                                 <FontIcon.RenderTransform>
                                                     <RotateTransform Angle="270" />
                                                 </FontIcon.RenderTransform>
@@ -474,88 +514,100 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     </ToggleButton>
 
                                     <!--  Middle Row  -->
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentLeft"
+                                    <ToggleButton x:Name="BIAlign_Left"
-                                                  x:Name="BIAlign_Left"
+                                                  x:Uid="Profile_BackgroundImageAlignmentLeft"
-                                                  Grid.Row="1" Grid.Column="0"
+                                                  Grid.Row="1"
+                                                  Grid.Column="0"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Left (0x01)  -->
                                             <x:Int32>1</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE746;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xE746;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentCenter"
+                                    <ToggleButton x:Name="BIAlign_Center"
-                                                  x:Name="BIAlign_Center"
+                                                  x:Uid="Profile_BackgroundImageAlignmentCenter"
-                                                  Grid.Row="1" Grid.Column="1"
+                                                  Grid.Row="1"
+                                                  Grid.Column="1"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Center (0x00)  -->
                                             <x:Int32>0</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF16E;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xF16E;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentRight"
+                                    <ToggleButton x:Name="BIAlign_Right"
-                                                  x:Name="BIAlign_Right"
+                                                  x:Uid="Profile_BackgroundImageAlignmentRight"
-                                                  Grid.Row="1" Grid.Column="2"
+                                                  Grid.Row="1"
+                                                  Grid.Column="2"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Right (0x02)  -->
                                             <x:Int32>2</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA61;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xEA61;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
 
                                     <!--  Bottom Row  -->
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentBottomLeft"
+                                    <ToggleButton x:Name="BIAlign_BottomLeft"
-                                                  x:Name="BIAlign_BottomLeft"
+                                                  x:Uid="Profile_BackgroundImageAlignmentBottomLeft"
-                                                  Grid.Row="2" Grid.Column="0"
+                                                  Grid.Row="2"
+                                                  Grid.Column="0"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Left (0x01)  -->
                                             <x:Int32>33</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE744;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xE744;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentBottom"
+                                    <ToggleButton x:Name="BIAlign_Bottom"
-                                                  x:Name="BIAlign_Bottom"
+                                                  x:Uid="Profile_BackgroundImageAlignmentBottom"
-                                                  Grid.Row="2" Grid.Column="1"
+                                                  Grid.Row="2"
+                                                  Grid.Column="1"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Center (0x00)  -->
                                             <x:Int32>32</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE745;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xE745;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
-                                    <ToggleButton x:Uid="Profile_BackgroundImageAlignmentBottomRight"
+                                    <ToggleButton x:Name="BIAlign_BottomRight"
-                                                  x:Name="BIAlign_BottomRight"
+                                                  x:Uid="Profile_BackgroundImageAlignmentBottomRight"
-                                                  Grid.Row="2" Grid.Column="2"
+                                                  Grid.Row="2"
+                                                  Grid.Column="2"
                                                   Click="BIAlignment_Click">
                                         <ToggleButton.Tag>
                                             <!--  ConvergedAlignment: Vertical_Top (0x20) | Horizontal_Right (0x02)  -->
                                             <x:Int32>34</x:Int32>
                                         </ToggleButton.Tag>
                                         <ToggleButton.Content>
-                                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA5F;"/>
+                                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                                                      Glyph="&#xEA5F;" />
                                         </ToggleButton.Content>
                                     </ToggleButton>
                                 </Grid>
                             </local:SettingContainer>
 
                             <!--  Background Image Opacity  -->
-                            <local:SettingContainer x:Uid="Profile_BackgroundImageOpacity"
+                            <local:SettingContainer x:Name="BackgroundImageOpacityContainer"
-                                                    x:Name="BackgroundImageOpacityContainer"
+                                                    x:Uid="Profile_BackgroundImageOpacity"
-                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageOpacity, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearBackgroundImageOpacity}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasBackgroundImageOpacity, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.BackgroundImageOpacityOverrideSource, Mode=OneWay}"
                                                     Visibility="{x:Bind State.Profile.BackgroundImageSettingsVisible, Mode=OneWay}">
                                 <Grid Style="{StaticResource CustomSliderControlGridStyle}">
@@ -567,31 +619,32 @@ the MIT License. See LICENSE in the project root for license information. -->
                                             Grid.Column="0"
                                             Value="{x:Bind State.Profile.BackgroundImageOpacity, Converter={StaticResource PercentageConverter}, Mode=TwoWay}" />
                                     <TextBlock Grid.Column="1"
-                                               Text="{Binding ElementName=BIOpacitySlider, Path=Value, Mode=OneWay}"
+                                               Style="{StaticResource SliderValueLabelStyle}"
-                                               Style="{StaticResource SliderValueLabelStyle}"/>
+                                               Text="{Binding ElementName=BIOpacitySlider, Path=Value, Mode=OneWay}" />
                                 </Grid>
                             </local:SettingContainer>
                         </StackPanel>
 
                         <!--  Grouping: Acrylic  -->
                         <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_AcrylicHeader" Style="{StaticResource SubtitleTextBlockStyle}"/>
+                            <TextBlock x:Uid="Profile_AcrylicHeader"
+                                       Style="{StaticResource SubtitleTextBlockStyle}" />
 
                             <!--  Use Acrylic  -->
                             <local:SettingContainer x:Uid="Profile_UseAcrylic"
-                                                    HasSettingValue="{x:Bind State.Profile.HasUseAcrylic, Mode=OneWay}"
+                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearUseAcrylic}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.UseAcrylicOverrideSource, Mode=OneWay}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasUseAcrylic, Mode=OneWay}"
-                                                    Margin="0">
+                                                    SettingOverrideSource="{x:Bind State.Profile.UseAcrylicOverrideSource, Mode=OneWay}">
                                 <ToggleSwitch x:Name="UseAcrylicToggleSwitch"
                                               IsOn="{x:Bind State.Profile.UseAcrylic, Mode=TwoWay}" />
                             </local:SettingContainer>
 
                             <!--  Acrylic Opacity  -->
-                            <local:SettingContainer x:Uid="Profile_AcrylicOpacity"
+                            <local:SettingContainer x:Name="AcrylicOpacityContainer"
-                                                    x:Name="AcrylicOpacityContainer"
+                                                    x:Uid="Profile_AcrylicOpacity"
-                                                    HasSettingValue="{x:Bind State.Profile.HasAcrylicOpacity, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearAcrylicOpacity}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasAcrylicOpacity, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.AcrylicOpacityOverrideSource, Mode=OneWay}"
                                                     Visibility="{Binding ElementName=UseAcrylicToggleSwitch, Path=IsOn, Mode=OneWay}">
                                 <StackPanel x:Name="AcrylicOpacityControl">
@@ -604,8 +657,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                                                 Grid.Column="0"
                                                 Value="{x:Bind State.Profile.AcrylicOpacity, Converter={StaticResource PercentageConverter}, Mode=TwoWay}" />
                                         <TextBlock Grid.Column="1"
-                                                   Text="{Binding ElementName=AcrylicOpacitySlider, Path=Value, Mode=OneWay}"
+                                                   Style="{StaticResource SliderValueLabelStyle}"
-                                                   Style="{StaticResource SliderValueLabelStyle}"/>
+                                                   Text="{Binding ElementName=AcrylicOpacitySlider, Path=Value, Mode=OneWay}" />
                                     </Grid>
                                 </StackPanel>
                             </local:SettingContainer>
@@ -613,14 +666,15 @@ the MIT License. See LICENSE in the project root for license information. -->
 
                         <!--  Grouping: Window  -->
                         <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_WindowHeader" Style="{StaticResource SubtitleTextBlockStyle}"/>
+                            <TextBlock x:Uid="Profile_WindowHeader"
+                                       Style="{StaticResource SubtitleTextBlockStyle}" />
 
                             <!--  Padding  -->
                             <local:SettingContainer x:Uid="Profile_Padding"
-                                                    HasSettingValue="{x:Bind State.Profile.HasPadding, Mode=OneWay}"
+                                                    Margin="0"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearPadding}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.PaddingOverrideSource, Mode=OneWay}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasPadding, Mode=OneWay}"
-                                                    Margin="0">
+                                                    SettingOverrideSource="{x:Bind State.Profile.PaddingOverrideSource, Mode=OneWay}">
                                 <Grid Style="{StaticResource CustomSliderControlGridStyle}">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="*" />
@@ -630,19 +684,19 @@ the MIT License. See LICENSE in the project root for license information. -->
                                             Grid.Column="0"
                                             Value="{x:Bind State.Profile.Padding, Converter={StaticResource PaddingConverter}, Mode=TwoWay}" />
                                     <TextBlock Grid.Column="1"
-                                               Text="{Binding ElementName=PaddingSlider, Path=Value, Mode=OneWay}"
+                                               Style="{StaticResource SliderValueLabelStyle}"
-                                               Style="{StaticResource SliderValueLabelStyle}"/>
+                                               Text="{Binding ElementName=PaddingSlider, Path=Value, Mode=OneWay}" />
                                 </Grid>
                             </local:SettingContainer>
 
                             <!--  Scrollbar Visibility  -->
                             <local:SettingContainer x:Uid="Profile_ScrollbarVisibility"
-                                                    HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
                                                     ClearSettingValue="{x:Bind State.Profile.ClearScrollState}"
+                                                    HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
                                                     SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}">
-                                <muxc:RadioButtons ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
+                                <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                                   SelectedItem="{x:Bind CurrentScrollState, Mode=TwoWay}"
+                                                   ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
-                                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                                   SelectedItem="{x:Bind CurrentScrollState, Mode=TwoWay}" />
                             </local:SettingContainer>
                         </StackPanel>
                     </StackPanel>
@@ -655,69 +709,69 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <StackPanel Style="{StaticResource PivotStackStyle}">
                         <!--  Suppress Application Title  -->
                         <local:SettingContainer x:Uid="Profile_SuppressApplicationTitle"
-                                                HasSettingValue="{x:Bind State.Profile.HasSuppressApplicationTitle, Mode=OneWay}"
+                                                Margin="0"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearSuppressApplicationTitle}"
-                                                SettingOverrideSource="{x:Bind State.Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}"
+                                                HasSettingValue="{x:Bind State.Profile.HasSuppressApplicationTitle, Mode=OneWay}"
-                                                Margin="0">
+                                                SettingOverrideSource="{x:Bind State.Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}">
                             <ToggleSwitch IsOn="{x:Bind State.Profile.SuppressApplicationTitle, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Antialiasing Mode  -->
                         <local:SettingContainer x:Uid="Profile_AntialiasingMode"
-                                                HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearAntialiasingMode}"
+                                                HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}">
-                            <muxc:RadioButtons ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
+                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                               SelectedItem="{x:Bind CurrentAntiAliasingMode, Mode=TwoWay}"
+                                               ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
-                                               ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                               SelectedItem="{x:Bind CurrentAntiAliasingMode, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  AltGr Aliasing  -->
                         <local:SettingContainer x:Uid="Profile_AltGrAliasing"
-                                                HasSettingValue="{x:Bind State.Profile.HasAltGrAliasing, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearAltGrAliasing}"
+                                                HasSettingValue="{x:Bind State.Profile.HasAltGrAliasing, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.AltGrAliasingOverrideSource, Mode=OneWay}">
                             <ToggleSwitch IsOn="{x:Bind State.Profile.AltGrAliasing, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Snap On Input  -->
                         <local:SettingContainer x:Uid="Profile_SnapOnInput"
-                                                HasSettingValue="{x:Bind State.Profile.HasSnapOnInput, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearSnapOnInput}"
+                                                HasSettingValue="{x:Bind State.Profile.HasSnapOnInput, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.SnapOnInputOverrideSource, Mode=OneWay}">
                             <ToggleSwitch IsOn="{x:Bind State.Profile.SnapOnInput, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  History Size  -->
                         <local:SettingContainer x:Uid="Profile_HistorySize"
-                                                HasSettingValue="{x:Bind State.Profile.HasHistorySize, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearHistorySize}"
+                                                HasSettingValue="{x:Bind State.Profile.HasHistorySize, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.HistorySizeOverrideSource, Mode=OneWay}">
-                            <muxc:NumberBox Value="{x:Bind State.Profile.HistorySize, Mode=TwoWay}"
+                            <muxc:NumberBox LargeChange="100"
-                                            Style="{StaticResource NumberBoxSettingStyle}"
                                             Minimum="0"
                                             SmallChange="10"
-                                            LargeChange="100"/>
+                                            Style="{StaticResource NumberBoxSettingStyle}"
+                                            Value="{x:Bind State.Profile.HistorySize, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Close On Exit  -->
                         <local:SettingContainer x:Uid="Profile_CloseOnExit"
-                                                HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearCloseOnExit}"
+                                                HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}">
-                            <muxc:RadioButtons ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
+                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                               SelectedItem="{x:Bind CurrentCloseOnExitMode, Mode=TwoWay}"
+                                               ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
-                                               ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                               SelectedItem="{x:Bind CurrentCloseOnExitMode, Mode=TwoWay}" />
                         </local:SettingContainer>
 
                         <!--  Bell Style  -->
                         <local:SettingContainer x:Uid="Profile_BellStyle"
-                                                HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
                                                 ClearSettingValue="{x:Bind State.Profile.ClearBellStyle}"
+                                                HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
                                                 SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}">
-                            <muxc:RadioButtons ItemsSource="{x:Bind BellStyleList, Mode=OneWay}"
+                            <muxc:RadioButtons ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                               SelectedItem="{x:Bind CurrentBellStyle, Mode=TwoWay}"
+                                               ItemsSource="{x:Bind BellStyleList, Mode=OneWay}"
-                                               ItemTemplate="{StaticResource EnumRadioButtonTemplate}"/>
+                                               SelectedItem="{x:Bind CurrentBellStyle, Mode=TwoWay}" />
                         </local:SettingContainer>
                     </StackPanel>
                 </ScrollViewer>

src/cascadia/TerminalSettingsEditor/Rendering.xaml

@@ -1,11 +1,12 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<Page
+    the MIT License. See LICENSE in the project root for license information.
-    x:Class="Microsoft.Terminal.Settings.Editor.Rendering"
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Rendering"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 

src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml

@@ -1,19 +1,22 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+<!--
-the MIT License. See LICENSE in the project root for license information. -->
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-<ResourceDictionary
+    the MIT License. See LICENSE in the project root for license information.
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+-->
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                    xmlns:local="using:Microsoft.Terminal.Settings.Editor"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     mc:Ignorable="d">
 
-    <Style x:Key="SettingContainerHeaderStyle" TargetType="StackPanel">
+    <Style x:Key="SettingContainerHeaderStyle"
+           TargetType="StackPanel">
         <Setter Property="Orientation" Value="Horizontal" />
         <Setter Property="Margin" Value="0,0,0,4" />
     </Style>
 
-    <Style x:Key="SettingContainerResetButtonStyle" TargetType="Button">
+    <Style x:Key="SettingContainerResetButtonStyle"
+           TargetType="Button">
         <Setter Property="Margin" Value="5,0,0,0" />
         <Setter Property="Height" Value="19" />
         <Setter Property="Width" Value="19" />
@@ -21,7 +24,8 @@ the MIT License. See LICENSE in the project root for license information. -->
         <Setter Property="Background" Value="Transparent" />
     </Style>
 
-    <Style x:Key="SettingContainerFontIconStyle" TargetType="FontIcon">
+    <Style x:Key="SettingContainerFontIconStyle"
+           TargetType="FontIcon">
         <Setter Property="Foreground" Value="{StaticResource SystemAccentColor}" />
         <Setter Property="FontSize" Value="14" />
         <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />

src/cascadia/WpfTerminalControl/TerminalControl.xaml

@@ -1,19 +1,23 @@
-<UserControl x:Class="Microsoft.Terminal.Wpf.TerminalControl"
+<UserControl x:Class="Microsoft.Terminal.Wpf.TerminalControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Microsoft.Terminal.Wpf"
-             mc:Ignorable="d" 
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             d:DesignHeight="450" d:DesignWidth="800"
+             x:Name="terminalUserControl"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
              Focusable="True"
-             x:Name="terminalUserControl">
+             mc:Ignorable="d">
     <Grid x:Name="terminalGrid">
         <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
         <local:TerminalContainer x:Name="termContainer" />
-        <ScrollBar x:Name="scrollbar" Scroll="Scrollbar_Scroll" SmallChange="1" Grid.Column="1" />
+        <ScrollBar x:Name="scrollbar"
+                   Grid.Column="1"
+                   Scroll="Scrollbar_Scroll"
+                   SmallChange="1" />
     </Grid>
 </UserControl>

src/cascadia/WpfTerminalTestNetCore/App.xaml

@@ -1,9 +1,7 @@
-<Application x:Class="WpfTerminalTestNetCore.App"
+<Application x:Class="WpfTerminalTestNetCore.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:WpfTerminalTestNetCore"
              StartupUri="MainWindow.xaml">
-    <Application.Resources>
+    <Application.Resources />
-         
-    </Application.Resources>
 </Application>

src/cascadia/WpfTerminalTestNetCore/MainWindow.xaml

@@ -1,13 +1,16 @@
-<Window x:Class="WpfTerminalTestNetCore.MainWindow"
+<Window x:Class="WpfTerminalTestNetCore.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         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:local="clr-namespace:WpfTerminalTestNetCore"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:term="clr-namespace:Microsoft.Terminal.Wpf;assembly=Microsoft.Terminal.Wpf"
-        mc:Ignorable="d"
+        Title="MainWindow"
-        Title="MainWindow" Height="450" Width="800">
+        Width="800"
+        Height="450"
+        mc:Ignorable="d">
     <Grid>
-	<term:TerminalControl x:Name="Terminal" Focusable="true" />
+        <term:TerminalControl x:Name="Terminal"
+                              Focusable="true" />
     </Grid>
 </Window>

tools/OpenConsole.psm1

@@ -364,8 +364,56 @@ function Invoke-ClangFormat {
 }
 
 #.SYNOPSIS
-# runs code formatting on all c++ files
+# Check that xaml files are formatted correctly. This won't actually
+# format the files - it'll only ensure that they're formatted correctly.
+function Verify-XamlFormat() {
+    $root = Find-OpenConsoleRoot
+    & dotnet tool restore --add-source https://api.nuget.org/v3/index.json
+
+    $xamlsForStyler = (git ls-files **/*.xaml) -join ","
+    dotnet tool run xstyler -- -c "$root\XamlStyler.json" -f "$xamlsForStyler" --passive
+
+    if ($lastExitCode -eq 1) {
+        throw "Xaml formatting bad, run Invoke-XamlFormat on branch"
+    }
+
+}
+
+#.SYNOPSIS
+# run xstyler on xaml files. Note that this will `touch` every file,
+# even if there's nothing to do for a given file.
+function Invoke-XamlFormat() {
+    $root = Find-OpenConsoleRoot
+    & dotnet tool restore --add-source https://api.nuget.org/v3/index.json
+
+    # xstyler lets you pass multiple xaml files in the -f param if they're all
+    # joined by commas. The `git ls-files` command will only get us the .xaml
+    # files actually in the git repo, ignoring ones in "Generated Files/"
+    $xamlsForStyler = (git ls-files **/*.xaml) -join ","
+    dotnet tool run xstyler -- -c "$root\XamlStyler.json" -f "$xamlsForStyler"
+
+    # Strip BOMs from all the .xaml files
+    $xamls = (git ls-files **/*.xaml)
+    foreach ($file in $xamls ) {
+        $content = Get-Content $file
+        [IO.File]::WriteAllLines("$root/$file", $content)
+    }
+}
+
+#.SYNOPSIS
+# runs code formatting on all c++ and .xaml files.
+#
+#.PARAMETER IgnoreXaml
+# When set, don't format XAML files. The CI needs this so
+# Invoke-CheckBadCodeFormatting won't touch all the .xaml files.
 function Invoke-CodeFormat() {
+
+    [CmdletBinding()]
+    Param (
+        [parameter(Mandatory=$false)]
+        [switch]$IgnoreXaml
+    )
+
     $root = Find-OpenConsoleRoot
     & "$root\dep\nuget\nuget.exe" restore "$root\tools\packages.config"
     $clangPackage = ([xml](Get-Content "$root\tools\packages.config")).packages.package | Where-Object id -like "clang-format*"
@@ -373,6 +421,13 @@ function Invoke-CodeFormat() {
     Get-ChildItem -Recurse "$root\src" -Include *.cpp, *.hpp, *.h |
       Where FullName -NotLike "*Generated Files*" |
       Invoke-ClangFormat -ClangFormatPath $clangFormatPath
+
+    if ($IgnoreXaml) {
+        # do nothing
+    }
+    else {
+        Invoke-XamlFormat
+    }
 }
 
-Export-ModuleMember -Function Set-MsbuildDevEnvironment,Invoke-OpenConsoleTests,Invoke-OpenConsoleBuild,Start-OpenConsole,Debug-OpenConsole,Invoke-CodeFormat
+Export-ModuleMember -Function Set-MsbuildDevEnvironment,Invoke-OpenConsoleTests,Invoke-OpenConsoleBuild,Start-OpenConsole,Debug-OpenConsole,Invoke-CodeFormat,Invoke-XamlFormat,Verify-XamlFormat

tools/README.md

@@ -38,9 +38,68 @@ for Linux entrypoint) in your `~` directory.
 
 Likewise, `openps` launches powershell.
 
-## runformat
+## runformat & runxamlformat
 
-`runformat` will format the c++ code to match our coding style.
+`runxamlformat` will format `.xaml` files to match our coding style. `runformat`
+will format the c++ code (and will also call `runxamlformat`). **`runformat`
+should be called before making a new PR**, to ensure that code is formatted
+correctly. If it isn't, the CI will prevent your PR from merging.
+
+The C++ code is formatted with `clang-format`. Many editors have built-in
+support for automatically running clang-format on save.
+
+Our XAML code is formatted with
+[XamlStyler](https://github.com/Xavalon/XamlStyler). I don't have a good way of
+running this on save, but you can add a `git` hook to format before committing
+`.xaml` files. To do so, add the following to your `.git/hooks/pre-commit` file:
+
+```sh
+# XAML Styler - xstyler.exe pre-commit Git Hook
+# Documentation: https://github.com/Xavalon/XamlStyler/wiki
+# Originally from https://github.com/Xavalon/XamlStyler/wiki/Git-Hook
+
+# Define path to xstyler.exe
+XSTYLER_PATH="dotnet tool run xstyler --"
+
+# Define path to XAML Styler configuration
+XSTYLER_CONFIG="../../XamlStyler.json"
+
+echo "Running XAML Styler on committed XAML files"
+git diff --cached --name-only --diff-filter=ACM  | grep -e '\.xaml$' | \
+# Wrap in brackets to preserve variable through loop
+{
+    files=""
+    # Build list of files to pass to xstyler.exe
+    while read FILE; do
+        if [ "$files" == "" ]; then
+            files="$FILE";
+        else
+            files="$files,$FILE";
+        fi
+    done
+
+    if [ "$files" != "" ]; then
+        # Check if external configuration is specified
+        [ -z "$XSTYLER_CONFIG" ] && configParam="" || configParam="-c $XSTYLER_CONFIG"
+
+        # Format XAML files
+        $XSTYLER_PATH -f "$files" $configParam
+
+        for i in $(echo $files | sed "s/,/ /g")
+        do
+            #strip BOM
+            sed -i '1s/^\xEF\xBB\xBF//' $i
+            unix2dos $i
+            # stage updated file
+            git add -u $i
+        done
+    else
+        echo "No XAML files detected in commit"
+    fi
+
+    exit 0
+}
+```
 
 ## testcon, runut, runft
 `runut` will automatically run all of the unit tests through TAEF. `runft` will

tools/runxamlformat.cmd

@@ -0,0 +1,5 @@
+@echo off
+
+rem run xstyler on xaml files
+
+powershell -noprofile "import-module %OPENCON_TOOLS%\openconsole.psm1; Invoke-XamlFormat"