From 6518fd836714909ba6eca3b90abe95849e896466 Mon Sep 17 00:00:00 2001
From: "Aleksandar Marinov (INFRAGISTICS INC)" <b-amarinov@microsoft.com>
Date: Mon, 13 Jul 2026 12:14:45 +0200
Subject: [PATCH] Fix 2D scrolling on Design Guidance pages at reflow
 dimensions (WCAG 1.4.10)

Typography, Spacing and Geometry pages showed both horizontal and vertical scrollbars in reflow mode because their reference tables used fixed-width Grid columns and the images used fixed sizes, forcing content wider than the viewport. Disable horizontal scrolling and make the tables reflow via proportional (star) column widths capped with MaxWidth, and let the images scale down (and wrap, on Spacing) so content fits within the available width and only a single vertical scrollbar is needed.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../Views/DesignGuidance/GeometryPage.xaml    | 12 ++--
 .../Views/DesignGuidance/SpacingPage.xaml     | 35 +++++-----
 .../Views/DesignGuidance/TypographyPage.xaml  | 68 +++++++++----------
 3 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/Sample Applications/WPFGallery/Views/DesignGuidance/GeometryPage.xaml b/Sample Applications/WPFGallery/Views/DesignGuidance/GeometryPage.xaml
index 8ee027686..2539b33c9 100644
--- a/Sample Applications/WPFGallery/Views/DesignGuidance/GeometryPage.xaml	
+++ b/Sample Applications/WPFGallery/Views/DesignGuidance/GeometryPage.xaml	
@@ -17,7 +17,7 @@
 
         <controls:PageHeader Margin="0,0,0,32" Title="{Binding ViewModel.PageTitle}" ShowDescription="False"/>
 
-        <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
+        <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
                 <StackPanel Margin="0,0,0,24" Orientation="Vertical">
                 <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap">
                     Geometry describes the shape, size and position of UI elements on screen. 
@@ -28,7 +28,7 @@
                 <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,12">
                     You can reference built-in corner radii styles using: CornerRadius="{StaticResource ControlCornerRadius}" .
                 </TextBlock>
-				<Border Height="300" Width="500" HorizontalAlignment="Left">
+				<Border MaxHeight="300" MaxWidth="500" HorizontalAlignment="Left">
 					<Image x:Name="GeometryImage" Source="/Assets/Design/Geometry.dark.png" AutomationProperties.Name="Example of corner radius." />
 				</Border>
                 <controls:ControlExample
@@ -46,7 +46,7 @@
                             <Grid Margin="0,0,0,24" HorizontalAlignment="Stretch">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="148" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="2*" />
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
@@ -78,7 +78,7 @@
                                 <Grid HorizontalAlignment="Stretch" MinHeight="60">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="148" />
-                                        <ColumnDefinition Width="400" />
+                                        <ColumnDefinition Width="2*" />
                                         <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
                                     <StackPanel Grid.Column="0" Orientation="Horizontal">
@@ -119,7 +119,7 @@
                                 <Grid HorizontalAlignment="Stretch" MinHeight="60">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="148" />
-                                        <ColumnDefinition Width="400" />
+                                        <ColumnDefinition Width="2*" />
                                         <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
                                     <StackPanel Grid.Column="0" Orientation="Horizontal">
@@ -160,7 +160,7 @@
                                 <Grid HorizontalAlignment="Stretch" MinHeight="60">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="148" />
-                                        <ColumnDefinition Width="400" />
+                                        <ColumnDefinition Width="2*" />
                                         <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
                                     <StackPanel Grid.Column="0" Orientation="Horizontal">
diff --git a/Sample Applications/WPFGallery/Views/DesignGuidance/SpacingPage.xaml b/Sample Applications/WPFGallery/Views/DesignGuidance/SpacingPage.xaml
index 725b672c4..96e822528 100644
--- a/Sample Applications/WPFGallery/Views/DesignGuidance/SpacingPage.xaml	
+++ b/Sample Applications/WPFGallery/Views/DesignGuidance/SpacingPage.xaml	
@@ -17,7 +17,7 @@
 
         <controls:PageHeader Margin="0,0,0,32" Title="{Binding ViewModel.PageTitle}" Description="{Binding ViewModel.PageDescription}" />
 
-        <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Auto"
+        <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Disabled"
             Focusable="True" IsTabStop="True" AutomationProperties.Name="Spacing guidance content" Grid.Row="1">
             <StackPanel Margin="0,0,0,24" Orientation="Vertical">
                 <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap">
@@ -26,8 +26,8 @@
                 <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,12">
                     Use the following spacing values to maintain a consistent layout throughout your app.
                 </TextBlock>
-                <StackPanel Margin="0,0,0,16" Orientation="Horizontal">
-                    <Grid VerticalAlignment="Top">
+                <WrapPanel Margin="0,0,0,16">
+                    <Grid VerticalAlignment="Top" MaxWidth="360" Margin="0,0,16,16">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -36,11 +36,11 @@
                         HorizontalAlignment="Center"
                         Style="{StaticResource SubtitleTextBlockStyle}"
                         Text="Page with cards layout" />
-                        <Border Grid.Row="1" Height="500">
+                        <Border Grid.Row="1" MaxHeight="500">
                             <Image x:Name="CardImage" Source="/Assets/Design/Cards.dark.png" AutomationProperties.Name="Example of spacing in a page with cards layout" />
                         </Border>
                     </Grid>
