[OOBE] Out of box experience window (#9973)

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

@@ -0,0 +1,74 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeColorPicker"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,0,0"
+                        VerticalAlignment="Top">
+                
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+                
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}"/>
+                
+            <TextBlock x:Uid="Oobe_ColorPicker_HowToUse"
+                       TextWrapping="Wrap"/>
+            
+            <TextBlock x:Uid="Oobe_TipsAndTricks"
+                       Style="{StaticResource OobeSubtitleStyle}"/>
+                
+            <TextBlock x:Uid="Oobe_ColorPicker_TipsAndTricks"
+                       TextWrapping="Wrap" />
+            
+            <StackPanel Orientation="Horizontal"
+                        Spacing="4"
+                        Margin="0,32,0,0">
+                <Button Style="{StaticResource AccentButtonStyle}" Click="Start_ColorPicker_Click">
+                    <TextBlock>
+                        <Run x:Uid="Oobe_Launch"/>
+                        <Run Text="{x:Bind ViewModel.ModuleName}"/>
+                    </TextBlock>
+                </Button>
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+        </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeColorPicker : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeColorPicker()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ColorPicker]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_ColorPicker_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.ColorPickerSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.ColorPickerSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ColorPickerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeFancyZones"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+                
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+                <TextBlock x:Uid="Oobe_FancyZones_HowToUse"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+                <TextBlock x:Uid="Oobe_FancyZones_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,47 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeFancyZones : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeFancyZones()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.FancyZones]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(FancyZonesPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,65 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeFileExplorer"
+      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:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Grid.Row="0"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToEnable"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_FileExplorer_HowToEnable"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,47 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeFileExplorer : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeFileExplorer()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.FileExplorer]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerPreviewPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,71 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeImageResizer"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Grid.Row="0"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ImageResizer_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ImageResizer_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock Text="Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,47 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeImageResizer : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeImageResizer()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ImageResizer]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ImageResizerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeKBM"
+      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:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToCreateMappings"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_KBM_HowToCreateMappings"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_KBM_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock Text="Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,47 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeKBM : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeKBM()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.KBM]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(KeyboardManagerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeOverview"
+      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:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="320"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap">
+                    <Run x:Uid="Oobe_Overview_Description" />
+                    <Hyperlink NavigateUri="{x:Bind ViewModel.DescriptionLink}"
+                               Foreground="{ThemeResource SystemControlBackgroundAccentBrush}">
+                        <Run x:Uid="Oobe_Overview_DescriptionLinkText" />
+                    </Hyperlink>
+                </TextBlock>
+
+                <TextBlock Margin="0,32,0,0"
+                           TextWrapping="Wrap">
+                <Run x:Uid="Oobe_Overview_CheckoutLatestVersion" />
+                <Hyperlink NavigateUri="{x:Bind ViewModel.Link}">
+                    <Run x:Uid="Oobe_Overview_LatestVersionLink" />
+                </Hyperlink>
+                </TextBlock>
+
+                <Button Click="SettingsLaunchButton_Click"
+                            Margin="0,32,0,0">
+                    <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                        <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                        <TextBlock x:Uid="OOBE_Settings" />
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,44 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeOverview : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeOverview()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.Overview]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(GeneralPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobePowerRename"
+      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:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_PowerRename_HowToUse"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_PowerRename_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,47 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobePowerRename : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobePowerRename()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.PowerRename]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerRenamePage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeRun"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_Run_HowToLaunch" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_Run_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="4">
+
+                    <Button Click="Start_Run_Click" Style="{StaticResource AccentButtonStyle}">
+                        <TextBlock>
+                        <Run x:Uid="Oobe_Launch" />
+                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                        </TextBlock>
+                    </Button>
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock  x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeRun : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeRun()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.Run]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_Run_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.RunSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.RunSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerLauncherPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShellPage"
+    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: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"
+    mc:Ignorable="d"
+    Loaded="UserControl_Loaded">
+
+    <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>
+        <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="NavigationView.PaneDisplayMode"
+                                Value="LeftMinimal" />
+                        <Setter Target="NavigationView.IsPaneToggleButtonVisible"
+                                Value="True" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <winui: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.PaneCustomContent>
+                <StackPanel Grid.Column="0" Margin="16"
+                            Orientation="Vertical">
+                    <TextBlock x:Uid="Oobe_GettingStarted"
+                               TextWrapping="Wrap"
+                               FontWeight="SemiBold"
+                               Style="{StaticResource PageTitleStyle}"
+                               Margin="0,0,0,16" />
+                </StackPanel>
+            </winui:NavigationView.PaneCustomContent>
+            <winui:NavigationView.Content>
+                <Frame x:Name="NavigationFrame" />
+            </winui:NavigationView.Content>
+        </winui:NavigationView>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,225 @@
+// 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;
+using System.Collections.ObjectModel;
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Windows.ApplicationModel.Resources;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeShellPage : UserControl
+    {
+        public static Func<string> RunSharedEventCallback { get; set; }
+
+        public static void SetRunSharedEventCallback(Func<string> implementation)
+        {
+            RunSharedEventCallback = implementation;
+        }
+
+        public static Func<string> ColorPickerSharedEventCallback { get; set; }
+
+        public static void SetColorPickerSharedEventCallback(Func<string> implementation)
+        {
+            ColorPickerSharedEventCallback = implementation;
+        }
+
+        public static Func<string> ShortcutGuideSharedEventCallback { get; set; }
+
+        public static void SetShortcutGuideSharedEventCallback(Func<string> implementation)
+        {
+            ShortcutGuideSharedEventCallback = implementation;
+        }
+
+        public static Action<Type> OpenMainWindowCallback { get; set; }
+
+        public static void SetOpenMainWindowCallback(Action<Type> implementation)
+        {
+            OpenMainWindowCallback = implementation;
+        }
+
+        /// <summary>
+        /// Gets view model.
+        /// </summary>
+        public OobeShellViewModel ViewModel { get; } = new OobeShellViewModel();
+
+        /// <summary>
+        /// Gets or sets a shell handler to be used to update contents of the shell dynamically from page within the frame.
+        /// </summary>
+        public static OobeShellPage OobeShellHandler { get; set; }
+
+        public ObservableCollection<OobePowerToysModule> Modules { get; }
+
+        public OobeShellPage()
+        {
+            InitializeComponent();
+
+            DataContext = ViewModel;
+            OobeShellHandler = this;
+
+            Modules = new ObservableCollection<OobePowerToysModule>();
+            ResourceLoader loader = ResourceLoader.GetForViewIndependentUse();
+
+            Modules.Insert((int)PowerToysModulesEnum.Overview, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_Welcome"),
+                Tag = "Overview",
+                IsNew = false,
+                Icon = "\uEF3C",
+                Image = "ms-appx:///Assets/Modules/ColorPicker.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerToys.png",
+                PreviewImageSource = "https://github.com/microsoft/PowerToys/raw/master/doc/images/overview/PT%20hero%20image.png",
+                DescriptionLink = "https://aka.ms/PowerToysOverview",
+                Link = "https://github.com/microsoft/PowerToys/releases/",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.ColorPicker, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ColorPicker"),
+                Tag = "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",
+                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.ImageResizer, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ImageResizer"),
+                Tag = "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",
+                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.Run, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_Run"),
+                Tag = "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.PowerRename, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_PowerRename"),
+                Tag = "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.FileExplorer, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_FileExplorer"),
+                Tag = "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.ShortcutGuide, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ShortcutGuide"),
+                Tag = "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",
+                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",
+            }); */
+        }
+
+        public void OnClosing()
+        {
+            if (NavigationView.SelectedItem != null)
+            {
+                ((OobePowerToysModule)NavigationView.SelectedItem).LogClosingModuleEvent();
+            }
+        }
+
+        private void UserControl_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (Modules.Count > 0)
+            {
+                NavigationView.SelectedItem = Modules[(int)PowerToysModulesEnum.Overview];
+            }
+        }
+
+        [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;
+
+            switch (selectedItem.Tag)
+            {
+                case "Overview": NavigationFrame.Navigate(typeof(OobeOverview)); 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;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShortcutGuide"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ShortcutGuide_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="8">
+                    <Button Click="Start_ShortcutGuide_Click" Style="{StaticResource AccentButtonStyle}">
+                        <TextBlock>
+                        <Run x:Uid="Oobe_Launch" />
+                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                        </TextBlock>
+                    </Button>
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeShortcutGuide : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeShortcutGuide()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ShortcutGuide]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_ShortcutGuide_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.ShortcutGuideSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.ShortcutGuideSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ShortcutGuidePage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeVideoConference"
+    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:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_VideoConference_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="8">
+                    <Button Click="SettingsLaunchButton_Click"> 
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

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

@@ -0,0 +1,41 @@
+// 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 Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeVideoConference : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeVideoConference()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.VideoConference]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}