From 1840cc9b62b402cab19ceda9be81ad6af494c62e Mon Sep 17 00:00:00 2001
From: Den Delimarsky <1389609+dend@users.noreply.github.com>
Date: Wed, 10 Mar 2021 08:16:34 -0800
Subject: [PATCH] Getting the settings UI to show Espresso.

---
 src/espresso/EspressoUI/EspressoUI.csproj     |  25 ++++
 src/espresso/EspressoUI/Themes/Dark.xaml      |  18 +++
 .../EspressoUI/Themes/HighContrast1.xaml      |  18 +++
 .../EspressoUI/Themes/HighContrast2.xaml      |  19 +++
 .../EspressoUI/Themes/HighContrastBlack.xaml  |  18 +++
 .../EspressoUI/Themes/HighContrastWhite.xaml  |  18 +++
 src/espresso/EspressoUI/Themes/Light.xaml     |  18 +++
 .../Microsoft.PowerToys.Settings.UI.csproj    |   7 ++
 .../Strings/en-us/Resources.resw              |   4 +
 .../Views/EspressoPage.xaml                   | 113 ++++++++++++++++++
 .../Views/EspressoPage.xaml.cs                |  20 ++++
 .../Views/ShellPage.xaml                      |   6 +
 12 files changed, 284 insertions(+)
 create mode 100644 src/espresso/EspressoUI/Themes/Dark.xaml
 create mode 100644 src/espresso/EspressoUI/Themes/HighContrast1.xaml
 create mode 100644 src/espresso/EspressoUI/Themes/HighContrast2.xaml
 create mode 100644 src/espresso/EspressoUI/Themes/HighContrastBlack.xaml
 create mode 100644 src/espresso/EspressoUI/Themes/HighContrastWhite.xaml
 create mode 100644 src/espresso/EspressoUI/Themes/Light.xaml
 create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml
 create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml.cs

diff --git a/src/espresso/EspressoUI/EspressoUI.csproj b/src/espresso/EspressoUI/EspressoUI.csproj
index 8ba1d0db41..41864b724f 100644
--- a/src/espresso/EspressoUI/EspressoUI.csproj
+++ b/src/espresso/EspressoUI/EspressoUI.csproj
@@ -6,4 +6,29 @@
     <UseWPF>true</UseWPF>
   </PropertyGroup>
 
+  <ItemGroup>
+    <AdditionalFiles Include="..\..\codeAnalysis\StyleCop.json" Link="StyleCop.json" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Page Update="Themes\Dark.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+    <Page Update="Themes\HighContrast1.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+    <Page Update="Themes\HighContrast2.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+    <Page Update="Themes\HighContrastBlack.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+    <Page Update="Themes\HighContrastWhite.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+    <Page Update="Themes\Light.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+  </ItemGroup>
+
 </Project>
diff --git a/src/espresso/EspressoUI/Themes/Dark.xaml b/src/espresso/EspressoUI/Themes/Dark.xaml
new file mode 100644
index 0000000000..f0d0cb1339
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/Dark.xaml
@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">Dark.Accent1</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent1 (Dark)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">Dark</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent1</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">Black</Color>
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF999999" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Transparent"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/espresso/EspressoUI/Themes/HighContrast1.xaml b/src/espresso/EspressoUI/Themes/HighContrast1.xaml
new file mode 100644
index 0000000000..7bfaf2e19d
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/HighContrast1.xaml
@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">HighContrast.Accent2</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent2 (HighContrast)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent2</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffff00" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF00ff00" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="#FFffff00"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/espresso/EspressoUI/Themes/HighContrast2.xaml b/src/espresso/EspressoUI/Themes/HighContrast2.xaml
new file mode 100644
index 0000000000..15f7f1b639
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/HighContrast2.xaml
@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">HighContrast.Accent3</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent3 (HighContrast)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent3</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
+
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF00ff00" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FFc0c0c0" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="#FF00ff00"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/espresso/EspressoUI/Themes/HighContrastBlack.xaml b/src/espresso/EspressoUI/Themes/HighContrastBlack.xaml
new file mode 100644
index 0000000000..3f5458dabb
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/HighContrastBlack.xaml
@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+    
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">HighContrast.Accent4</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent4 (HighContrast)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent4</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffffff" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF1aebff" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="White"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/espresso/EspressoUI/Themes/HighContrastWhite.xaml b/src/espresso/EspressoUI/Themes/HighContrastWhite.xaml
new file mode 100644
index 0000000000..40ccf7f047
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/HighContrastWhite.xaml
@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">HighContrast.Accent5</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent5 (HighContrast)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent5</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFf3f3f3" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFffffff" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF676666" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Black"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/espresso/EspressoUI/Themes/Light.xaml b/src/espresso/EspressoUI/Themes/Light.xaml
new file mode 100644
index 0000000000..9b8e55a430
--- /dev/null
+++ b/src/espresso/EspressoUI/Themes/Light.xaml
@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <!--  Metadata  -->
+    <system:String x:Key="Theme.Name">Light.Accent1</system:String>
+    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
+    <system:String x:Key="Theme.DisplayName">Accent1 (Light)</system:String>
+    <system:String x:Key="Theme.BaseColorScheme">Light</system:String>
+    <system:String x:Key="Theme.ColorScheme">Accent1</system:String>
+    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
+
+    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFf3f3f3" />
+    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFffffff" />
+    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF676666" />
+    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Transparent"/>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
index c6c91d8a9a..694b388dfc 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
@@ -151,6 +151,9 @@
     <Compile Include="Services\NavigationService.cs" />
     <Compile Include="ViewModels\Commands\ButtonClickCommand.cs" />
     <Compile Include="ViewModels\ShellViewModel.cs" />
