[Settings] New UX (#12470)

* Removed hardcoded background

* Background

* Updated pages

* Added OOBE to shellpage

* Margin fixes

* Fix

* Resource update

* Resource string update

* Removed reference from installer file

* Updated UI fixes and remove conflicts

* Adding new settings control

* PowerRename

* Sidepanel updates

* Shortcut Guide

* Updates screeens

* General page updates

* Awake UX update

* Changed order for power preview note

* Fixes

* UI fixes

* KBM

* IsEnabled state support

* Added new controls

* Update

* Updated nugest packages

* Replaced itemscontrol

* Introducing setting button style

* FancyZones page

* Plugin page

* Switch case

* Fixed typo

* Plugin manager update

* Introducing SettingExpander

* Setting automation properties

* Accesibility improvements

* VCM and cleanup

* Refactoring OOBE pages part 1

* OOBE XAML refactoring

* Added MinWidth to actioncontent controls

* Updates to various settings

* Spell update

* Update to author label

* Clean up

* Removing redunant files

* Move file

* Updated files

* Revert "Updated files"

This reverts commit 1a5c887eae.

* Revert "Move file"

This reverts commit 2b06c75c1f.

* Revert "Removing redunant files"

This reverts commit fe79ec1701.

* Revert "Clean up"

This reverts commit 028e15fab6.

* Removed redundant styles

* Revert "Removed redundant styles"

This reverts commit dfdfd65021.

* Files cleanup

* Removing converter, updating background and paddings

* Styling updates

* Unit test updates

* Fixes

* Installer fixes

* Update Resources.resw

* Shell page updates

* Updated pagelinks

* Styles re-ordering

* Updated converter

* Updated ToggleSwitch style

* Bugfixes

* Typo fix

* [Settings] New UX - installer dll fixes (#12818)

* [Settings] New UX - Fix some failing tests (#12822)

* Bugfixes

* Typo fix

* Hiding VCM

* Bugfixes

* Download button fix

* Remove Newtonsoft.Json from installer file

* Updated visuals

* Bugfixes

* Syntax fix

* Updated installer file

* Bugfixes

* New label

* Theming support for OOBE

* Put back in Documentation hyperlink

* Right uid

Co-authored-by: Niels Laute <niels9001@hotmail.com>
Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -5,11 +5,9 @@
     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:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
     mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
     <Page.Resources>
@@ -17,296 +15,205 @@
         <Style TargetType="ListViewItem" x:Name="KeysListViewContainerStyle">
             <Setter Property="IsTabStop" Value="False"/>
         </Style>
-        <DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
+
+
+        <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
+            <Border Background="{ThemeResource ButtonBackground}"
+                    BorderBrush="{ThemeResource ButtonBorderBrush}"
+                    BorderThickness="{ThemeResource ButtonBorderThemeThickness}"
+                    CornerRadius="{ThemeResource ControlCornerRadius}"
+                    Padding="{ThemeResource ButtonPadding}"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left">
+                <TextBlock FontWeight="SemiBold"
+                           Foreground="{ThemeResource ButtonForeground}"
+                           VerticalAlignment="Center"
+                           TextAlignment="Center"
+                           FontSize="12"
+                           Text="{Binding}" />
+            </Border>
+        </DataTemplate>
+
+        <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
+            <Border Background="{ThemeResource ButtonBackground}"
+                    BorderBrush="{ThemeResource AccentButtonBackground}"
+                    BorderThickness="{ThemeResource ButtonBorderThemeThickness}"
+                    CornerRadius="{ThemeResource ControlCornerRadius}"
+                    Padding="{ThemeResource ButtonPadding}"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Left">
+                <TextBlock FontWeight="SemiBold"
+                           Foreground="{ThemeResource AccentButtonBackground}"
+                           VerticalAlignment="Center"
+                           TextAlignment="Center"
+                           FontSize="12"
+                           Text="{Binding}" />
+            </Border>
+        </DataTemplate>
+
+        <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
             <StackPanel 
                 Name="KeyboardManager_RemappedKeysListItem" 
                 x:Uid="KeyboardManager_RemappedKeysListItem"
                 Orientation="Horizontal"
                 Height="56">
-                <ItemsControl
-                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl
-                    Name="KeyboardManager_RemappedTo"
-                    x:Uid="KeyboardManager_RemappedTo"
-                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
-                    Grid.Column="2"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
+            
             </StackPanel>
-        </DataTemplate>
-        <DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
+        </DataTemplate>-->
+        <!--<DataTemplate x:Name="ShortcutKeysListViewTemplate" x:DataType="Lib:AppSpecificKeysDataModel">
             <StackPanel 
                 Name="KeyboardManager_RemappedShortcutsListItem" 
                 x:Uid="KeyboardManager_RemappedShortcutsListItem"
                 Orientation="Horizontal"
                 Height="56">
-                <ItemsControl
-                    ItemsSource="{x:Bind GetMappedOriginalKeys()}"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemBaseLowColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="1"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <ItemsControl Name="KeyboardManager_ShortcutRemappedTo"
-                    x:Uid="KeyboardManager_ShortcutRemappedTo"
-                    ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
-                    Grid.Column="2"
-                    IsTabStop="False">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal"/>
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border
-                                Background="{ThemeResource SystemAccentColor}"
-                                CornerRadius="4"
-                                Padding="14,0,14,0"
-                                Margin="5,0,5,0"
-                                Height="36"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Left">
-                                <TextBlock
-                                    FontWeight="SemiBold"
-                                    VerticalAlignment="Center"
-                                    TextAlignment="Center"
-                                    Foreground="White"
-                                    FontSize="12"
-                                    Text="{Binding}" />
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-                <FontIcon Glyph="&#xE72A;"
-                          Grid.Column="3"
-                          FontSize="14"
-                          VerticalAlignment="Center" 
-                          Margin="5,0,5,0"/>
-                <Border
-                    Name="KeyboardManager_TargetApp"
-                    x:Uid="KeyboardManager_TargetApp"
-                    Background="{ThemeResource SystemAccentColor}"
-                    Grid.Column="4"
-                    CornerRadius="4"
-                    Padding="14,0,14,0"
-                    Margin="5,0,5,0"
-                    Height="36"
-                    VerticalAlignment="Center"
-                    HorizontalAlignment="Left">
-                    <TextBlock
-                        FontWeight="SemiBold"
-                        VerticalAlignment="Center"
-                        TextAlignment="Center"
-                        Foreground="White"
-                        FontSize="12"
-                        Text="{x:Bind TargetApp}" />
-                </Border>
-            </StackPanel>
-        </DataTemplate>
+              
+        </DataTemplate>-->
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
+    <controls:SettingsPageControl x:Uid="KeyboardManager"
                                   ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-                <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
-                          IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys" Margin="{StaticResource XSmallTopMargin}">
-                    <TextBlock x:Uid="KBM_KeysCannotBeRemapped" />
-                </HyperlinkButton>
+                <controls:Setting x:Uid="KeyboardManager_EnableToggle">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}" />
+                    </controls:Setting.ActionContent>
+                    <controls:Setting.Description>
+                        <HyperlinkButton NavigateUri="https://aka.ms/powerToysCannotRemapKeys">
+                            <TextBlock x:Uid="KBM_KeysCannotBeRemapped" FontWeight="SemiBold" />
+                        </HyperlinkButton>
+                    </controls:Setting.Description>
+                </controls:Setting>
 
-                <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
-                       Margin="{StaticResource SmallTopMargin}"/>
+                <controls:SettingsGroup x:Uid="KeyboardManager_Keys" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
 
-            <ComboBox SelectedIndex="1" MinWidth="160"
-                      Margin="{StaticResource SmallTopMargin}">
-                <ComboBoxItem Content="Config-1"/>
-                <ComboBoxItem Content="Config-2"/>
-                <ComboBoxItem Content="Config-3"/>
-            </ComboBox>-->
+                    <Button x:Uid="KeyboardManager_RemapKeyboardButton_Accessible" Style="{StaticResource SettingButtonStyle}" Command="{Binding Path=RemapKeyboardCommand}">
+                        <controls:Setting x:Uid="KeyboardManager_RemapKeyboardButton" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xE92E;">
+                            <controls:Setting.ActionContent>
+                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
+                            </controls:Setting.ActionContent>
+                        </controls:Setting>
+                    </Button>
 
-                <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                    <ListView x:Name="RemapKeysList"
+                              x:Uid="RemapKeysList"
+                              ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
+                              SelectionMode="None"
+                              IsSwipeEnabled="False"
+                              Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="Lib:KeysDataModel">
+                                <StackPanel Orientation="Horizontal"
+                                            HorizontalAlignment="Stretch"
+                                            Background="{ThemeResource CardBackgroundBrush}"
+                                            BorderThickness="{ThemeResource CardBorderThickness}"
+                                            BorderBrush="{ThemeResource CardBorderBrush}"
+                                            CornerRadius="{ThemeResource ControlCornerRadius}"
+                                            MinHeight="68">
+                                           
+                                    <ItemsControl Margin="52,0,0,0"
+                                                  ItemsSource="{x:Bind GetMappedOriginalKeys()}"
+                                                  ItemTemplate="{StaticResource OriginalKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                    <TextBlock Text="to"
+                                               Style="{StaticResource SecondaryTextStyle}"
+                                               VerticalAlignment="Center" 
+                                               Margin="8,0,8,0"/>
 
-                <TextBlock x:Uid="KeyboardManager_RemapKeyboardSubtitle"
-                       Margin="{StaticResource SmallTopMargin}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                    <ItemsControl Name="KeyboardManager_RemappedTo"
+                                                  x:Uid="KeyboardManager_RemappedTo"
+                                                  ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
+                                                  ItemTemplate="{StaticResource RemappedKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </controls:SettingsGroup>
 
-                <Button x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
 
-                <ListView x:Name="RemapKeysList"
-                      x:Uid="RemapKeysList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
-                      ItemsSource="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay}"
-                      ItemTemplate="{StaticResource KeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
-                      SelectionMode="None"
-                      IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
-                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
-                      />
+                <controls:SettingsGroup x:Uid="KeyboardManager_Shortcuts"   IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.Enabled}">
+                    <Button x:Uid="KeyboardManager_RemapShortcutsButton_Accessible" Style="{StaticResource SettingButtonStyle}" Command="{Binding Path=EditShortcutCommand}">
+                        <controls:Setting x:Uid="KeyboardManager_RemapShortcutsButton" Style="{StaticResource ExpanderHeaderSettingStyle}" Icon="&#xE92E;">
+                            <controls:Setting.ActionContent>
+                                <FontIcon Glyph="&#xE2B4;" FontFamily="{ThemeResource SymbolThemeFontFamily}" />
+                            </controls:Setting.ActionContent>
+                        </controls:Setting>
+                    </Button>
+                    
+                    <ListView x:Name="RemapShortcutsList"
+                              x:Uid="RemapShortcutsList"
+                              ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
+                              SelectionMode="None"
+                              IsSwipeEnabled="False"
+                              Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
+                                <StackPanel Orientation="Horizontal"
+                                            HorizontalAlignment="Stretch"
+                                            Background="{ThemeResource CardBackgroundBrush}"
+                                            BorderThickness="{ThemeResource CardBorderThickness}"
+                                            BorderBrush="{ThemeResource CardBorderBrush}"
+                                            CornerRadius="{ThemeResource ControlCornerRadius}"
+                                            MinHeight="68">
 
-                <!--<AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Icon="Add"
-                    Width="370"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    Margin="{StaticResource AddItemButtonMargin}"
-                    HorizontalAlignment="Left"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>-->
+                                    <ItemsControl Margin="52,0,0,0"
+                                                  ItemsSource="{x:Bind GetMappedOriginalKeys()}"
+                                                  ItemTemplate="{StaticResource OriginalKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
+                                    <TextBlock x:Uid="To"
+                                               Style="{StaticResource SecondaryTextStyle}"
+                                               VerticalAlignment="Center" 
+                                               Margin="8,0,8,0"/>
 
-                <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                                    <ItemsControl Name="KeyboardManager_RemappedTo"
+                                                  x:Uid="KeyboardManager_RemappedTo"
+                                                  ItemsSource="{x:Bind GetMappedNewRemapKeys()}"
+                                                  ItemTemplate="{StaticResource RemappedKeyTemplate}"
+                                                  IsTabStop="False">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                    </ItemsControl>
 
-                <TextBlock x:Uid="KeyboardManager_RemapShortcutsSubtitle"
-                       Margin="{StaticResource SmallTopMargin}"
-                       TextWrapping="WrapWholeWords"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.Enabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-
-                <Button x:Uid="KeyboardManager_RemapShortcutsButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Command="{Binding Path=EditShortcutCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                    />
-
-                <ListView x:Name="RemapShortcutsList"
-                      x:Uid="RemapShortcutsList"
-                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
-                      ItemsSource="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay}"
-                      ItemTemplate="{StaticResource ShortcutKeysListViewTemplate}"
-                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                      BorderThickness="1" 
-                      CornerRadius="4"
-                      MinWidth="350"
-                      MaxHeight="200"
-                      Margin="{StaticResource SmallTopBottomMargin}"
-                      HorizontalAlignment="Left"
-                      SelectionMode="None"
-                      IsSwipeEnabled="False"
-                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
-                      IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                      ScrollViewer.HorizontalScrollMode="Enabled"
-                      ScrollViewer.HorizontalScrollBarVisibility="Visible"
-                      ScrollViewer.IsHorizontalRailEnabled="True"
-                      ItemContainerStyle="{StaticResource KeysListViewContainerStyle}"
-                      />
-
-                <!--<AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
-                    Icon="Add"
-                    Width="370"
-                    Style="{StaticResource AddItemAppBarButtonStyle}"
-                    Command="{Binding Path=EditShortcutCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                    Margin="{StaticResource AddItemButtonMargin}"
-                    HorizontalAlignment="Left"
-                    />-->
+                                    <TextBlock Margin="8,0,0,0" Style="{StaticResource SecondaryTextStyle}" VerticalAlignment="Center">
+                                        <Run Text="{x:Bind TargetApp}" FontWeight="SemiBold"/>
+                                    </TextBlock>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
-        <controls:SettingsPageControl.ModuleLinks>
-            <controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
-            <controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
-        </controls:SettingsPageControl.ModuleLinks>
+        <controls:SettingsPageControl.PrimaryLinks>
+            <controls:PageLink x:Uid="LearnMore_KBM" Link="https://aka.ms/PowerToysOverview_KeyboardManager"/>
+        </controls:SettingsPageControl.PrimaryLinks>
     </controls:SettingsPageControl>
 </Page>