-
Notifications
You must be signed in to change notification settings - Fork 152
Add spacing between Header and Content in HeaderedContentControl #532
Copy link
Copy link
Open
Labels
components::controls::headeredcontrolsControls such as HeaderedItemsControl, HeaderedTreeView, and HeaderedContentControl.Controls such as HeaderedItemsControl, HeaderedTreeView, and HeaderedContentControl.feature request 📬A request for new changes to improve functionalityA request for new changes to improve functionalitygood first issueGood for newcomersGood for newcomers
Milestone
Metadata
Metadata
Assignees
Labels
components::controls::headeredcontrolsControls such as HeaderedItemsControl, HeaderedTreeView, and HeaderedContentControl.Controls such as HeaderedItemsControl, HeaderedTreeView, and HeaderedContentControl.feature request 📬A request for new changes to improve functionalityA request for new changes to improve functionalitygood first issueGood for newcomersGood for newcomers
Type
Fields
Give feedbackNo fields configured for Feature.
Projects
StatusShow more project fields
🔖 Ready
Describe the bug
I noticed an inconsistency in the
HeaderedContentControlprovided by this package. In a standard Windows 11 app like Settings (or any other default app), there is a9pixel gap between the header and content of theHeaderedContentControl. However, in the current implementation, there is no gap at all, except for the default1pixel from theGrid.Steps to reproduce
HeaderedContentControlto the layout.Headerproperty, for example,Hello, world!Buttonas the content of theHeaderedContentControlHello, world!andButtonis only 1 pixel.Expected behavior
Users can set the gap between the
HeaderandContent, for example, to8px (so that the total gap is9px).Solution 1
Forward the
Paddingproperty to theMarginof the ContentPresenter namedContentPresenter:This would allow the user to set a Padding of
"0, 8, 0, 0"and achieve the original, familiar gap.Solution 2
Add a
Spacingfield (the gap betweenHeaderandContent):int.Declare a new
RowDefinition/ColumnDefinitionwith the height/width equal toSpacing, depending on the orientation.Solution 3
Add a
Spacingfield (the gap betweenHeaderandContent):Thickness.In the ContentPresenter named
ContentPresenter, set thePaddingproperty toSpacing.Screenshots
Settings, 9px

Community Toolkit, 1px

Code Platform
Windows Build Number
Other Windows Build number
Windows 11 24H2 (Build 26100)
App minimum and target SDK version
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.240821Help us help you
No, I'm unable to contribute a solution.