CommunityToolkit / CommunityToolkit/Windows

Add spacing between Header and Content in HeaderedContentControl

Open
#532 1 comment 0 reactions 1 assignee Claimed by @niels9001 View on GitHub
components::controls::headeredcontrols feature request :mailbox_with_mail: good first issue
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
![Image](https://github.com/user-attachments/assets/516d9744-9a24-4484-bc11-0ce7fd79a01b)

Community Toolkit, 1px
![Image](https://github.com/user-attachments/assets/ea643796-a8a3-4914-b722-b1fd96c67799)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.