[Settings]New Landing Page Experimentation (#22365)

Co-authored-by: Sophia Chen <sophia.six.chen@gmail.com>
Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Sophia Chen <sophchen@microsoft.com>

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

@@ -0,0 +1,193 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeOverviewAlternate"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <controls:OOBEPageControl
+        x:Uid="Oobe_Overview"
+        HeroImage="ms-appx:///Assets/Modules/OOBE/OOBEPTHero.png"
+        HeroImageHeight="120">
+
+        <controls:OOBEPageControl.PageContent>
+            <StackPanel Orientation="Vertical">
+                <TextBlock
+                    x:Uid="Alternate_OOBE_Description"
+                    Margin="0,24,0,12"
+                    FontWeight="SemiBold" />
+                <GridView Margin="-8,0,0,0" SelectionMode="None">
+                    <GridViewItem>
+                        <Grid
+                            Width="280"
+                            Margin="8"
+                            Padding="16,16,16,10"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8"
+                            RowSpacing="0">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+                            <Image
+                                Width="36"
+                                HorizontalAlignment="Left"
+                                Source="ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_FancyZones_Title"
+                                Grid.Row="1"
+                                Margin="0,12,0,6"
+                                HorizontalAlignment="Left"
+                                FontSize="16"
+                                FontWeight="SemiBold"
+                                TextWrapping="Wrap" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_FancyZones_Description"
+                                Grid.Row="2"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                TextWrapping="Wrap" />
+                            <controls:ShortcutWithTextLabelControl
+                                x:Name="FancyZonesHotkeyControl"
+                                Grid.Row="3"
+                                Margin="0,8,0,0" />
+                        </Grid>
+                    </GridViewItem>
+
+                    <GridViewItem>
+                        <Grid
+                            Width="280"
+                            Padding="16,16,16,10"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8"
+                            RowSpacing="0">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+                            <Image
+                                Width="36"
+                                HorizontalAlignment="Left"
+                                Source="ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_Run_Title"
+                                Grid.Row="1"
+                                Margin="0,12,0,6"
+                                HorizontalAlignment="Left"
+                                FontSize="16"
+                                FontWeight="SemiBold"
+                                TextWrapping="Wrap" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_Run_Description"
+                                Grid.Row="2"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                TextWrapping="Wrap" />
+                            <controls:ShortcutWithTextLabelControl
+                                x:Name="RunHotkeyControl"
+                                Grid.Row="3"
+                                Margin="0,8,0,0" />
+                        </Grid>
+                    </GridViewItem>
+
+                    <GridViewItem>
+                        <Grid
+                            Width="280"
+                            Padding="16,16,16,10"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8"
+                            RowSpacing="0">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+                            <Image
+                                Width="36"
+                                HorizontalAlignment="Left"
+                                Source="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_ColorPicker_Title"
+                                Grid.Row="1"
+                                Margin="0,12,0,6"
+                                HorizontalAlignment="Left"
+                                FontSize="16"
+                                FontWeight="SemiBold"
+                                TextWrapping="Wrap" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_ColorPicker_Description"
+                                Grid.Row="2"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Text="To pick a color:"
+                                TextWrapping="Wrap" />
+                            <controls:ShortcutWithTextLabelControl
+                                x:Name="ColorPickerHotkeyControl"
+                                Grid.Row="3"
+                                Margin="0,8,0,0" />
+                        </Grid>
+                    </GridViewItem>
+
+                    <GridViewItem>
+                        <Grid
+                            Width="280"
+                            Padding="16,16,16,10"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8"
+                            RowSpacing="0">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+                            <Image
+                                Width="36"
+                                HorizontalAlignment="Left"
+                                Source="ms-appx:///Assets/FluentIcons/FluentIconsAlwaysOnTop.png" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_AlwaysOnTop_Title"
+                                Grid.Row="1"
+                                Margin="0,12,0,6"
+                                HorizontalAlignment="Left"
+                                FontSize="16"
+                                FontWeight="SemiBold"
+                                TextWrapping="Wrap" />
+                            <TextBlock
+                                x:Uid="Alternate_OOBE_AlwaysOnTop_Description"
+                                Grid.Row="2"
+                                FontSize="12"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                TextWrapping="Wrap" />
+                            <controls:ShortcutWithTextLabelControl
+                                x:Name="AlwaysOnTopHotkeyControl"
+                                Grid.Row="3"
+                                Margin="0,8,0,0" />
+                        </Grid>
+                    </GridViewItem>
+
+                </GridView>
+            </StackPanel>
+        </controls:OOBEPageControl.PageContent>
+    </controls:OOBEPageControl>
+</Page>

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

@@ -0,0 +1,50 @@
+// 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.Library;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeOverviewAlternate : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeOverviewAlternate()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModules.Overview]);
+            DataContext = ViewModel;
+
+            FancyZonesHotkeyControl.Keys = SettingsRepository<FancyZonesSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.FancyzonesEditorHotkey.Value.GetKeysList();
+            RunHotkeyControl.Keys = SettingsRepository<PowerLauncherSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.OpenPowerLauncher.GetKeysList();
+            ColorPickerHotkeyControl.Keys = SettingsRepository<ColorPickerSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.ActivationShortcut.GetKeysList();
+            AlwaysOnTopHotkeyControl.Keys = SettingsRepository<AlwaysOnTopSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.Hotkey.Value.GetKeysList();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Microsoft.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/Settings.UI/OOBE/Views/OobeOverviewPlaceholder.xaml

@@ -0,0 +1,23 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!-- Licensed under the MIT License. See LICENSE in the project root for license information. -->
+
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeOverviewPlaceholder"
+    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"
+    Loaded="Page_Loaded"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid Margin="0,24,0,0">
+        <ProgressRing
+                    x:Name="LoadingProgressRing"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    IsIndeterminate="True"
+                    Visibility="Visible" />
+    </Grid>
+</Page>

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

@@ -0,0 +1,73 @@
+// 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.Tasks;
+using AllExperiments;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Services;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeOverviewPlaceholder : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeOverviewPlaceholder()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModules.Overview]);
+            DataContext = ViewModel;
+        }
+
+        private static async Task<bool> GetIsExperiment()
+        {
+            Experiments landingPageExp = new Experiments();
+            var experimentEnabled = await landingPageExp.EnableLandingPageExperimentAsync();
+            return experimentEnabled;
+        }
+
+        private async void Reload()
+        {
+            var isExperiment = await GetIsExperiment();
+
+            if (isExperiment)
+            {
+                this.Frame.Navigate(typeof(OobeOverviewAlternate));
+            }
+            else
+            {
+                this.Frame.Navigate(typeof(OobeOverview));
+            }
+        }
+
+        private void Page_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            Reload();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Microsoft.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/Settings.UI/OOBE/Views/OobeShellPage.xaml.cs

