[OOBE] Refactor UI code, minor UI tweaks (#16578)

* Move content to dedicated XAML

* Select modules enum

* Remove redundant code, UI fixes

* Markdown rendering tweaks

* Address feedback

src/settings-ui/Settings.UI/OOBE/Views/OobeAlwaysOnTop.xaml

@@ -9,11 +9,10 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_AlwaysOnTop"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/AlwaysOnTop.png">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -29,13 +28,13 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_AlwaysOnTop"
                                      Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_AlwaysOnTop"
                                    TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeAwake.xaml

@@ -8,11 +8,10 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_Awake"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/Awake.png">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -27,13 +26,13 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_Awake"
                                      Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_Awake"
                                    TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeColorPicker.xaml

@@ -9,11 +9,10 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_ColorPicker"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/ColorPicker.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -30,12 +29,12 @@
                     <Button x:Uid="Launch_ColorPicker" Style="{StaticResource AccentButtonStyle}" Click="Start_ColorPicker_Click"/>
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ColorPicker" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_ColorPicker"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeFancyZones.xaml

@@ -8,11 +8,10 @@
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                              ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                              ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_FancyZones"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/FancyZones.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToUse"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -29,12 +28,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FancyZones" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_FancyZones"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeFileExplorer.xaml

@@ -8,11 +8,10 @@
       xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
       mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_FileExplorer"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/FileExplorer.png">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToEnable"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -22,12 +21,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_FileExplorerAddOns" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_PowerPreview"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeImageResizer.xaml

@@ -9,11 +9,10 @@
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_ImageResizer"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/ImageResizer.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -28,12 +27,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ImageResizer" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_ImageResizer"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeKBM.xaml

@@ -5,11 +5,10 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
       mc:Ignorable="d">
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_KBM"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/KBM.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToCreateMappings"
@@ -25,12 +24,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_KeyboardManager" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_KBM"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeMouseUtils.xaml

@@ -8,11 +8,10 @@
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                              ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                              ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_MouseUtils"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/MouseUtils.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_MouseUtils_FindMyMouse"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -29,13 +28,13 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_MouseUtilities" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_MouseUtils"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
 
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeOverview.xaml

@@ -7,21 +7,16 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}">
+    <controls:OOBEPageControl x:Uid="Oobe_Overview"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/OOBEPTHero.png">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
-                <TextBlock Margin="0,4,0,8"
-                           x:Uid="Oobe_Overview_Description"
-                           TextWrapping="Wrap"/>
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.DescriptionLink}" Style="{StaticResource TextButtonStyle}">
-                    <TextBlock x:Uid="Oobe_Overview_DescriptionLinkText"
-                               TextWrapping="Wrap" />
-                </HyperlinkButton>
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
-                    <TextBlock x:Uid="Oobe_Overview_LatestVersionLink"
+                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview" Style="{StaticResource TextButtonStyle}">
+                    <TextBlock x:Uid="Oobe_Overview_DescriptionLinkText"
                                TextWrapping="Wrap" />
                 </HyperlinkButton>
 
@@ -30,6 +25,6 @@
                             Click="SettingsLaunchButton_Click"/>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobePowerRename.xaml

@@ -7,10 +7,10 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
       mc:Ignorable="d">
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
-        <controls:OOBEPageControl.ModuleContent>
+    <controls:OOBEPageControl x:Uid="Oobe_PowerRename"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/PowerRename.gif">
+        
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToUse"
@@ -26,12 +26,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerRename" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_PowerRename"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeRun.xaml

@@ -5,14 +5,14 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_Run"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/Run.gif">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -28,12 +28,12 @@
                     <Button x:Uid="Launch_Run" Style="{StaticResource AccentButtonStyle}" Click="Start_Run_Click"/>
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_PowerToysRun" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_Run"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml

@@ -3,24 +3,14 @@
     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.OOBE.Views"
-    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    winui:BackdropMaterial.ApplyToRootOrPageBackground="True"
+    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"
     mc:Ignorable="d"
     HighContrastAdjustment="None">
 