-                    <Grid VerticalAlignment="Top">
+                    <Grid VerticalAlignment="Top" MaxWidth="360" Margin="0,0,16,16">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -49,19 +49,18 @@
                         HorizontalAlignment="Center"
                         Style="{StaticResource SubtitleTextBlockStyle}"
                         Text="Form layout" />
-                        <Border Grid.Row="1" Height="500">
+                        <Border Grid.Row="1" MaxHeight="500">
                             <Image x:Name="DialogImage" Source="/Assets/Design/Dialog.dark.png" AutomationProperties.Name="Example of spacing in a form layout" />
                         </Border>
                     </Grid>
-                </StackPanel>
-                <Border
-                    Margin="0,10,0,10"
+                </WrapPanel>
+                <Border Margin="0,10,0,10"
                     Padding="16"
                     Background="{DynamicResource SolidBackgroundFillColorBaseBrush}"
                     BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
                     BorderThickness="1,1,1,0"
                     CornerRadius="8,8,0,0">
-                    <Grid>
+                    <Grid HorizontalAlignment="Left" MaxWidth="590">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
                             <RowDefinition Height="Auto"/>
@@ -79,7 +78,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="100" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -102,7 +101,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -128,7 +127,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -153,7 +152,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -178,7 +177,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -203,7 +202,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -228,7 +227,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
@@ -253,7 +252,7 @@
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="90" />
                                     <ColumnDefinition Width="100" />
-                                    <ColumnDefinition Width="400" />
+                                    <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <TextBlock
                                         Margin="16,0,0,0"
diff --git a/Sample Applications/WPFGallery/Views/DesignGuidance/TypographyPage.xaml b/Sample Applications/WPFGallery/Views/DesignGuidance/TypographyPage.xaml
index 163de81a1..4f2871299 100644
--- a/Sample Applications/WPFGallery/Views/DesignGuidance/TypographyPage.xaml	
+++ b/Sample Applications/WPFGallery/Views/DesignGuidance/TypographyPage.xaml	
@@ -17,7 +17,7 @@
 
         <controls:PageHeader Margin="0,0,0,32" Title="{Binding ViewModel.PageTitle}" Description="{Binding ViewModel.PageDescription}" />
 
-    <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
+    <ScrollViewer Margin="0,0,0,24" Padding="0,0,24,0" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
       <StackPanel Margin="0,0,0,24" Orientation="Vertical">
         <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" >
           Type helps provide structure and hierarchy to UI. The default font for Windows is Segoe UI Variable.</TextBlock>
@@ -37,7 +37,7 @@
                 &#10;&lt;TextBlock Text=&quot;Title&quot; Style=&quot;{StaticResource TitleTextBlockStyle}&quot; /&gt;
                 &#10;&lt;TextBlock Text=&quot;Title Large&quot; Style=&quot;{StaticResource TitleLargeTextBlockStyle}&quot; /&gt;
                 &#10;&lt;TextBlock Text=&quot;Display&quot; Style=&quot;{StaticResource DisplayTextBlockStyle}&quot; /&gt;" >
-                <Grid>
+                <Grid HorizontalAlignment="Left" MaxWidth="684">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto"/>
                         <RowDefinition Height="Auto"/>
@@ -51,10 +51,10 @@
                     <StackPanel Grid.Row="0">
                         <Grid Margin="0,0,0,24" HorizontalAlignment="Stretch">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -85,10 +85,10 @@
                     <StackPanel Grid.Row="1">
                         <Grid HorizontalAlignment="Stretch" Background="{StaticResource CardBackgroundFillColorDefaultBrush}" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -115,10 +115,10 @@
                     <StackPanel Grid.Row="2">
                         <Grid HorizontalAlignment="Stretch" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -145,10 +145,10 @@
                     <StackPanel Grid.Row="3">
                         <Grid HorizontalAlignment="Stretch" Background="{StaticResource CardBackgroundFillColorDefaultBrush}" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -175,10 +175,10 @@
                     <StackPanel Grid.Row="4">
                         <Grid HorizontalAlignment="Stretch" MinHeight="68">
                             <Grid.ColumnDefinitions> 
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -205,10 +205,10 @@
                     <StackPanel Grid.Row="5">
                         <Grid Margin="0,0,0,24" HorizontalAlignment="Stretch" Background="{StaticResource CardBackgroundFillColorDefaultBrush}" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -235,10 +235,10 @@
                     <StackPanel Grid.Row="6">
                         <Grid Margin="0,0,0,24" HorizontalAlignment="Stretch" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                             </Grid.ColumnDefinitions>
                             <TextBlock
                         Margin="16,0,0,0"
@@ -265,10 +265,10 @@
                     <StackPanel Grid.Row="7">
                         <Grid Margin="0,0,0,24" HorizontalAlignment="Stretch" Background="{StaticResource CardBackgroundFillColorDefaultBrush}" MinHeight="68">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="272" />
-                                <ColumnDefinition Width="136" />
-                                <ColumnDefinition Width="112" />
-                                <ColumnDefinition Width="164" />
+                                <ColumnDefinition Width="272*" />
+                                <ColumnDefinition Width="136*" />
+                                <ColumnDefinition Width="112*" />
+                                <ColumnDefinition Width="164*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <TextBlock