Skip to content

Add spacing between Header and Content in HeaderedContentControl #532

@naumenkoff

Description

@naumenkoff

Describe the bug

I noticed an inconsistency in the HeaderedContentControl provided by this package. In a standard Windows 11 app like Settings (or any other default app), there is a 9 pixel gap between the header and content of the HeaderedContentControl. However, in the current implementation, there is no gap at all, except for the default 1 pixel from the Grid.

Steps to reproduce

  1. Add a HeaderedContentControl to the layout.
  2. Set the Header property, for example, Hello, world!
  3. Add a Button as the content of the HeaderedContentControl
  4. Run the application.
  5. Notice that the gap between the Hello, world! and Button is only 1 pixel.

Expected behavior

Users can set the gap between the Header and Content, for example, to 8 px (so that the total gap is 9 px).

Solution 1

Forward the Padding property to the Margin of the ContentPresenter named ContentPresenter:

                        <ContentPresenter x:Name="ContentPresenter"
                                          Grid.Row="1"
                                          Grid.ColumnSpan="2"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}" />

This would allow the user to set a Padding of "0, 8, 0, 0" and achieve the original, familiar gap.

Solution 2

Add a Spacing field (the gap between Header and Content): int.
Declare a new RowDefinition / ColumnDefinition with the height/width equal to Spacing, depending on the orientation.

Solution 3

Add a Spacing field (the gap between Header and Content): Thickness.
In the ContentPresenter named ContentPresenter, set the Padding property to Spacing.

Screenshots

Settings, 9px
Image

Community Toolkit, 1px
Image

Code Platform

  • UWP
  • WinAppSDK / WinUI 3
  • Web Assembly (WASM)
  • Android
  • iOS
  • MacOS
  • Linux / GTK

Windows Build Number

  • Windows 10 1809 (Build 17763)
  • Windows 10 1903 (Build 18362)
  • Windows 10 1909 (Build 18363)
  • Windows 10 2004 (Build 19041)
  • Windows 10 20H2 (Build 19042)
  • Windows 10 21H1 (Build 19043)
  • Windows 10 21H2 (Build 19044)
  • Windows 10 22H2 (Build 19045)
  • Windows 11 21H2 (Build 22000)
  • Other (specify)

Other Windows Build number

Windows 11 24H2 (Build 26100)

App minimum and target SDK version

  • Windows 10, version 1809 (Build 17763)
  • Windows 10, version 1903 (Build 18362)
  • Windows 10, version 1909 (Build 18363)
  • Windows 10, version 2004 (Build 19041)
  • Windows 10, version 2104 (Build 20348)
  • Windows 11, version 22H2 (Build 22000)
  • Other (specify)

Other SDK version

No response

Visual Studio Version

Preview

Visual Studio Build Number

17.11.0 Preview 5.0

Device form factor

Desktop

Additional context

CommunityToolkit.WinUI.Controls.HeaderedControls: 8.1.240821

Help us help you

No, I'm unable to contribute a solution.

Metadata

Metadata

Assignees

Labels

Projects

Status

🔖 Ready

Relationships

None yet

Development

No branches or pull requests

Issue actions