-    <UserControl.Resources>
-        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="localModels:OobePowerToysModule">
-            <winui:NavigationViewItem Content="{x:Bind ModuleName}" Tag="{x:Bind Tag}">
-                <winui:NavigationViewItem.Icon>
-                    <BitmapIcon UriSource="{x:Bind FluentIcon}" ShowAsMonochrome="False"/>
-                </winui:NavigationViewItem.Icon>
-            </winui:NavigationViewItem>
-        </DataTemplate>
-    </UserControl.Resources>
-
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
@@ -43,19 +33,131 @@
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <winui:NavigationView IsSettingsVisible="False"
+        <muxc:NavigationView IsSettingsVisible="False"
                               IsPaneToggleButtonVisible="False"
                               IsPaneOpen="True"
                               x:Name="NavigationView"
                               OpenPaneLength="296"
                               PaneDisplayMode="Left"
                               SelectionChanged="NavigationView_SelectionChanged"
-                              IsBackButtonVisible="Collapsed"
-                              MenuItemsSource="{x:Bind Modules, Mode=OneTime}"
-                              MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
-            <winui:NavigationView.Content>
+                              IsBackButtonVisible="Collapsed">
+            <muxc:NavigationView.MenuItems>
+                <muxc:NavigationViewItem x:Uid="Shell_General"
+                                         Tag="Overview">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerToys.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_AlwaysOnTop"
+                                         Tag="AlwaysOnTop">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAlwaysOnTop.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_Awake"
+                                         Tag="Awake">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_ColorPicker"
+                                       Tag="ColorPicker">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_FancyZones"
+                                       Tag="FancyZones">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_PowerPreview"
+                                        Tag="FileExplorer">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsFileExplorerPreview.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_ImageResizer"
+                                     Tag="ImageResizer">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_KeyboardManager"
+                                       Tag="KBM">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_MouseUtilities"
+                                        Tag="MouseUtils">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsMouseUtils.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_PowerRename"
+                                       Tag="PowerRename">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerRename.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_PowerLauncher"
+                                            Tag="Run">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_ShortcutGuide"
+                                         Tag="ShortcutGuide">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+                <muxc:NavigationViewItem x:Uid="Shell_VideoConference"
+                                              Tag="VideoConference">
+                    <muxc:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png"
+                                    ShowAsMonochrome="False" />
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+
+            </muxc:NavigationView.MenuItems>
+            <muxc:NavigationView.FooterMenuItems>
+                <muxc:NavigationViewItem x:Uid="Shell_WhatsNew"
+                                              Tag="WhatsNew">
+                    <muxc:NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xF133;"/>
+                    </muxc:NavigationViewItem.Icon>
+                </muxc:NavigationViewItem>
+            </muxc:NavigationView.FooterMenuItems>
+            <muxc:NavigationView.Content>
                 <Frame x:Name="NavigationFrame" />
-            </winui:NavigationView.Content>
-        </winui:NavigationView>
+            </muxc:NavigationView.Content>
+        </muxc:NavigationView>
     </Grid>
 </UserControl>

src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml.cs

@@ -57,212 +57,125 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
             OobeShellHandler = this;
             UpdateUITheme();
             Modules = new ObservableCollection<OobePowerToysModule>();
