From 8e9872335a388f25ce6d805b36e8aef643738f1b Mon Sep 17 00:00:00 2001
From: Jay <65828559+Jay-o-Way@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:40:40 +0100
Subject: [PATCH] Adjust padding on control sample codes to prevent code
 occlusion through scrollbars (#1490)

<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Remove padding of UserControl and Grid, and set (bottom)margin on
ContentPresenter.

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
fixes #1489, ~1501~

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

![image](https://github.com/microsoft/WinUI-Gallery/assets/65828559/d6aa1fed-1117-415d-8bb1-d8c7bd55bd46)

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

P.S. It's **Styler** that moved the **VisualStateManager** bits around
---
 WinUIGallery/Controls/ControlExample.xaml     | 99 ++++++++++---------
 .../Controls/SampleCodePresenter.xaml         | 39 ++++----
 2 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/WinUIGallery/Controls/ControlExample.xaml b/WinUIGallery/Controls/ControlExample.xaml
index 365f3d290..81cfa822b 100644
--- a/WinUIGallery/Controls/ControlExample.xaml
+++ b/WinUIGallery/Controls/ControlExample.xaml
@@ -4,9 +4,10 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:contract7Present="using:Microsoft.UI.Xaml.Controls?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
     xmlns:controls="using:WinUIGallery.Controls"
+    xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     x:Name="RootPanel"
     Margin="0,16,0,0"
     d:DesignHeight="250"
@@ -40,56 +41,12 @@
             <RowDefinition Height="Auto" />
             <RowDefinition />
         </Grid.RowDefinitions>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup>
-                <VisualState x:Name="IntermediateLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="740" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="PhoneLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="OptionsPresenter.HorizontalContentAlignment" Value="Left" />
-                        <Setter Target="OptionsPresenter.Margin" Value="0,24,0,0" />
-                        <Setter Target="OptionsPresenter.BorderThickness" Value="0,1,0,0" />
-                        <Setter Target="OptionsPresenter.(Grid.Row)" Value="1" />
-                        <Setter Target="OptionsPresenter.(Grid.Column)" Value="0" />
-                        <Setter Target="OptionsPresenter.(Grid.ColumnSpan)" Value="2" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-
-            <VisualStateGroup>
-                <VisualState x:Name="NormalMode" />
-                <VisualState x:Name="ScreenshotMode">
-                    <VisualState.Setters>
-                        <Setter Target="CodeScrollViewer.Visibility" Value="Collapsed" />
-                        <Setter Target="ControlPresenter.Padding" Value="{ThemeResource ControlElementScreenshotModePadding}" />
-                        <Setter Target="ControlPresenter.HorizontalAlignment" Value="Center" />
-                        <Setter Target="ScreenshotControls.Visibility" Value="Visible" />
-                        <Setter Target="ExampleContainer.Background" Value="{ThemeResource SystemControlPageBackgroundBaseLowBrush}" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-
-            <VisualStateGroup x:Name="SampleCodeSeparatorStates">
-                <VisualState x:Name="SeparatorCollapsed" />
-                <VisualState x:Name="SeparatorVisible">
-                    <VisualState.Setters>
-                        <Setter Target="SampleCodeSeparator.Visibility" Value="Visible" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
 
         <TextBlock
             x:Name="HeaderTextPresenter"
             Margin="0,12"
-            Style="{ThemeResource BodyStrongTextBlockStyle}"
             AutomationProperties.HeadingLevel="Level3"
+            Style="{ThemeResource BodyStrongTextBlockStyle}"
             Text="{x:Bind HeaderText}" />
 
         <RichTextBlock
@@ -114,9 +71,9 @@
             <controls1:SampleThemeListener>
                 <Grid
                     x:Name="ExampleContainer"
-                    Style="{ThemeResource GalleryTileGridStyle}"
                     x:FieldModifier="Public"
-                    CornerRadius="8,8,0,0">
+                    CornerRadius="8,8,0,0"
+                    Style="{ThemeResource GalleryTileGridStyle}">
                     <Grid.RowDefinitions>
                         <RowDefinition />
                         <RowDefinition Height="Auto" />
@@ -191,7 +148,7 @@
                     <Border
                         x:Name="SampleCodeSeparator"
                         Margin="0,20"
-                        BorderBrush="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
+                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                         BorderThickness="1"
                         Visibility="Collapsed" />
                     <controls:SampleCodePresenter
@@ -240,5 +197,49 @@
                     LostFocus="ControlPaddingBox_LostFocus" />
             </StackPanel>
         </Grid>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState x:Name="IntermediateLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="740" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="PhoneLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="OptionsPresenter.HorizontalContentAlignment" Value="Left" />
+                        <Setter Target="OptionsPresenter.Margin" Value="0,24,0,0" />
+                        <Setter Target="OptionsPresenter.BorderThickness" Value="0,1,0,0" />
+                        <Setter Target="OptionsPresenter.(Grid.Row)" Value="1" />
+                        <Setter Target="OptionsPresenter.(Grid.Column)" Value="0" />
+                        <Setter Target="OptionsPresenter.(Grid.ColumnSpan)" Value="2" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup>
+                <VisualState x:Name="NormalMode" />
+                <VisualState x:Name="ScreenshotMode">
+                    <VisualState.Setters>
+                        <Setter Target="CodeScrollViewer.Visibility" Value="Collapsed" />
+                        <Setter Target="ControlPresenter.Padding" Value="{ThemeResource ControlElementScreenshotModePadding}" />
+                        <Setter Target="ControlPresenter.HorizontalAlignment" Value="Center" />
+                        <Setter Target="ScreenshotControls.Visibility" Value="Visible" />
+                        <Setter Target="ExampleContainer.Background" Value="{ThemeResource SystemControlPageBackgroundBaseLowBrush}" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+
+            <VisualStateGroup x:Name="SampleCodeSeparatorStates">
+                <VisualState x:Name="SeparatorCollapsed" />
+                <VisualState x:Name="SeparatorVisible">
+                    <VisualState.Setters>
+                        <Setter Target="SampleCodeSeparator.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>
diff --git a/WinUIGallery/Controls/SampleCodePresenter.xaml b/WinUIGallery/Controls/SampleCodePresenter.xaml
index f840ad200..37b7a0db4 100644
--- a/WinUIGallery/Controls/SampleCodePresenter.xaml
+++ b/WinUIGallery/Controls/SampleCodePresenter.xaml
@@ -5,14 +5,12 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:WinUIGallery.DesktopWap.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    Padding="0,4,0,4"
     VerticalContentAlignment="Top"
     ActualThemeChanged="SampleCodePresenter_ActualThemeChanged"
     Loaded="SampleCodePresenter_Loaded"
     mc:Ignorable="d">
 
     <Grid
-        Padding="{Binding Padding, Mode=OneWay}"
         Background="{Binding Background, Mode=OneWay}"
         BorderBrush="{Binding BorderBrush, Mode=OneWay}"
         BorderThickness="{Binding BorderThickness, Mode=OneWay}"
@@ -26,6 +24,26 @@
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
+        <TextBlock x:Name="SampleHeader" FontWeight="SemiBold" />
+        <ScrollViewer
+            x:Name="CodeScrollViewer"
+            Grid.Row="1"
+            VerticalAlignment="{Binding VerticalContentAlignment, Mode=OneWay}"
+            HorizontalScrollBarVisibility="Auto"
+            HorizontalScrollMode="Auto"
+            VerticalScrollBarVisibility="Disabled"
+            VerticalScrollMode="Disabled">
+            <ContentPresenter
+                x:Name="CodePresenter"
+                Margin="0,0,0,16"
+                Loaded="CodePresenter_Loaded" />
+        </ScrollViewer>
+        <local:CopyButton
+            x:Name="CopyCodeButton"
+            Grid.Row="0"
+            HorizontalAlignment="Right"
+            Click="CopyCodeButton_Click"
+            Content="&#xE8C8;" />
 
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="SampleProgrammingLanguageState">
@@ -50,22 +68,5 @@
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <TextBlock x:Name="SampleHeader" FontWeight="SemiBold" />
-        <ScrollViewer
-            x:Name="CodeScrollViewer"
-            Grid.Row="1"
-            VerticalAlignment="{Binding VerticalContentAlignment, Mode=OneWay}"
-            HorizontalScrollBarVisibility="Auto"
-            HorizontalScrollMode="Auto"
-            VerticalScrollBarVisibility="Disabled"
-            VerticalScrollMode="Disabled">
-            <ContentPresenter x:Name="CodePresenter" Loaded="CodePresenter_Loaded" />
-        </ScrollViewer>
-        <local:CopyButton
-            x:Name="CopyCodeButton"
-            Grid.Row="0"
-            HorizontalAlignment="Right"
-            Click="CopyCodeButton_Click"
-            Content="&#xE8C8;" />
     </Grid>
 </UserControl>