@@ -4,6 +4,8 @@
 
 using System;
 using System.Collections.ObjectModel;
+using System.Globalization;
+using AllExperiments;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
 using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
@@ -47,10 +49,16 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
 
         public ObservableCollection<OobePowerToysModule> Modules { get; }
 
+        private static ISettingsUtils settingsUtils = new SettingsUtils();
+
+        private bool ExperimentationToggleSwitchEnabled { get; set; } = true;
+
         public OobeShellPage()
         {
             InitializeComponent();
 
+            ExperimentationToggleSwitchEnabled = SettingsRepository<GeneralSettings>.GetInstance(settingsUtils).SettingsConfig.EnableExperimentation;
+
             DataContext = ViewModel;
             OobeShellHandler = this;
             UpdateUITheme();
@@ -186,7 +194,27 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
             {
                 switch (selectedItem.Tag)
                 {
-                    case "Overview": NavigationFrame.Navigate(typeof(OobeOverview)); break;
+                    case "Overview":
+                        if (ExperimentationToggleSwitchEnabled)
+                        {
+                            switch (AllExperiments.Experiments.LandingPageExperiment)
+                            {
+                                case Experiments.ExperimentState.Enabled:
+                                    NavigationFrame.Navigate(typeof(OobeOverviewAlternate)); break;
+                                case Experiments.ExperimentState.Disabled:
+                                    NavigationFrame.Navigate(typeof(OobeOverview)); break;
+                                case Experiments.ExperimentState.NotLoaded:
+                                    NavigationFrame.Navigate(typeof(OobeOverviewPlaceholder)); break;
+                            }
+
+                            break;
+                        }
+                        else
+                        {
+                            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;