[Build]Use XamlStyler to check XAML formatting (#28643)

* Use XamlStyler to check XAML formatting

* fix spellcheck

* fix

* format XAML FLS, Hosts, ImageResizer, MeasureTool, PowerRename

* format XAML Peek

* exclude settings XAML and make CI pass

* doc

.config/dotnet-tools.json

@@ -7,6 +7,12 @@
             "commands": [
                 "dotnet-consolidate"
             ]
+        },
+        "xamlstyler.console": {
+            "version": "3.2206.4",
+            "commands": [
+              "xstyler"
+            ]
           }
     }
 }

.github/actions/spell-check/expect.txt

@@ -2083,6 +2083,7 @@ vscdb
 vsconfig
 VSCROLL
 vsetq
+VSM
 vsonline
 vstemplate
 VSTHRD
@@ -2229,6 +2230,8 @@ Wubi
 WVC
 Wwan
 Wwanpp
+xamlstyler
+Xavalon
 XAxis
 xbf
 Xbox
@@ -2249,6 +2252,7 @@ XPels
 XPixel
 XResource
 xsi
+xstyler
 XStr
 XUP
 XVIRTUALSCREEN

.pipelines/applyXamlStyling.ps1

@@ -0,0 +1,128 @@
+<#
+    .SYNOPSIS
+    Modify XAML files to adhere to XAML Styler settings.
+
+    .DESCRIPTION
+    The Apply XAML Stying Script can be used to check or modify XAML files with the repo's XAML Styler settings.
+    Learn more about XAML Styler at https://github.com/Xavalon/XamlStyler
+
+    By default, uses git status to check all new or modified files.
+
+    Use "PS> Help .\applyXamlStyling.ps1 -Full" for more details on parameters.
+
+    .PARAMETER LastCommit
+    Runs against last commit vs. current changes
+
+    .PARAMETER Unstaged
+    Runs against unstaged changed files
+
+    .PARAMETER Staged
+    Runs against staged files vs. current changes
+
+    .PARAMETER Main
+    Runs against main vs. current branch
+
+    .PARAMETER Passive
+    Runs a passive check against all files in the repo for the CI
+
+    .EXAMPLE
+    PS> .\applyXamlStyling.ps1 -Main
+#>
+param(
+    [switch]$LastCommit = $false,
+    [switch]$Unstaged = $false,
+    [switch]$Staged = $false,
+    [switch]$Main = $false,
+    [switch]$Passive = $false
+)
+
+Write-Output "Use 'Help .\applyXamlStyling.ps1' for more info or '-Main' to run against all files."
+Write-Output ""
+Write-Output "Restoring dotnet tools..."
+dotnet tool restore
+
+if (-not $Passive)
+{
+    # Look for unstaged changed files by default
+    $gitDiffCommand = "git status -s --porcelain"
+
+    if ($Main)
+    {
+        Write-Output 'Checking Current Branch against `main` Files Only'
+        $branch = git status | Select-String -Pattern "On branch (?<branch>.*)$"
+        if ($null -eq $branch.Matches)
+        {
+            $branch = git status | Select-String -Pattern "HEAD detached at (?<branch>.*)$"
+            if ($null -eq $branch.Matches)
+            {
+                Write-Error 'Don''t know how to fetch branch from `git status`:'
+                git status | Write-Error
+                exit 1
+            }
+        }
+        $branch = $branch.Matches.groups[1].Value
+        $gitDiffCommand = "git diff origin/main $branch --name-only --diff-filter=ACM"
+    }
+    elseif ($Unstaged)
+    {
+        # Look for unstaged files
+        Write-Output "Checking Unstaged Files"
+        $gitDiffCommand = "git diff --name-only --diff-filter=ACM"
+    }
+    elseif ($Staged)
+    {
+        # Look for staged files
+        Write-Output "Checking Staged Files Only"
+        $gitDiffCommand = "git diff --cached --name-only --diff-filter=ACM"
+    }
+    elseif ($LastCommit)
+    {
+        # Look at last commit files
+        Write-Output "Checking the Last Commit's Files Only"
+        $gitDiffCommand = "git diff HEAD^ HEAD --name-only --diff-filter=ACM"
+    }
+    else 
+    {
+        Write-Output "Checking Git Status Files Only"    
+    }
+
+    Write-Output "Running Git Diff: $gitDiffCommand"
+    $files = Invoke-Expression $gitDiffCommand | Select-String -Pattern "\.xaml$"
+
+    if (-not $Passive -and -not $Main -and -not $Unstaged -and -not $Staged -and -not $LastCommit)
+    {
+        # Remove 'status' column of 3 characters at beginning of lines
+        $files = $files | ForEach-Object { $_.ToString().Substring(3) }
+    }
+
+    if ($files.count -gt 0)
+    {
+        dotnet tool run xstyler -c "$PSScriptRoot\..\Settings.XamlStyler" -f $files
+    }
+    else
+    {
+        Write-Output "No XAML Files found to style..."
+    }
+}
+else 
+{
+    Write-Output "Checking all files (passively)"
+    $files = Get-ChildItem -Path "$PSScriptRoot\..\src\*.xaml" -Recurse | Select-Object -ExpandProperty FullName | Where-Object { $_ -notmatch "(\\obj\\)|(\\bin\\)|(\\x64\\)|(\\launcher\\PowerLauncher\\)|(\\launcher\\Wox.Plugin\\)|(\\colorPicker\\ColorPickerUI\\)|(\\editor\\FancyZonesEditor\\)|(\\settings-ui\\Settings.UI\\)" }
+
+    if ($files.count -gt 0)
+    {
+        dotnet tool run xstyler -p -c "$PSScriptRoot\..\Settings.XamlStyler" -f $files
+
+        if ($lastExitCode -eq 1)
+        {
+            Write-Error 'XAML Styling is incorrect, please run `.\.pipelines\applyXamlStyling.ps1 -Main` locally.'
+        }
+
+        # Return XAML Styler Status
+        exit $lastExitCode
+    }
+    else
+    {
+        exit 0
+    }
+}

