CommunityToolkit / CommunityToolkit/Windows
Add spacing between Header and Content in HeaderedContentControl
- Dominant language
- C#
- Stars
- 1.1k
- Forks
- 166
- PR merge metrics
- No merged PRs in 30d
Description
### 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](https://github.com/CommunityToolkit/Windows/blob/665ba24405f543242e5ff2b0d7d24c045d6836fb/components/HeaderedControls/src/HeaderedContentControl/HeaderedContentControl.xaml#L43) named `ContentPresenter`:
```xml
```
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](https://github.com/CommunityToolkit/Windows/blob/665ba24405f543242e5ff2b0d7d24c045d6836fb/components/HeaderedControls/src/HeaderedContentControl/HeaderedContentControl.xaml#L43) 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.
Contributor guide
Assessment
This issue has not been assessed yet.