[Settings] Adding MinWidth (#25405)

* Adding MinWidth

* Proper reflowing of info

src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml

@@ -19,14 +19,30 @@
             TrueValue="Visible" />
     </UserControl.Resources>
 
-    <Grid
+    <Grid Padding="20,0,0,0" RowSpacing="24">
-        Padding="20,0,0,0"
-        RowSpacing="24">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="480" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="DescriptionPanel.(Grid.Row)" Value="1" />
+                        <Setter Target="DescriptionPanel.(Grid.Column)" Value="0" />
+                        <Setter Target="DescriptionPanel.(Grid.ColumnSpan)" Value="2" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
         <TextBlock
             x:Name="Header"
             MaxWidth="{StaticResource PageMaxWidth}"
@@ -38,10 +54,10 @@
             Text="{x:Bind ModuleTitle}" />
 
         <ScrollViewer Grid.Row="1">
-            <Grid ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
+            <Grid
                 Padding="0,0,20,48"
+                ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                 RowSpacing="24">
-
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
@@ -51,12 +67,19 @@
                 <!--  Top panel  -->
                 <Grid
                     MaxWidth="{StaticResource PageMaxWidth}"
-                    ColumnSpacing="16">
+                    ColumnSpacing="16"
+                    RowSpacing="16">
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="160" />
+                        <ColumnDefinition Width="Auto" />
                         <ColumnDefinition Width="*" />
                     </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
                     <Border
+                        MaxWidth="160"
+                        HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         CornerRadius="4">
                         <Image AutomationProperties.AccessibilityView="Raw">
@@ -66,7 +89,7 @@
                         </Image>
                     </Border>
 
-                    <StackPanel Grid.Column="1">
+                    <StackPanel x:Name="DescriptionPanel" Grid.Column="1">
                         <TextBlock
                             x:Name="AboutDescription"
                             Foreground="{ThemeResource TextFillColorSecondaryBrush}"
@@ -80,20 +103,14 @@
                             ItemsSource="{x:Bind PrimaryLinks}">
                             <ItemsControl.ItemTemplate>
                                 <DataTemplate x:DataType="local:PageLink">
-                                    <HyperlinkButton
+                                    <HyperlinkButton NavigateUri="{x:Bind Link}" Style="{StaticResource TextButtonStyle}">
-                                        NavigateUri="{x:Bind Link}"
+                                        <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
-                                        Style="{StaticResource TextButtonStyle}">
-                                        <TextBlock
-                                            Text="{x:Bind Text}"
-                                            TextWrapping="Wrap" />
                                     </HyperlinkButton>
                                 </DataTemplate>
                             </ItemsControl.ItemTemplate>
                             <ItemsControl.ItemsPanel>
                                 <ItemsPanelTemplate>
-                                    <controls:WrapPanel
+                                    <controls:WrapPanel HorizontalSpacing="24" Orientation="Horizontal" />
-                                        HorizontalSpacing="24"
-                                        Orientation="Horizontal" />
                                 </ItemsPanelTemplate>
                             </ItemsControl.ItemsPanel>
                         </ItemsControl>
@@ -127,20 +144,14 @@
                         ItemsSource="{x:Bind SecondaryLinks}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate x:DataType="local:PageLink">
-                                <HyperlinkButton
+                                <HyperlinkButton NavigateUri="{x:Bind Link}" Style="{StaticResource TextButtonStyle}">
-                                    NavigateUri="{x:Bind Link}"
+                                    <TextBlock Text="{x:Bind Text}" TextWrapping="Wrap" />
-                                    Style="{StaticResource TextButtonStyle}">
-                                    <TextBlock
-                                        Text="{x:Bind Text}"
-                                        TextWrapping="Wrap" />
                                 </HyperlinkButton>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                                <controls:WrapPanel
+                                <controls:WrapPanel HorizontalSpacing="24" Orientation="Horizontal" />
-                                    HorizontalSpacing="24"
-                                    Orientation="Horizontal" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                     </ItemsControl>

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

@@ -1,14 +1,17 @@
-<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">
 
     <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/OobeWindow.xaml

@@ -1,14 +1,17 @@
-<Window
+<winuiex:WindowEx
+    xmlns:winuiex="using:WinUIEx"
     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"
     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"
+    MinWidth="480"
+    MinHeight="480"
     Closed="Window_Closed"
     mc:Ignorable="d">
 
     <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;