Skip to content

Commit

Permalink
Adjust padding on control sample codes to prevent code occlusion thro…
Browse files Browse the repository at this point in the history 
…ugh 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
  • Loading branch information
@Jay-o-Way @karkarl
Jay-o-Way authored and karkarl committed Jul 15, 2024
1 parent fff2e37 commit 8e98723
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 68 deletions.
99 changes: 50 additions & 49 deletions WinUIGallery/Controls/ControlExample.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand All @@ -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" />
Expand Down Expand Up @@ -191,7 +148,7 @@
<Border
x:Name="SampleCodeSeparator"
Margin="0,20"
BorderBrush="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
BorderThickness="1"
Visibility="Collapsed" />
<controls:SampleCodePresenter
Expand Down Expand Up @@ -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>
39 changes: 20 additions & 19 deletions WinUIGallery/Controls/SampleCodePresenter.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
Expand All @@ -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">
Expand All @@ -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>

0 comments on commit 8e98723

Please sign in to comment.