.pipelines/ci/templates/build-powertoys-steps.yml

@@ -8,7 +8,14 @@ steps:
   clean: true
 
 - task: PowerShell@2
-  displayName: Verifying Nuget package versions for PowerToys.sln
+  displayName: Verify XAML formatting
+  inputs:
+    filePath: '$(build.sourcesdirectory)\.pipelines\applyXamlStyling.ps1'
+    arguments: -Passive
+    pwsh: true
+
+- task: PowerShell@2
+  displayName: Verify Nuget package versions for PowerToys.sln
   inputs:
     filePath: '$(build.sourcesdirectory)\.pipelines\verifyNugetPackages.ps1'
     arguments: -solution '$(build.sourcesdirectory)\PowerToys.sln'
@@ -240,7 +247,7 @@ steps:
       dotnet list $(build.sourcesdirectory)\src\common\Common.UI\Common.UI.csproj package
 
 - task: PowerShell@2
-  displayName: Verifying Notice.md and Nuget packages match
+  displayName: Verify Notice.md and Nuget packages match
   inputs:
     filePath: '$(build.sourcesdirectory)\.pipelines\verifyNoticeMdAgainstNugetPackages.ps1'
     arguments: -path '$(build.sourcesdirectory)\'

Settings.XamlStyler

@@ -0,0 +1,42 @@
+{
+    "AttributesTolerance": 2,
+    "KeepFirstAttributeOnSameLine": false,
+    "MaxAttributeCharactersPerLine": 0,
+    "MaxAttributesPerLine": 1,
+    "NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransform, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter",
+    "SeparateByGroups": false,
+    "AttributeIndentation": 0,
+    "AttributeIndentationStyle": 1,
+    "RemoveDesignTimeReferences":  false,
+    "IgnoreDesignTimeReferencePrefix": 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,
+}

doc/devdocs/style.md

@@ -6,6 +6,7 @@
 
 ## Formatting
 
