[Settings][Flyout] Fix missing borders on Windows 10 (#23825)

* fix missing borders on windows 10

* use correct color brush

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

@@ -1,4 +1,4 @@
-<winuiex:WindowEx
+<winuiex:WindowEx
     x:Class="Microsoft.PowerToys.Settings.UI.FlyoutWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -7,6 +7,8 @@
     xmlns:local="using:Microsoft.PowerToys.Settings.UI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:winuiex="using:WinUIEx"
+    xmlns:i="using:Microsoft.Xaml.Interactivity"
+    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
     Title="PowerToys Settings"
     IsAlwaysOnTop="True"
     IsMaximizable="False"
@@ -27,6 +29,21 @@
             LightTintOpacity="0" />
     </winuiex:WindowEx.Backdrop>
     <Grid>
-        <flyout:ShellPage x:Name="FlyoutShellPage"/>
+        <!-- HACK: https://github.com/microsoft/microsoft-ui-xaml/issues/7629 -->
+        <!-- W11 grey border, W10: no border  -->
+        <i:Interaction.Behaviors>
+            <ic:DataTriggerBehavior
+                Binding="{x:Bind ViewModel.Windows10}"
+                ComparisonCondition="Equal"
+                Value="True">
+                <ic:ChangePropertyAction
+                    PropertyName="BorderThickness"
+                    Value="1" />
+                <ic:ChangePropertyAction
+                    PropertyName="BorderBrush"
+                    Value="{ThemeResource SurfaceStrokeColorDefaultBrush}" />
+            </ic:DataTriggerBehavior>
+        </i:Interaction.Behaviors>
+        <flyout:ShellPage x:Name="FlyoutShellPage" />
     </Grid>
 </winuiex:WindowEx>