+    <Compile Include="Views\EspressoPage.xaml.cs">
+      <DependentUpon>EspressoPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\ColorPickerPage.xaml.cs">
       <DependentUpon>ColorPickerPage.xaml</DependentUpon>
     </Compile>
@@ -344,6 +347,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\EspressoPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\ColorPickerPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 10af378234..f03f4f34a0 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -121,6 +121,10 @@
     <value>General</value>
     <comment>Navigation view item name for General</comment>
   </data>
+  <data name="Shell_Espresso.Content" xml:space="preserve">
+    <value>Espresso</value>
+    <comment>Product name: Navigation view item name for Espresso</comment>
+  </data>
   <data name="Shell_PowerLauncher.Content" xml:space="preserve">
     <value>PowerToys Run</value>
     <comment>Product name: Navigation view item name for PowerToys Run</comment>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml
new file mode 100644
index 0000000000..2e48e226c2
--- /dev/null
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml
@@ -0,0 +1,113 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.EspressoPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:Custom="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:Color="using:Microsoft.PowerToys.Settings.UI.Library.ViewModels" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d"
+    d:DesignHeight="300"
+    d:DesignWidth="400" 
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    AutomationProperties.LandmarkType="Main">
+
+    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.Width" Value="Auto" />
+                        <Setter Target="ColorPickerView.(Grid.Row)" Value="1" />
+                        <Setter Target="ColorPickerView.Margin" Value="0" />
+                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
+                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
+                        <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
+                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <StackPanel Orientation="Vertical"
+                    x:Name="EspressoView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
+
+        </StackPanel>
+
+        <RelativePanel x:Name="SidePanel" 
+                    HorizontalAlignment="Left"
+                    Width="{StaticResource SidePanelWidth}"
+                    Grid.Column="1">
+            <StackPanel x:Name="DescriptionPanel">
+                <TextBlock x:Uid="About_ColorPicker"
+                           x:Name="AboutTitle"
+                           Grid.ColumnSpan="2"
+                           Style="{StaticResource SettingsGroupTitleStyle}"
+                           Margin="{StaticResource XSmallBottomMargin}"/>
+                <TextBlock x:Uid="ColorPicker_Description"
+                           TextWrapping="Wrap"
+                           Grid.Row="1" />
+            </StackPanel>
+
+            <Border x:Name="AboutImage"
+                    CornerRadius="4"
+                    Grid.Row="2"
+                    MaxWidth="240"
+                    HorizontalAlignment="Left"
+                    Margin="{StaticResource SmallTopBottomMargin}"
+                    RelativePanel.Below="DescriptionPanel">
+                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
+                    <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
+                </HyperlinkButton>
+            </Border>
+            <StackPanel x:Name="LinksPanel"
+                        Margin="0,1,0,0"
+                        RelativePanel.Below="AboutImage"
+                        Orientation="Vertical" >
+                <HyperlinkButton x:Uid="ColorPicker_ImageHyperlinkToDocs">
+                    <TextBlock x:Uid="Module_overview" />
+                </HyperlinkButton>
+                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
+                    <TextBlock x:Uid="Give_Feedback" />
+                </HyperlinkButton>
+
+                <TextBlock 
+                x:Uid="AttributionTitle"
+                Style="{StaticResource SettingsGroupTitleStyle}" />
+
+                <HyperlinkButton Margin="0,-3,0,0"
+                                NavigateUri="https://github.com/martinchrzan/ColorPicker/">
+                    <TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
+                </HyperlinkButton>
+
+                <HyperlinkButton Margin="0,-3,0,0"
+                                NavigateUri="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c">
+                    <TextBlock Text="Niels Laute's UX concept" TextWrapping="Wrap" />
+                </HyperlinkButton>
+                
+            </StackPanel>
+        </RelativePanel>
+    </Grid>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml.cs
new file mode 100644
index 0000000000..84bec4bf0e
--- /dev/null
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/EspressoPage.xaml.cs
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.IO.Abstractions;
+using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Library.ViewModels;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    public sealed partial class EspressoPage : Page
+    {
+        public EspressoPage()
+        {
+            var settingsUtils = new SettingsUtils();
+            InitializeComponent();
+        }
+    }
+}
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
index 96a250ed32..3d99a81869 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
@@ -78,6 +78,12 @@
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
 
+                <winui:NavigationViewItem x:Uid="Shell_Espresso" helpers:NavHelper.NavigateTo="views:EspressoPage" AutomationProperties.HeadingLevel="Level1">
+                    <winui:NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE773;"/>
+                    </winui:NavigationViewItem.Icon>
+                </winui:NavigationViewItem>
+
                 <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xEDA7;"/>