Add spacing between Header and Content in HeaderedContentControl

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

Add a HeaderedContentControl to the layout.
Set the Header property, for example, Hello, world!
Add a Button as the content of the HeaderedContentControl
Run the application.
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

Community Toolkit, 1px

Code Platform

[ ] UWP
[x] 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)
[x] 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)
[x] 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.

CommunityToolkit / Windows