[Settings / OOBE] Adding Mica (#24327)

* Adding Mica

* Adding MinHeight

src/settings-ui/Settings.UI/MainWindow.xaml

@@ -1,14 +1,19 @@
-<Window
+<winuiex:WindowEx
     x:Class="Microsoft.PowerToys.Settings.UI.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:winuiex="using:WinUIEx"
+    MinWidth="480"
+    MinHeight="480"
     Closed="Window_Closed"
     mc:Ignorable="d">
-
+    <winuiex:WindowEx.Backdrop>
+        <winuiex:MicaSystemBackdrop />
+    </winuiex:WindowEx.Backdrop>
     <Grid>
         <local:ShellPage />
     </Grid>
-</Window>
+</winuiex:WindowEx>

src/settings-ui/Settings.UI/MainWindow.xaml.cs

@@ -22,7 +22,7 @@ namespace Microsoft.PowerToys.Settings.UI
     /// <summary>
     /// An empty window that can be used on its own or navigated to within a Frame.
     /// </summary>
-    public sealed partial class MainWindow : Window
+    public sealed partial class MainWindow : WindowEx
     {
         public MainWindow(bool isDark, bool createHidden = false)
         {

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

@@ -3,17 +3,11 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
-    xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="using:CommunityToolkit.WinUI.UI"
     HighContrastAdjustment="None"
     mc:Ignorable="d">
-    <!--
+    <Grid>
-        todo(Stefan):
-        BackdropMaterial.ApplyToRootOrPageBackground="True"
-    -->
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <NavigationView
             x:Name="NavigationView"
             IsBackButtonVisible="Collapsed"

src/settings-ui/Settings.UI/OobeWindow.xaml

@@ -1,4 +1,4 @@
-<Window
+<winuiex:WindowEx
     x:Class="Microsoft.PowerToys.Settings.UI.OobeWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -6,9 +6,14 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Closed="Window_Closed"
+    MinWidth="480"
+    MinHeight="480"
+    xmlns:winuiex="using:WinUIEx"
     mc:Ignorable="d">
-
+    <winuiex:WindowEx.Backdrop>
+        <winuiex:MicaSystemBackdrop/>
+    </winuiex:WindowEx.Backdrop>
     <Grid>
         <local:OobeShellPage x:Name="shellPage" />
     </Grid>
-</Window>
+</winuiex:WindowEx>

src/settings-ui/Settings.UI/OobeWindow.xaml.cs

@@ -13,13 +13,14 @@ using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
 using Windows.ApplicationModel.Resources;
 using Windows.Graphics;
+using WinUIEx;
 
 namespace Microsoft.PowerToys.Settings.UI
 {
     /// <summary>
     /// An empty window that can be used on its own or navigated to within a Frame.
     /// </summary>
-    public sealed partial class OobeWindow : Window
+    public sealed partial class OobeWindow : WindowEx
     {
         private PowerToysModules initialModule;
 

src/settings-ui/Settings.UI/Views/ShellPage.xaml

@@ -11,10 +11,6 @@
     xmlns:views="using:Microsoft.PowerToys.Settings.UI.Views"
     HighContrastAdjustment="None"
     mc:Ignorable="d">
-    <!--
-        TODO(stefan): Bring back Should be available in v1.1
-        BackdropMaterial.ApplyToRootOrPageBackground="True"
-    -->
 
     <i:Interaction.Behaviors>
         <ic:EventTriggerBehavior EventName="Loaded">
@@ -22,10 +18,7 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
 
-    <Grid
+    <Grid x:Name="RootGrid">
-        x:Name="RootGrid"
-        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-
         <NavigationView
             x:Name="navigationView"
             CompactModeThresholdWidth="1007"