Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add spacing between Header and Content in HeaderedContentControl #532

Open
3 of 24 tasks
naumenkoff opened this issue Oct 12, 2024 · 1 comment
Open
3 of 24 tasks
Assignees
Labels
feature request 📬 A request for new changes to improve functionality good first issue Good for newcomers
Milestone

Comments

@naumenkoff
Copy link

naumenkoff commented Oct 12, 2024

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.

@Arlodotexe Arlodotexe moved this to 🆕 New in Toolkit 8.x Oct 21, 2024
@Arlodotexe Arlodotexe added feature request 📬 A request for new changes to improve functionality good first issue Good for newcomers labels Oct 21, 2024
@niels9001 niels9001 self-assigned this Oct 21, 2024
@Arlodotexe Arlodotexe moved this from 🆕 New to 🔖 Ready in Toolkit 8.x Oct 21, 2024
@Arlodotexe Arlodotexe added this to the 8.2 milestone Oct 21, 2024
@niels9001
Copy link
Collaborator

This would be a useful property to have. Thanks for the extensive description + options @naumenkoff, I'll have a look!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request 📬 A request for new changes to improve functionality good first issue Good for newcomers
Projects
Status: 🔖 Ready
Development

No branches or pull requests

3 participants