-            ResourceLoader loader = ResourceLoader.GetForViewIndependentUse();
 
             Modules.Insert((int)PowerToysModulesEnum.Overview, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_Welcome"),
-                Tag = "Overview",
+                ModuleName = "Overview",
                 IsNew = false,
-                Icon = "\uEF3C",
-                Image = "ms-appx:///Assets/Modules/ColorPicker.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerToys.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/OOBEPTHero.png",
-                DescriptionLink = "https://aka.ms/PowerToysOverview",
-                Link = "https://github.com/microsoft/PowerToys/releases/",
-            });
-            Modules.Insert((int)PowerToysModulesEnum.WhatsNew, new OobePowerToysModule()
-            {
-                ModuleName = loader.GetString("Oobe_WhatsNew"),
-                Tag = "WhatsNew",
-                IsNew = false,
-                Icon = "\uEF3C",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsSettings.png",
             });
             Modules.Insert((int)PowerToysModulesEnum.AlwaysOnTop, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_AlwaysOnTop"),
-                Tag = "AlwaysOnTop",
+                ModuleName = "AlwaysOnTop",
                 IsNew = true,
-                Icon = "\uEC32",
-                Image = "ms-appx:///Assets/Modules/AlwaysOnTop.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsAlwaysOnTop.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/AlwaysOnTop.png",
-                Description = loader.GetString("Oobe_AlwaysOnTop_Description"),
-                Link = "https://aka.ms/PowerToysOverview_AlwaysOnTop",
             });
             Modules.Insert((int)PowerToysModulesEnum.Awake, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_Awake"),
-                Tag = "Awake",
+                ModuleName = "Awake",
                 IsNew = false,
-                Icon = "\uEC32",
-                Image = "ms-appx:///Assets/Modules/Awake.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsAwake.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/Awake.png",
-                Description = loader.GetString("Oobe_Awake_Description"),
-                Link = "https://aka.ms/PowerToysOverview_Awake",
             });
             Modules.Insert((int)PowerToysModulesEnum.ColorPicker, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_ColorPicker"),
-                Tag = "ColorPicker",
+                ModuleName = "ColorPicker",
                 IsNew = false,
-                Icon = "\uEF3C",
-                Image = "ms-appx:///Assets/Modules/ColorPicker.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/ColorPicker.gif",
-                Description = loader.GetString("Oobe_ColorPicker_Description"),
-                Link = "https://aka.ms/PowerToysOverview_ColorPicker",
             });
             Modules.Insert((int)PowerToysModulesEnum.FancyZones, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_FancyZones"),
-                Tag = "FancyZones",
+                ModuleName = "FancyZones",
                 IsNew = false,
-                Icon = "\uE737",
-                Image = "ms-appx:///Assets/Modules/FancyZones.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/FancyZones.gif",
-                Description = loader.GetString("Oobe_FancyZones_Description"),
-                Link = "https://aka.ms/PowerToysOverview_FancyZones",
             });
             Modules.Insert((int)PowerToysModulesEnum.FileExplorer, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_FileExplorer"),
-                Tag = "FileExplorer",
+                ModuleName = "FileExplorer",
                 IsNew = false,
-                Icon = "\uEC50",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsFileExplorerPreview.png",
-                Image = "ms-appx:///Assets/Modules/PowerPreview.png",
-                Description = loader.GetString("Oobe_FileExplorer_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/FileExplorer.png",
-                Link = "https://aka.ms/PowerToysOverview_FileExplorerAddOns",
             });
             Modules.Insert((int)PowerToysModulesEnum.ImageResizer, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_ImageResizer"),
-                Tag = "ImageResizer",
+                ModuleName = "ImageResizer",
                 IsNew = false,
-                Icon = "\uEB9F",
-                Image = "ms-appx:///Assets/Modules/ImageResizer.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png",
-                Description = loader.GetString("Oobe_ImageResizer_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/ImageResizer.gif",
-                Link = "https://aka.ms/PowerToysOverview_ImageResizer",
             });
             Modules.Insert((int)PowerToysModulesEnum.KBM, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_KBM"),
-                Tag = "KBM",
+                ModuleName = "KBM",
                 IsNew = false,
-                Icon = "\uE765",
-                Image = "ms-appx:///Assets/Modules/KeyboardManager.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png",
-                Description = loader.GetString("Oobe_KBM_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/KBM.gif",
-                Link = "https://aka.ms/PowerToysOverview_KeyboardManager",
             });
             Modules.Insert((int)PowerToysModulesEnum.MouseUtils, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_MouseUtils"),
-                Tag = "MouseUtils",
+                ModuleName = "MouseUtils",
                 IsNew = true,
-                Icon = "\uE962",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsMouseUtils.png",
-                Image = "ms-appx:///Assets/Modules/MouseUtils.png",
-                Description = loader.GetString("Oobe_MouseUtils_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/MouseUtils.gif",
-                Link = "https://aka.ms/PowerToysOverview_MouseUtilities", // TODO: Add correct link after it's been created.
             });
             Modules.Insert((int)PowerToysModulesEnum.PowerRename, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_PowerRename"),
-                Tag = "PowerRename",
+                ModuleName = "PowerRename",
                 IsNew = false,
-                Icon = "\uE8AC",
-                Image = "ms-appx:///Assets/Modules/PowerRename.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerRename.png",
-                Description = loader.GetString("Oobe_PowerRename_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/PowerRename.gif",
-                Link = "https://aka.ms/PowerToysOverview_PowerRename",
             });
             Modules.Insert((int)PowerToysModulesEnum.Run, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_Run"),
-                Tag = "Run",
+                ModuleName = "Run",
                 IsNew = false,
-                Icon = "\uE773",
-                Image = "ms-appx:///Assets/Modules/PowerLauncher.png",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png",
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/Run.gif",
-                Description = loader.GetString("Oobe_PowerRun_Description"),
-                Link = "https://aka.ms/PowerToysOverview_PowerToysRun",
             });
             Modules.Insert((int)PowerToysModulesEnum.ShortcutGuide, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_ShortcutGuide"),
-                Tag = "ShortcutGuide",
+                ModuleName = "ShortcutGuide",
                 IsNew = false,
-                Icon = "\uEDA7",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png",
-                Image = "ms-appx:///Assets/Modules/ShortcutGuide.png",
-                Description = loader.GetString("Oobe_ShortcutGuide_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/OOBEShortcutGuide.png",
-                Link = "https://aka.ms/PowerToysOverview_ShortcutGuide",
             });
 
             Modules.Insert((int)PowerToysModulesEnum.VideoConference, new OobePowerToysModule()
             {
-                ModuleName = loader.GetString("Oobe_VideoConference"),
-                Tag = "VideoConference",
+                ModuleName = "VideoConference",
                 IsNew = true,
-                Icon = "\uEC50",
-                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png",
-                Image = "ms-appx:///Assets/Modules/VideoConference.png",
-                Description = loader.GetString("Oobe_VideoConference_Description"),
-                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/VideoConferenceMute.png",
-                Link = "https://aka.ms/PowerToysOverview_VideoConference",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.WhatsNew, new OobePowerToysModule()
+            {
+                ModuleName = "WhatsNew",
+                IsNew = false,
             });
         }
 
         public void OnClosing()
         {
-            if (NavigationView.SelectedItem != null)
+            Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = NavigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
+            if (selectedItem != null)
             {
-                ((OobePowerToysModule)NavigationView.SelectedItem).LogClosingModuleEvent();
+                Modules[(int)(PowerToysModulesEnum)Enum.Parse(typeof(PowerToysModulesEnum), (string)selectedItem.Tag, true)].LogClosingModuleEvent();
             }
         }
 
