[Settings] New UX (#12470)

* Removed hardcoded background

* Background

* Updated pages

* Added OOBE to shellpage

* Margin fixes

* Fix

* Resource update

* Resource string update

* Removed reference from installer file

* Updated UI fixes and remove conflicts

* Adding new settings control

* PowerRename

* Sidepanel updates

* Shortcut Guide

* Updates screeens

* General page updates

* Awake UX update

* Changed order for power preview note

* Fixes

* UI fixes

* KBM

* IsEnabled state support

* Added new controls

* Update

* Updated nugest packages

* Replaced itemscontrol

* Introducing setting button style

* FancyZones page

* Plugin page

* Switch case

* Fixed typo

* Plugin manager update

* Introducing SettingExpander

* Setting automation properties

* Accesibility improvements

* VCM and cleanup

* Refactoring OOBE pages part 1

* OOBE XAML refactoring

* Added MinWidth to actioncontent controls

* Updates to various settings

* Spell update

* Update to author label

* Clean up

* Removing redunant files

* Move file

* Updated files

* Revert "Updated files"

This reverts commit 1a5c887eae.

* Revert "Move file"

This reverts commit 2b06c75c1f.

* Revert "Removing redunant files"

This reverts commit fe79ec1701.

* Revert "Clean up"

This reverts commit 028e15fab6.

* Removed redundant styles

* Revert "Removed redundant styles"

This reverts commit dfdfd65021.

* Files cleanup

* Removing converter, updating background and paddings

* Styling updates

* Unit test updates

* Fixes

* Installer fixes

* Update Resources.resw

* Shell page updates

* Updated pagelinks

* Styles re-ordering

* Updated converter

* Updated ToggleSwitch style

* Bugfixes

* Typo fix

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

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

* Bugfixes

* Typo fix

* Hiding VCM

* Bugfixes

* Download button fix

* Remove Newtonsoft.Json from installer file

* Updated visuals

* Bugfixes

* Syntax fix

* Updated installer file

* Bugfixes

* New label

* Theming support for OOBE

* Put back in Documentation hyperlink

* Right uid

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

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

@@ -5,63 +5,28 @@
       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"
-      mc:Ignorable="d"
-      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+      mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <Image Stretch="UniformToFill"
-               AutomationProperties.AccessibilityView="Raw"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           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>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
                 <TextBlock x:Uid="Oobe_HowToEnable"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FileExplorer_HowToEnable" />
-                
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
 
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <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 HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_PowerPreview"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
 </Page>