Refactor CompactSizing sample (#1684)

- Removed unused CompactSpacing page - Updated the documentation so it's inline with WinUI 3
microsoft · Dec 12, 2024 · 7d66882 · 7d66882
1 parent a766446
commit 7d66882
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 187 deletions.
diff --git a/WinUIGallery/ControlPages/CompactSizingPage.xaml b/WinUIGallery/ControlPages/CompactSizingPage.xaml
@@ -1,33 +1,76 @@
 <!--
-//*********************************************************
-//
-// Copyright (c) Microsoft. All rights reserved.
-// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
-// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
-// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
-// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
-//
-//*********************************************************
+    //*********************************************************
+    //
+    // Copyright (c) Microsoft. All rights reserved.
+    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
+    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
+    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
+    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
+    //
+    //*********************************************************
 -->
-    
+
 <Page
     x:Class="WinUIGallery.ControlPages.CompactSizingPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:WinUIGallery"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:WinUIGallery"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     x:Name="compactPage"
     mc:Ignorable="d">
 
     <Grid>
-        <local:ControlExample x:Name="Example1" HeaderText="Compact Sizing for controls" Loaded="Example1_Loaded">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <RichTextBlock Margin="0,24,0,0">
+            <Paragraph>
+                <Run FontWeight="SemiBold" Text="Controls that support compact styling:" />
+                <LineBreak />
+                <Run Text="• ListView" />
+                <LineBreak />
+                <Run Text="• TextBox" />
+                <LineBreak />
+                <Run Text="• PasswordBox" />
+                <LineBreak />
+                <Run Text="• AutoSuggestBox" />
+                <LineBreak />
+                <Run Text="• ComboBox" />
+                <LineBreak />
+                <Run Text="• DatePicker" />
+                <LineBreak />
+                <Run Text="• TimePicker" />
+                <LineBreak />
+                <Run Text="• TreeView" />
+                <LineBreak />
+                <Run Text="• NavigationView" />
+                <LineBreak />
+                <Run Text="• MenuBar" />
+            </Paragraph>
+        </RichTextBlock>
+        <local:ControlExample
+            x:Name="Example1"
+            Grid.Row="1"
+            HeaderText="Compact Sizing for controls"
+            Loaded="Example1_Loaded">
             <Frame x:Name="ContentFrame" />
 
             <local:ControlExample.Options>
                 <RadioButtons Header="Fluent Standard and Compact Sizing">
-                    <RadioButton Content="Standard" Tag="StandardSize" GroupName="ControlSize" Checked="Standard_Checked" IsChecked="True" />
-                    <RadioButton Content="Compact" Tag="CompactSize" GroupName="ControlSize" Checked="Compact_Checked" />
+                    <RadioButton
+                        Checked="Standard_Checked"
+                        Content="Standard"
+                        GroupName="ControlSize"
+                        IsChecked="True"
+                        Tag="StandardSize" />
+                    <RadioButton
+                        Checked="Compact_Checked"
+                        Content="Compact"
+                        GroupName="ControlSize"
+                        Tag="CompactSize" />
                 </RadioButtons>
             </local:ControlExample.Options>
 
@@ -36,10 +79,6 @@
 &lt;Page.Resources&gt;
     &lt;ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" /&gt;
 &lt;/Page.Resources&gt;
-
-&lt;Grid.Resources&gt;
-    &lt;ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" /&gt;
-&lt;/Grid.Resources&gt;
                 </x:String>
             </local:ControlExample.Xaml>
         </local:ControlExample>

diff --git a/WinUIGallery/ControlPages/CompactSpacingPage.xaml b/WinUIGallery/ControlPages/CompactSpacingPage.xaml
diff --git a/WinUIGallery/ControlPages/CompactSpacingPage.xaml.cs b/WinUIGallery/ControlPages/CompactSpacingPage.xaml.cs
diff --git a/WinUIGallery/DataModel/ControlInfoData.json b/WinUIGallery/DataModel/ControlInfoData.json
@@ -2762,7 +2762,7 @@
           "Title": "Compact Sizing",
           "Subtitle": "How to use a Resource Dictionary to enable compact sizing.",
           "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png",
-          "Description": "Compact dictionary included in WinUI 2.1. Allows you to create compact smaller apps by adding this at the page or the grid level.",
+          "Description": "Enables the creation of compact, smaller apps by adding a style resource at the app, page or control level.",
           "Docs": [
             {
               "Title": "Spacing",

diff --git a/WinUIGallery/SamplePages/SampleCompactSizingPage.xaml b/WinUIGallery/SamplePages/SampleCompactSizingPage.xaml
@@ -1,13 +1,13 @@
 <!--
-//*********************************************************
-//
-// Copyright (c) Microsoft. All rights reserved.
-// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
-// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
-// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
-// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
-//
-//*********************************************************
+    //*********************************************************
+    //
+    // Copyright (c) Microsoft. All rights reserved.
+    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
+    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
+    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
+    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
+    //
+    //*********************************************************
 -->
 <Page
     x:Class="WinUIGallery.SamplePages.SampleCompactSizingPage"
@@ -20,19 +20,22 @@
     <Page.Resources>
         <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
     </Page.Resources>
-    
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
         <StackPanel Spacing="8">
             <StackPanel.Resources>
                 <Thickness x:Key="TextBoxTopHeaderMargin">0,2,0,2</Thickness>
                 <Thickness x:Key="PasswordBoxTopHeaderMargin">0,2,0,2</Thickness>
             </StackPanel.Resources>
-            <TextBlock x:Name="HeaderBlock" Text="Compact Size" FontSize="18"/>
-            <TextBox Header="First Name:" x:Name="firstName" />
-            <TextBox Header="Last Name:" x:Name="lastName"  />
-            <PasswordBox Header="Password:" x:Name="password"/>
-            <PasswordBox Header="Confirm Password:" x:Name="confirmPassword"/>
-            <DatePicker Header="Pick a date" x:Name="chosenDate"/>
+            <TextBlock
+                x:Name="HeaderBlock"
+                FontSize="18"
+                Text="Compact Size" />
+            <TextBox x:Name="firstName" Header="First Name:" />
+            <TextBox x:Name="lastName" Header="Last Name:" />
+            <PasswordBox x:Name="password" Header="Password:" />
+            <PasswordBox x:Name="confirmPassword" Header="Confirm Password:" />
+            <DatePicker x:Name="chosenDate" Header="Pick a date" />
         </StackPanel>
     </Grid>
 </Page>
diff --git a/WinUIGallery/SamplePages/SampleStandardSizingPage.xaml b/WinUIGallery/SamplePages/SampleStandardSizingPage.xaml
@@ -1,13 +1,13 @@
 <!--
-//*********************************************************
-//
-// Copyright (c) Microsoft. All rights reserved.
-// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
-// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
-// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
-// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
-//
-//*********************************************************
+    //*********************************************************
+    //
+    // Copyright (c) Microsoft. All rights reserved.
+    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
+    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
+    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
+    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
+    //
+    //*********************************************************
 -->
 <Page
     x:Class="WinUIGallery.SamplePages.SampleStandardSizingPage"
@@ -17,14 +17,17 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid>
         <StackPanel x:Name="CompactPanel" Spacing="16">
-            <TextBlock x:Name="HeaderBlock" Text="Standard Size" FontSize="18"/>
-            <TextBox Header="First Name:" x:Name="firstName" />
-            <TextBox Header="Last Name:" x:Name="lastName"  />
-            <PasswordBox Header="Password:" x:Name="password"/>
-            <PasswordBox Header="Confirm Password:" x:Name="confirmPassword"/>
-            <DatePicker Header="Pick a date" x:Name="chosenDate"/>
+            <TextBlock
+                x:Name="HeaderBlock"
+                FontSize="18"
+                Text="Standard Size" />
+            <TextBox x:Name="firstName" Header="First Name:" />
+            <TextBox x:Name="lastName" Header="Last Name:" />
+            <PasswordBox x:Name="password" Header="Password:" />
+            <PasswordBox x:Name="confirmPassword" Header="Confirm Password:" />
+            <DatePicker x:Name="chosenDate" Header="Pick a date" />
         </StackPanel>
     </Grid>
 </Page>