-        public void NavigateToModule(int moduleIndex)
+        public void NavigateToModule(PowerToysModulesEnum selectedModule)
         {
-            if (Modules.Count > 0)
+            if (selectedModule == PowerToysModulesEnum.WhatsNew)
             {
-                NavigationView.SelectedItem = Modules[moduleIndex];
+                NavigationView.SelectedItem = NavigationView.FooterMenuItems[0];
+            }
+            else
+            {
+                NavigationView.SelectedItem = NavigationView.MenuItems[(int)selectedModule];
             }
         }
 
         [SuppressMessage("Usage", "CA1801:Review unused parameters", Justification = "Params are required for event handler signature requirements.")]
         private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
         {
-            OobePowerToysModule selectedItem = args.SelectedItem as OobePowerToysModule;
+            Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = args.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
 
-            switch (selectedItem.Tag)
+            if (selectedItem != null)
             {
-                case "Overview": NavigationFrame.Navigate(typeof(OobeOverview)); break;
-                case "WhatsNew": NavigationFrame.Navigate(typeof(OobeWhatsNew)); break;
-                case "AlwaysOnTop": NavigationFrame.Navigate(typeof(OobeAlwaysOnTop)); break;
-                case "Awake": NavigationFrame.Navigate(typeof(OobeAwake)); break;
-                case "ColorPicker": NavigationFrame.Navigate(typeof(OobeColorPicker)); break;
-                case "FancyZones": NavigationFrame.Navigate(typeof(OobeFancyZones)); break;
-                case "Run": NavigationFrame.Navigate(typeof(OobeRun)); break;
-                case "ImageResizer": NavigationFrame.Navigate(typeof(OobeImageResizer)); break;
-                case "KBM": NavigationFrame.Navigate(typeof(OobeKBM)); break;
-                case "PowerRename": NavigationFrame.Navigate(typeof(OobePowerRename)); break;
-                case "FileExplorer": NavigationFrame.Navigate(typeof(OobeFileExplorer)); break;
-                case "ShortcutGuide": NavigationFrame.Navigate(typeof(OobeShortcutGuide)); break;
-                case "VideoConference": NavigationFrame.Navigate(typeof(OobeVideoConference)); break;
-                case "MouseUtils": NavigationFrame.Navigate(typeof(OobeMouseUtils)); break;
+                switch (selectedItem.Tag)
+                {
+                    case "Overview": NavigationFrame.Navigate(typeof(OobeOverview)); break;
+                    case "WhatsNew": NavigationFrame.Navigate(typeof(OobeWhatsNew)); break;
+                    case "AlwaysOnTop": NavigationFrame.Navigate(typeof(OobeAlwaysOnTop)); break;
+                    case "Awake": NavigationFrame.Navigate(typeof(OobeAwake)); break;
+                    case "ColorPicker": NavigationFrame.Navigate(typeof(OobeColorPicker)); break;
+                    case "FancyZones": NavigationFrame.Navigate(typeof(OobeFancyZones)); break;
+                    case "Run": NavigationFrame.Navigate(typeof(OobeRun)); break;
+                    case "ImageResizer": NavigationFrame.Navigate(typeof(OobeImageResizer)); break;
+                    case "KBM": NavigationFrame.Navigate(typeof(OobeKBM)); break;
+                    case "PowerRename": NavigationFrame.Navigate(typeof(OobePowerRename)); break;
+                    case "FileExplorer": NavigationFrame.Navigate(typeof(OobeFileExplorer)); break;
+                    case "ShortcutGuide": NavigationFrame.Navigate(typeof(OobeShortcutGuide)); break;
+                    case "VideoConference": NavigationFrame.Navigate(typeof(OobeVideoConference)); break;
+                    case "MouseUtils": NavigationFrame.Navigate(typeof(OobeMouseUtils)); break;
+                }
             }
         }
 