+- We use [XamlStyler](https://github.com/Xavalon/XamlStyler/) to format XAML files. You can use the [Visual Studio Extension](https://marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler2022) or apply formatting executing `.\.pipelines\applyXamlStyling.ps1 -Main`.
 - We use [`.clang-format`](https://github.com/microsoft/PowerToys/blob/main/src/.clang-format) style file to enable automatic code formatting. You can [easily format source files from Visual Studio](https://devblogs.microsoft.com/cppblog/clangformat-support-in-visual-studio-2017-15-7-preview-1/). For example, `CTRL+K CTRL+D` formats the current document.
 - If you prefer another text editor or have ClangFormat disabled in Visual Studio, you could invoke [`format_sources`](https://github.com/microsoft/PowerToys/blob/main/src/codeAnalysis/format_sources.ps1) powershell script from command line. It gets a list of all currently modified files from `git` and invokes clang-format on them.
 Please note that you should also have `clang-format.exe` in `%PATH%` for it to work. The script can infer the path of `clang-format.exe` version which is shipped with Visual Studio at `%VCINSTALLDIR%\Tools\Llvm\bin\`, if you launch it from the *Native Tools Command Prompt for VS*.

src/modules/FileLocksmith/FileLocksmithUI/FileLocksmithXAML/MainWindow.xaml

@@ -20,7 +20,8 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <Grid x:Name="AppTitleBar"
+        <Grid
+            x:Name="AppTitleBar"
             Height="32"
             ColumnSpacing="16">
             <Grid.ColumnDefinitions>
@@ -32,10 +33,10 @@
             </Grid.ColumnDefinitions>
             <Image
                 Grid.Column="1"
-                Source="../Assets/FileLocksmith/Icon.ico"
-                VerticalAlignment="Center"
                 Width="16"
-                Height="16"/>
+                Height="16"
+                VerticalAlignment="Center"
+                Source="../Assets/FileLocksmith/Icon.ico" />
             <TextBlock
                 x:Name="AppTitleTextBlock"
                 Grid.Column="2"

src/modules/Hosts/Hosts/HostsXAML/MainWindow.xaml

@@ -1,4 +1,4 @@
-<winuiex:WindowEx
+<winuiex:WindowEx
     x:Class="Hosts.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -20,7 +20,10 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <Grid x:Name="titleBar" Height="32" ColumnSpacing="16">
+        <Grid
+            x:Name="titleBar"
+            Height="32"
+            ColumnSpacing="16">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition x:Name="LeftPaddingColumn" Width="0" />
                 <ColumnDefinition x:Name="IconColumn" Width="Auto" />
@@ -29,15 +32,15 @@
             </Grid.ColumnDefinitions>
             <Image
                 Grid.Column="1"
-                Source="../Assets/Hosts/Hosts.ico"
-                VerticalAlignment="Center"
                 Width="16"
-                Height="16"/>
+                Height="16"
+                VerticalAlignment="Center"
+                Source="../Assets/Hosts/Hosts.ico" />
             <TextBlock
                 x:Name="AppTitleTextBlock"
                 Grid.Column="2"
-                Style="{StaticResource CaptionTextBlockStyle}"
+                VerticalAlignment="Center"
-                VerticalAlignment="Center" />
+                Style="{StaticResource CaptionTextBlockStyle}" />
         </Grid>
 
         <views:MainPage Grid.Row="1" />

src/modules/Hosts/Hosts/HostsXAML/Views/MainPage.xaml

@@ -1,4 +1,4 @@
-<Page
+<Page
     x:Class="Hosts.Views.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -169,8 +169,8 @@
                 GotFocus="Entries_GotFocus"
                 IsItemClickEnabled="True"
                 ItemClick="Entries_ItemClick"
-                RightTapped="Entries_RightTapped"
                 ItemsSource="{x:Bind ViewModel.Entries, Mode=TwoWay}"
+                RightTapped="Entries_RightTapped"
                 SelectedItem="{x:Bind ViewModel.Selected, Mode=TwoWay}">
                 <ListView.ContextFlyout>
                     <MenuFlyout>
@@ -180,8 +180,8 @@
                             Icon="Edit">
                             <MenuFlyoutItem.KeyboardAccelerators>
                                 <KeyboardAccelerator
-                                    Modifiers="Control"
                                     Key="E"
+                                    Modifiers="Control"
                                     ScopeOwner="{x:Bind Entries}" />
                             </MenuFlyoutItem.KeyboardAccelerators>
                         </MenuFlyoutItem>
@@ -191,8 +191,8 @@
                             Icon="TwoBars">
                             <MenuFlyoutItem.KeyboardAccelerators>
                                 <KeyboardAccelerator
-                                    Modifiers="Control"
                                     Key="P"
+                                    Modifiers="Control"
                                     ScopeOwner="{x:Bind Entries}" />
                             </MenuFlyoutItem.KeyboardAccelerators>
                         </MenuFlyoutItem>
@@ -218,9 +218,7 @@
                             Click="Delete_Click"
                             Icon="Delete">
                             <MenuFlyoutItem.KeyboardAccelerators>
-                                <KeyboardAccelerator
+                                <KeyboardAccelerator Key="Delete" ScopeOwner="{x:Bind Entries}" />
-                                    Key="Delete"
-                                    ScopeOwner="{x:Bind Entries}" />
                             </MenuFlyoutItem.KeyboardAccelerators>
                         </MenuFlyoutItem>
                     </MenuFlyout>
@@ -232,11 +230,16 @@
                             Background="Transparent"
                             ColumnSpacing="8">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="256"/> <!-- Address -->
+                                <ColumnDefinition Width="256" />
-                                <ColumnDefinition Width="*"/> <!-- Comment -->
+                                <!--  Address  -->
-                                <ColumnDefinition Width="Auto"/> <!-- Status -->
+                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto"/> <!-- Duplicate -->
+                                <!--  Comment  -->
-                                <ColumnDefinition Width="Auto"/> <!-- ToggleSwitch -->
+                                <ColumnDefinition Width="Auto" />
+                                <!--  Status  -->
+                                <ColumnDefinition Width="Auto" />
+                                <!--  Duplicate  -->
+                                <ColumnDefinition Width="Auto" />
+                                <!--  ToggleSwitch  -->
                             </Grid.ColumnDefinitions>
                             <TextBlock
                                 Grid.Column="0"
@@ -371,9 +374,9 @@
                 <InfoBar
                     x:Uid="FileSaveError"
                     Margin="0,8,0,0"
-                    Severity="Error"
-                    Message="{x:Bind ViewModel.ErrorMessage, Mode=TwoWay}"
                     IsOpen="{x:Bind ViewModel.Error, Mode=TwoWay}"
+                    Message="{x:Bind ViewModel.ErrorMessage, Mode=TwoWay}"
+                    Severity="Error"
                     Visibility="{x:Bind ViewModel.Error, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}" />
                 <InfoBar
                     x:Uid="FileChanged"
@@ -397,8 +400,8 @@
         <ContentDialog
             x:Name="EntryDialog"
             x:Uid="EntryDialog"
-            Loaded="ContentDialog_Loaded_ApplyMargin"
             IsPrimaryButtonEnabled="{Binding Valid, Mode=OneWay}"
+            Loaded="ContentDialog_Loaded_ApplyMargin"
             PrimaryButtonStyle="{StaticResource AccentButtonStyle}">
             <ContentDialog.DataContext>
                 <models:Entry />

src/modules/imageresizer/ui/App.xaml

@@ -1,10 +1,11 @@
-<Application x:Class="ImageResizer.App"
+<Application
+    x:Class="ImageResizer.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:m="clr-namespace:ImageResizer.Models"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime"
-             xmlns:v="clr-namespace:ImageResizer.Views"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
-             xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
+    xmlns:v="clr-namespace:ImageResizer.Views">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -12,7 +13,8 @@
                 <ui:ControlsDictionary />
             </ResourceDictionary.MergedDictionaries>
 
-            <ObjectDataProvider x:Key="ResizeFitValues"
+            <ObjectDataProvider
+                x:Key="ResizeFitValues"
                 MethodName="GetValues"
                 ObjectType="sys:Enum">
                 <ObjectDataProvider.MethodParameters>
@@ -20,7 +22,8 @@
                 </ObjectDataProvider.MethodParameters>
             </ObjectDataProvider>
 
-            <ObjectDataProvider x:Key="ResizeUnitValues"
+            <ObjectDataProvider
+                x:Key="ResizeUnitValues"
                 MethodName="GetValues"
                 ObjectType="sys:Enum">
                 <ObjectDataProvider.MethodParameters>

src/modules/imageresizer/ui/Views/InputPage.xaml

@@ -25,7 +25,10 @@
             SelectedIndex="{Binding Settings.SelectedSizeIndex}">
             <ComboBox.Resources>
                 <DataTemplate DataType="{x:Type m:ResizeSize}">
-                    <Grid Margin="2,0,0,0" VerticalAlignment="Center" AutomationProperties.Name="{Binding Name}">
+                    <Grid
+                        Margin="2,0,0,0"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="{Binding Name}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="Auto" />
@@ -67,9 +70,7 @@
 
                 <DataTemplate DataType="{x:Type m:CustomSize}">
                     <Grid VerticalAlignment="Center" AutomationProperties.Name="{Binding Name}">
-                        <TextBlock
+                        <TextBlock FontWeight="SemiBold" Text="{Binding Name}" />
-                            FontWeight="SemiBold"
-                            Text="{Binding Name}" />
                     </Grid>
                 </DataTemplate>
             </ComboBox.Resources>

src/modules/peek/Peek.FilePreviewer/Controls/ArchiveControl.xaml

@@ -1,46 +1,39 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!--  Copyright (c) Microsoft Corporation. All rights reserved.  -->
 <!--  Licensed under the MIT License. See LICENSE in the project root for license information.  -->
 
 <UserControl
     x:Class="Peek.FilePreviewer.Controls.ArchiveControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Peek.FilePreviewer.Controls"
+    xmlns:converters="using:Peek.Common.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Peek.FilePreviewer.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:models="using:Peek.FilePreviewer.Previewers.Archives.Models"
-    xmlns:converters="using:Peek.Common.Converters"
     mc:Ignorable="d">
     <UserControl.Resources>
-        <DataTemplate
+        <DataTemplate x:Key="DirectoryTemplate" x:DataType="models:ArchiveItem">
-            x:Key="DirectoryTemplate"
-            x:DataType="models:ArchiveItem">
             <TreeViewItem
                 AutomationProperties.Name="{x:Bind Name}"
-                ItemsSource="{x:Bind Children}"
+                IsExpanded="{x:Bind IsExpanded}"
-                IsExpanded="{x:Bind IsExpanded}">
+                ItemsSource="{x:Bind Children}">
                 <Grid ColumnSpacing="10">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
                     </Grid.ColumnDefinitions>
                     <Image
+                        Grid.Column="0"
                         Width="16"
                         Height="16"
-                        Grid.Column="0"
                         Source="{x:Bind Icon}" />
-                    <TextBlock
+                    <TextBlock Grid.Column="1" Text="{x:Bind Name}" />
-                        Grid.Column="1"
-                        Text="{x:Bind Name}" />
                 </Grid>
             </TreeViewItem>
         </DataTemplate>
 
-        <DataTemplate
+        <DataTemplate x:Key="FileTemplate" x:DataType="models:ArchiveItem">
-                x:Key="FileTemplate"
+            <TreeViewItem AutomationProperties.Name="{x:Bind Name}">
-                x:DataType="models:ArchiveItem">
-                <TreeViewItem
-                    AutomationProperties.Name="{x:Bind Name}">
                 <Grid ColumnSpacing="10">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto" />
@@ -48,13 +41,11 @@
                         <ColumnDefinition Width="auto" />
                     </Grid.ColumnDefinitions>
                     <Image
+                        Grid.Column="0"
                         Width="16"
                         Height="16"
-                            Grid.Column="0"
                         Source="{x:Bind Icon}" />
-                        <TextBlock
+                    <TextBlock Grid.Column="1" Text="{x:Bind Name}" />
-                            Grid.Column="1"
-                            Text="{x:Bind Name}" />
                     <TextBlock
                         Grid.Column="2"
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"
@@ -75,29 +66,25 @@
             <RowDefinition Height="*" />
             <RowDefinition Height="auto" />
         </Grid.RowDefinitions>
-        <ScrollViewer
+        <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto">
-            Grid.Row="0"
-            HorizontalScrollBarVisibility="Auto">
             <TreeView
                 x:Name="ArchivePreview"
-                ItemsSource="{x:Bind Source, Mode=OneWay}"
+                CanDragItems="False"
-                ItemTemplateSelector="{StaticResource ArchiveItemTemplateSelector}"
-                SelectionMode="None"
                 CanReorderItems="False"
-                CanDragItems="False" />
+                ItemTemplateSelector="{StaticResource ArchiveItemTemplateSelector}"
+                ItemsSource="{x:Bind Source, Mode=OneWay}"
+                SelectionMode="None" />
         </ScrollViewer>
         <Border
             Grid.Row="1"
             MinWidth="300"
+            Margin="16"
+            HorizontalAlignment="Center"
             Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
             BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
-            CornerRadius="8"
+            CornerRadius="8">
-            Margin="16"
+            <Grid Padding="16" ColumnSpacing="16">
-            HorizontalAlignment="Center">
-            <Grid
-                ColumnSpacing="16"
-                Padding="16">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="auto" />
@@ -107,29 +94,29 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock
                     Grid.Column="0"
-                    Text="{x:Bind DirectoryCount, Mode=OneWay}"
-                    IsTextSelectionEnabled="True"
                     VerticalAlignment="Center"
+                    IsTextSelectionEnabled="True"
+                    Text="{x:Bind DirectoryCount, Mode=OneWay}"
                     TextWrapping="Wrap" />
                 <Border
                     Grid.Column="1"
                     BorderBrush="{ThemeResource TextFillColorPrimaryBrush}"
-                    BorderThickness="0 0 1 0" />
+                    BorderThickness="0,0,1,0" />
                 <TextBlock
                     Grid.Column="2"
-                    Text="{x:Bind FileCount, Mode=OneWay}"
-                    IsTextSelectionEnabled="True"
                     VerticalAlignment="Center"
+                    IsTextSelectionEnabled="True"
+                    Text="{x:Bind FileCount, Mode=OneWay}"
                     TextWrapping="Wrap" />
                 <Border
                     Grid.Column="3"
                     BorderBrush="{ThemeResource TextFillColorPrimaryBrush}"
-                    BorderThickness="0 0 1 0" />
+                    BorderThickness="0,0,1,0" />
                 <TextBlock
                     Grid.Column="4"
-                    Text="{x:Bind Size, Mode=OneWay}"
-                    IsTextSelectionEnabled="True"
                     VerticalAlignment="Center"
+                    IsTextSelectionEnabled="True"
+                    Text="{x:Bind Size, Mode=OneWay}"
                     TextWrapping="Wrap" />
             </Grid>
         </Border>

src/modules/peek/Peek.FilePreviewer/Controls/BrowserControl.xaml

@@ -1,22 +1,22 @@
-<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!--  Copyright (c) Microsoft Corporation. All rights reserved.  -->
 <!--  Licensed under the MIT License. See LICENSE in the project root for license information.  -->
 
 <UserControl
     x:Class="Peek.FilePreviewer.Controls.BrowserControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Peek.FilePreviewer.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Peek.FilePreviewer.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
     <Grid>
         <controls:WebView2
             x:Name="PreviewBrowser"
             Loaded="PreviewWV2_Loaded"
-            NavigationStarting="PreviewBrowser_NavigationStarting"
+            NavigationCompleted="PreviewWV2_NavigationCompleted"
-            NavigationCompleted="PreviewWV2_NavigationCompleted" />
+            NavigationStarting="PreviewBrowser_NavigationStarting" />
         <ContentDialog
             x:Name="OpenUriDialog"
             x:Uid="OpenUriDialog"

src/modules/peek/Peek.FilePreviewer/Controls/UnsupportedFilePreview/InformationalPreviewControl.xaml

@@ -1,4 +1,4 @@
-<!--  Copyright (c) Microsoft Corporation and Contributors.  -->
+<!--  Copyright (c) Microsoft Corporation and Contributors.  -->
 <!--  Licensed under the MIT License.  -->
 
 <UserControl

src/modules/peek/Peek.FilePreviewer/FilePreview.xaml

@@ -53,11 +53,11 @@
 
         <controls:ArchiveControl
             x:Name="ArchivePreview"
-            LoadingState="{x:Bind ArchivePreviewer.State, Mode=OneWay}"
-            Source="{x:Bind ArchivePreviewer.Tree, Mode=OneWay}"
-            FileCount="{x:Bind ArchivePreviewer.FileCountText, Mode=OneWay}"
             DirectoryCount="{x:Bind ArchivePreviewer.DirectoryCountText, Mode=OneWay}"
+            FileCount="{x:Bind ArchivePreviewer.FileCountText, Mode=OneWay}"
+            LoadingState="{x:Bind ArchivePreviewer.State, Mode=OneWay}"
             Size="{x:Bind ArchivePreviewer.SizeText, Mode=OneWay}"
+            Source="{x:Bind ArchivePreviewer.Tree, Mode=OneWay}"
             Visibility="{x:Bind IsPreviewVisible(ArchivePreviewer, Previewer.State), Mode=OneWay}" />
 
         <controls:UnsupportedFilePreview

src/modules/peek/Peek.UI/PeekXAML/App.xaml

@@ -1,4 +1,4 @@
-<!-- Copyright (c) Microsoft Corporation and Contributors. -->
+<!--  Copyright (c) Microsoft Corporation and Contributors.  -->
 <!--  Licensed under the MIT License.  -->
 
 <Application

src/modules/peek/Peek.UI/PeekXAML/Views/TitleBar.xaml

@@ -1,4 +1,4 @@
-<!--  Copyright (c) Microsoft Corporation and Contributors.  -->
+<!--  Copyright (c) Microsoft Corporation and Contributors.  -->
 <!--  Licensed under the MIT License.  -->
 
 <UserControl
@@ -7,8 +7,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Peek.UI.Views"
-    FlowDirection="{x:Bind TitleBarFlowDirection, Mode=OneWay}"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    FlowDirection="{x:Bind TitleBarFlowDirection, Mode=OneWay}"
     mc:Ignorable="d">
 
     <Grid x:Name="TitleBarRootContainer" Height="48">

src/modules/powerrename/PowerRenameUILib/PowerRenameXAML/App.xaml

@@ -34,7 +34,6 @@
                                 x:Name="RootGrid"
                                 Background="{ThemeResource AccentButtonBackground}"
                                 CornerRadius="{TemplateBinding CornerRadius}">
-
                                 <Grid.Resources>
                                     <!--  Override the style of the inner buttons so that they don't affect background/foreground/border colors  -->
                                     <Style TargetType="Button">
@@ -52,6 +51,18 @@
                                             <Setter.Value>
                                                 <ControlTemplate TargetType="Button">
                                                     <Grid x:Name="RootGrid" Background="Transparent">
+                                                        <ContentPresenter
+                                                            x:Name="ContentPresenter"
+                                                            Padding="{TemplateBinding Padding}"
+                                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                            AnimatedIcon.State="Normal"
+                                                            AutomationProperties.AccessibilityView="Raw"
+                                                            BorderBrush="{TemplateBinding BorderBrush}"
+                                                            BorderThickness="{TemplateBinding BorderThickness}"
+                                                            Content="{TemplateBinding Content}"
+                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                            ContentTransitions="{TemplateBinding ContentTransitions}" />
                                                         <VisualStateManager.VisualStateGroups>
                                                             <VisualStateGroup x:Name="CommonStates">
                                                                 <VisualState x:Name="Normal" />
@@ -75,19 +86,6 @@
                                                                 </VisualState>
                                                             </VisualStateGroup>
                                                         </VisualStateManager.VisualStateGroups>
-
-                                                        <ContentPresenter
-                                                            x:Name="ContentPresenter"
-                                                            Padding="{TemplateBinding Padding}"
-                                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                                            AnimatedIcon.State="Normal"
-                                                            AutomationProperties.AccessibilityView="Raw"
-                                                            BorderBrush="{TemplateBinding BorderBrush}"
-                                                            BorderThickness="{TemplateBinding BorderThickness}"
-                                                            Content="{TemplateBinding Content}"
-                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                                                            ContentTransitions="{TemplateBinding ContentTransitions}" />
                                                     </Grid>
                                                 </ControlTemplate>
                                             </Setter.Value>
@@ -104,6 +102,85 @@
                                     <ColumnDefinition x:Name="SecondaryButtonColumn" Width="{ThemeResource SplitButtonSecondaryButtonSize}" />
                                 </Grid.ColumnDefinitions>
 
+                                <Grid
+                                    x:Name="PrimaryBackgroundGrid"
+                                    Grid.ColumnSpan="2"
+                                    Background="{TemplateBinding Background}" />
+
+                                <Grid
+                                    x:Name="DividerBackgroundGrid"
+                                    Grid.Column="1"
+                                    Width="1"
+                                    Background="{ThemeResource AccentButtonBorderBrush}" />
+
+                                <Grid
+                                    x:Name="SecondaryBackgroundGrid"
+                                    Grid.Column="2"
+                                    Background="{TemplateBinding Background}" />
+
+                                <Grid
+                                    x:Name="Border"
+                                    Grid.ColumnSpan="3"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+
+                                <Button
+                                    x:Name="PrimaryButton"
+                                    Grid.Column="0"
+                                    Padding="{TemplateBinding Padding}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="Transparent"
+                                    BorderThickness="0"
+                                    Command="{TemplateBinding Command}"
+                                    CommandParameter="{TemplateBinding CommandParameter}"
+                                    Content="{TemplateBinding Content}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                                    ContentTransitions="{TemplateBinding ContentTransitions}"
+                                    FontFamily="{TemplateBinding FontFamily}"
+                                    FontSize="{TemplateBinding FontSize}"
+                                    FontWeight="{TemplateBinding FontWeight}"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    IsTabStop="False" />
+
+                                <Button
+                                    x:Name="SecondaryButton"
+                                    Grid.Column="2"
+                                    Padding="0,0,12,0"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    HorizontalContentAlignment="Stretch"
+                                    VerticalContentAlignment="Stretch"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="Transparent"
+                                    BorderThickness="0"
+                                    Foreground="{ThemeResource AccentButtonForeground}"
+                                    IsTabStop="False">
+                                    <Button.Content>
+                                        <AnimatedIcon
+                                            Width="12"
+                                            Height="12"
+                                            HorizontalAlignment="Right"
+                                            VerticalAlignment="Center"
+                                            AutomationProperties.AccessibilityView="Raw">
+                                            <animatedVisuals:AnimatedChevronDownSmallVisualSource />
+                                            <AnimatedIcon.FallbackIconSource>
+                                                <FontIconSource
+                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                    FontSize="8"
+                                                    Glyph="&#xE96E;"
+                                                    IsTextScaleFactorEnabled="False" />
+                                            </AnimatedIcon.FallbackIconSource>
+                                        </AnimatedIcon>
+                                    </Button.Content>
+                                </Button>
+
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
                                         <VisualState x:Name="Normal" />
@@ -251,85 +328,6 @@
                                         </VisualState>
                                     </VisualStateGroup>
                                 </VisualStateManager.VisualStateGroups>
-
-                                <Grid
-                                    x:Name="PrimaryBackgroundGrid"
-                                    Grid.ColumnSpan="2"
-                                    Background="{TemplateBinding Background}" />
-
-                                <Grid
-                                    x:Name="DividerBackgroundGrid"
-                                    Grid.Column="1"
-                                    Width="1"
-                                    Background="{ThemeResource AccentButtonBorderBrush}" />
-
-                                <Grid
-                                    x:Name="SecondaryBackgroundGrid"
-                                    Grid.Column="2"
-                                    Background="{TemplateBinding Background}" />
-
-                                <Grid
-                                    x:Name="Border"
-                                    Grid.ColumnSpan="3"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
-                                    BorderThickness="{TemplateBinding BorderThickness}"
-                                    CornerRadius="{TemplateBinding CornerRadius}" />
-
-                                <Button
-                                    x:Name="PrimaryButton"
-                                    Grid.Column="0"
-                                    Padding="{TemplateBinding Padding}"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    AutomationProperties.AccessibilityView="Raw"
-                                    Background="{TemplateBinding Background}"
-                                    BorderBrush="Transparent"
-                                    BorderThickness="0"
-                                    Command="{TemplateBinding Command}"
-                                    CommandParameter="{TemplateBinding CommandParameter}"
-                                    Content="{TemplateBinding Content}"
-                                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                                    ContentTransitions="{TemplateBinding ContentTransitions}"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    IsTabStop="False" />
-
-                                <Button
-                                    x:Name="SecondaryButton"
-                                    Grid.Column="2"
-                                    Padding="0,0,12,0"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    HorizontalContentAlignment="Stretch"
-                                    VerticalContentAlignment="Stretch"
-                                    AutomationProperties.AccessibilityView="Raw"
-                                    Background="{TemplateBinding Background}"
-                                    BorderBrush="Transparent"
-                                    BorderThickness="0"
-                                    Foreground="{ThemeResource AccentButtonForeground}"
-                                    IsTabStop="False">
-                                    <Button.Content>
-                                        <AnimatedIcon
-                                            Width="12"
-                                            Height="12"
-                                            HorizontalAlignment="Right"
-                                            VerticalAlignment="Center"
-                                            AutomationProperties.AccessibilityView="Raw">
-                                            <animatedVisuals:AnimatedChevronDownSmallVisualSource />
-                                            <AnimatedIcon.FallbackIconSource>
-                                                <FontIconSource
-                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                                    FontSize="8"
-                                                    Glyph="&#xE96E;"
-                                                    IsTextScaleFactorEnabled="False" />
-                                            </AnimatedIcon.FallbackIconSource>
-                                        </AnimatedIcon>
-                                    </Button.Content>
-                                </Button>
                             </Grid>
                         </ControlTemplate>
                     </Setter.Value>
@@ -371,6 +369,16 @@
                                                         BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
                                                         BorderThickness="{TemplateBinding BorderThickness}"
                                                         CornerRadius="{ThemeResource ControlCornerRadius}">
+                                                        <TextBlock
+                                                            x:Name="GlyphElement"
+                                                            HorizontalAlignment="Center"
+                                                            VerticalAlignment="Center"
+                                                            AutomationProperties.AccessibilityView="Raw"
+                                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                            FontSize="{ThemeResource AutoSuggestBoxIconFontSize}"
+                                                            FontStyle="Normal"
+                                                            Foreground="{ThemeResource TextControlButtonForeground}"
+                                                            Text="&#xe894;" />
                                                         <VisualStateManager.VisualStateGroups>
                                                             <VisualStateGroup x:Name="CommonStates">
                                                                 <VisualState x:Name="Normal" />
@@ -414,16 +422,6 @@
                                                                 </VisualState>
                                                             </VisualStateGroup>
                                                         </VisualStateManager.VisualStateGroups>
-                                                        <TextBlock
-                                                            x:Name="GlyphElement"
-                                                            HorizontalAlignment="Center"
-                                                            VerticalAlignment="Center"
-                                                            AutomationProperties.AccessibilityView="Raw"
-                                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                                                            FontSize="{ThemeResource AutoSuggestBoxIconFontSize}"
-                                                            FontStyle="Normal"
-                                                            Foreground="{ThemeResource TextControlButtonForeground}"
-                                                            Text="&#xe894;" />
                                                     </Grid>
                                                 </ControlTemplate>
                                             </Setter.Value>
@@ -518,92 +516,6 @@
                                     <RowDefinition Height="*" />
                                     <RowDefinition Height="Auto" />
                                 </Grid.RowDefinitions>
-
-                                <VisualStateManager.VisualStateGroups>
-                                    <VisualStateGroup x:Name="CommonStates">
-
-                                        <VisualState x:Name="Disabled">
-
-                                            <Storyboard>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualState>
-                                        <VisualState x:Name="Normal" />
-
-                                        <VisualState x:Name="PointerOver">
-
-                                            <Storyboard>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualState>
-                                        <VisualState x:Name="Focused">
-
-                                            <Storyboard>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="QueryButton" Storyboard.TargetProperty="Foreground">
-                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForeground}" />
-                                                </ObjectAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualState>
-
-                                    </VisualStateGroup>
-                                    <VisualStateGroup x:Name="ButtonStates">
-                                        <VisualState x:Name="ButtonVisible">
-
-                                            <Storyboard>
-                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
-                                                    <DiscreteObjectKeyFrame KeyTime="0">
-                                                        <DiscreteObjectKeyFrame.Value>
-                                                            <Visibility>Visible</Visibility>
-                                                        </DiscreteObjectKeyFrame.Value>
-                                                    </DiscreteObjectKeyFrame>
-                                                </ObjectAnimationUsingKeyFrames>
-                                            </Storyboard>
-                                        </VisualState>
-                                        <VisualState x:Name="ButtonCollapsed" />
-
-                                    </VisualStateGroup>
-
-                                </VisualStateManager.VisualStateGroups>
                                 <Border
                                     x:Name="BorderElement"
                                     Grid.Row="1"
@@ -692,6 +604,91 @@
                                     Content="{TemplateBinding Description}"
                                     Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
 
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+
+                                        <VisualState x:Name="Disabled">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="Normal" />
+
+                                        <VisualState x:Name="PointerOver">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="Focused">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="QueryButton" Storyboard.TargetProperty="Foreground">
+                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForeground}" />
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+
+                                    </VisualStateGroup>
+                                    <VisualStateGroup x:Name="ButtonStates">
+                                        <VisualState x:Name="ButtonVisible">
+
+                                            <Storyboard>
+                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
+                                                    <DiscreteObjectKeyFrame KeyTime="0">
+                                                        <DiscreteObjectKeyFrame.Value>
+                                                            <Visibility>Visible</Visibility>
+                                                        </DiscreteObjectKeyFrame.Value>
+                                                    </DiscreteObjectKeyFrame>
+                                                </ObjectAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualState>
+                                        <VisualState x:Name="ButtonCollapsed" />
+
+                                    </VisualStateGroup>
+
+                                </VisualStateManager.VisualStateGroups>
                             </Grid>
 
                         </ControlTemplate>
@@ -719,7 +716,6 @@
                     <Setter.Value>
                         <ControlTemplate TargetType="AutoSuggestBox">
                             <Grid x:Name="LayoutRoot">
-
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
@@ -728,14 +724,6 @@
                                     <RowDefinition Height="*" />
                                 </Grid.RowDefinitions>
 
-                                <VisualStateManager.VisualStateGroups>
-                                    <VisualStateGroup x:Name="Orientation">
-                                        <VisualState x:Name="Landscape" />
-                                        <VisualState x:Name="Portrait" />
-                                    </VisualStateGroup>
-
-                                </VisualStateManager.VisualStateGroups>
-
                                 <TextBox
                                     x:Name="TextBox"
                                     Width="{TemplateBinding Width}"
@@ -781,6 +769,13 @@
                                     </Border>
                                 </Popup>
 
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="Orientation">
+                                        <VisualState x:Name="Landscape" />
+                                        <VisualState x:Name="Portrait" />
+                                    </VisualStateGroup>
+
+                                </VisualStateManager.VisualStateGroups>
                             </Grid>
 
                         </ControlTemplate>

src/modules/powerrename/PowerRenameUILib/PowerRenameXAML/ExplorerItem.xaml

@@ -17,27 +17,6 @@
             <!--  Error tooltip  -->
         </Grid.ColumnDefinitions>
 
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="CommonStates">
-                <VisualState x:Name="Normal" />
-                <VisualState x:Name="Highlight">
-                    <VisualState.Setters>
-                        <Setter Target="HighlightBorder.Opacity" Value="0.1" />
-                        <Setter Target="HighlightBorder.BorderBrush" Value="{ThemeResource AccentTextFillColorPrimaryBrush}" />
-                        <Setter Target="HighlightBorder.Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="Error">
-                    <VisualState.Setters>
-                        <Setter Target="HighlightBorder.Opacity" Value="1" />
-                        <Setter Target="HighlightBorder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
-                        <Setter Target="HighlightBorder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
-                        <Setter Target="ErrorIcon.Visibility" Value="Visible" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-
         <Border
             Name="HighlightBorder"
             Grid.ColumnSpan="4"
@@ -121,5 +100,26 @@
                     TextWrapping="Wrap" />
             </ToolTipService.ToolTip>
         </Border>
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal" />
+                <VisualState x:Name="Highlight">
+                    <VisualState.Setters>
+                        <Setter Target="HighlightBorder.Opacity" Value="0.1" />
+                        <Setter Target="HighlightBorder.BorderBrush" Value="{ThemeResource AccentTextFillColorPrimaryBrush}" />
+                        <Setter Target="HighlightBorder.Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="Error">
+                    <VisualState.Setters>
+                        <Setter Target="HighlightBorder.Opacity" Value="1" />
+                        <Setter Target="HighlightBorder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
+                        <Setter Target="HighlightBorder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
+                        <Setter Target="ErrorIcon.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>

src/modules/powerrename/PowerRenameUILib/PowerRenameXAML/MainWindow.xaml

@@ -366,26 +366,27 @@
                                             </DataTemplate>
                                         </ListView.ItemTemplate>
                                     </ListView>
-                                    <TextBlock x:Uid="CounterCheatSheet_Title"
+                                    <TextBlock
+                                        x:Uid="CounterCheatSheet_Title"
+                                        Grid.Row="2"
                                         Margin="0,10,0,0"
-                                            FontWeight="SemiBold" Grid.Row="2" />
+                                        FontWeight="SemiBold" />
-                                    <ListView Margin="-4,12,0,0"
+                                    <ListView
+                                        Grid.Row="3"
+                                        Margin="-4,12,0,0"
                                         IsItemClickEnabled="True"
                                         ItemClick="DateTimeItemClick"
                                         ItemsSource="{x:Bind CounterShortcuts}"
-                                            SelectionMode="None" Grid.Row="3">
+                                        SelectionMode="None">
                                         <ListView.ItemTemplate>
-                                            <DataTemplate
+                                            <DataTemplate x:DataType="local:PatternSnippet">
-                                                    x:DataType="local:PatternSnippet">
+                                                <Grid Margin="-10,0,0,0" ColumnSpacing="8">
-                                                <Grid Margin="-10,0,0,0"
-                                                        ColumnSpacing="8">
                                                     <Grid.ColumnDefinitions>
-                                                        <ColumnDefinition
+                                                        <ColumnDefinition Width="Auto" />
-                                                                Width="Auto" />
+                                                        <ColumnDefinition Width="*" />
-                                                        <ColumnDefinition
-                                                                Width="*" />
                                                     </Grid.ColumnDefinitions>
-                                                    <Border Padding="8"
+                                                    <Border
+                                                        Padding="8"
                                                         HorizontalAlignment="Left"
                                                         Background="{ThemeResource ButtonBackground}"
                                                         BorderBrush="{ThemeResource ButtonBorderBrush}"
@@ -396,7 +397,8 @@
                                                             Foreground="{ThemeResource ButtonForeground}"
                                                             Text="{x:Bind Code}" />
                                                     </Border>
-                                                    <TextBlock Grid.Column="1"
+                                                    <TextBlock
+                                                        Grid.Column="1"
                                                         VerticalAlignment="Center"
                                                         FontSize="12"
                                                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"