src/settings-ui/Settings.UI/OOBE/Views/OobeShortcutGuide.xaml

@@ -8,10 +8,9 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
-        <controls:OOBEPageControl.ModuleContent>
+    <controls:OOBEPageControl x:Uid="Oobe_ShortcutGuide"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/OOBEShortcutGuide.png">
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
@@ -22,12 +21,12 @@
                     <Button x:Uid="Launch_ShortcutGuide" Style="{StaticResource AccentButtonStyle}" Click="Start_ShortcutGuide_Click"/>
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ShortcutGuide" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_ShortcutGuide"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeVideoConference.xaml

@@ -9,11 +9,10 @@
     xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
-                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
-                                  ModuleDescription="{x:Bind ViewModel.Description}">
+    <controls:OOBEPageControl x:Uid="Oobe_VideoConference"
+                              HeroImage="ms-appx:///Assets/Modules/OOBE/VideoConferenceMute.png">
 
-        <controls:OOBEPageControl.ModuleContent>
+        <controls:OOBEPageControl.PageContent>
             <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToLaunch"
                            Style="{ThemeResource OobeSubtitleStyle}" />
@@ -27,12 +26,12 @@
                 <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                     <Button x:Uid="OOBE_Settings"
                             Click="SettingsLaunchButton_Click"/>
-                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource TextButtonStyle}">
+                    <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_VideoConference" Style="{StaticResource TextButtonStyle}">
                         <TextBlock x:Uid="LearnMore_VCM"
                                TextWrapping="Wrap" />
                     </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </controls:OOBEPageControl.ModuleContent>
+        </controls:OOBEPageControl.PageContent>
     </controls:OOBEPageControl>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeWhatsNew.xaml

@@ -9,17 +9,17 @@
       xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
       mc:Ignorable="d"
       Loaded="Page_Loaded">
-    <ScrollViewer
-        VerticalScrollBarVisibility="Auto"
-        Padding="32,24,32,24">
 
-        <StackPanel
-            Orientation="Vertical"
-            VerticalAlignment="Top">
 
+    <Grid Margin="0,24,0,0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <StackPanel Grid.Row="0" Margin="32,0,0,0" Orientation="Vertical" VerticalAlignment="Top">
             <TextBlock
-                x:Name="TitleTxt"
-                Text=""
+                x:Uid="Oobe_WhatsNew"
                 AutomationProperties.HeadingLevel="Level1"
                 Style="{StaticResource TitleTextBlockStyle}" />
             <HyperlinkButton
@@ -30,23 +30,41 @@
                     x:Uid="Oobe_WhatsNew_DetailedReleaseNotesLink"
                     TextWrapping="Wrap" />
             </HyperlinkButton>
-            <muxc:ProgressRing
+        </StackPanel>
+        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+            <Grid Margin="32,24,32,24">
+                <muxc:ProgressRing Grid.Row="1"
                 x:Name="LoadingProgressRing"
                 IsIndeterminate="True"
+                VerticalAlignment="Center"
+                HorizontalAlignment="Center"
                 Visibility="Visible"/>
-            <muxc:InfoBar
+                <muxc:InfoBar
                 Severity="Error"
                 x:Name="ErrorInfoBar"
+                Grid.Row="1"
                 x:Uid="Oobe_WhatsNew_LoadingError"
                 Visibility="Collapsed"
+                VerticalAlignment="Top"
                 IsClosable="False"
                 IsOpen="True"
                 IsTabStop="True" />
-            <toolkitcontrols:MarkdownTextBlock
-                x:Name="ReleaseNotesMarkdown"
-                Visibility="Collapsed"
-                Background="Transparent"
-                LinkClicked="ReleaseNotesMarkdown_LinkClicked"/>
-        </StackPanel>
-    </ScrollViewer>
+                <toolkitcontrols:MarkdownTextBlock x:Name="ReleaseNotesMarkdown"
+                                                   Visibility="Collapsed"
+                                                   Grid.Row="1"
+                                                   Header1FontSize="20"
+                                                   Header2FontSize="17"
+                                                   Header2FontWeight="SemiBold"
+                                                   Header4FontSize="14"
+                                                   Header4FontWeight="SemiBold"
+                                                   Header1Margin="0,16,0,0"
+                                                   HorizontalRuleMargin="24"
+                                                   VerticalAlignment="Top"
+                                                   Background="Transparent"
+                                                   ParagraphMargin="0,0,0,0"
+                                                   TableMargin="24"
+                                                   LinkClicked="ReleaseNotesMarkdown_LinkClicked"/>
+            </Grid>
+        </ScrollViewer>
+    </Grid>
 </Page>

src/settings-ui/Settings.UI/OOBE/Views/OobeWhatsNew.xaml.cs

@@ -74,6 +74,7 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
             {
                 releaseNotesHtmlBuilder.AppendLine("# " + release.Name);
                 releaseNotesHtmlBuilder.AppendLine(removeHashRegex.Replace(release.ReleaseNotes, string.Empty));
+                releaseNotesHtmlBuilder.AppendLine(" ");
             }
 
             return releaseNotesHtmlBuilder.ToString();
@@ -81,8 +82,6 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
 
         private async void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
         {
-            ResourceLoader loader = ResourceLoader.GetForViewIndependentUse();
-            TitleTxt.Text = loader.GetString("Oobe_WhatsNew");
             try
             {
                 string releaseNotesMarkdown = await GetReleaseNotesMarkdown();