HeaderedContentControl missing Padding passthru

[michael-hawker]

Describe the bug

Setting Padding on HeaderedContentControl does nothing.

I think this is passed through for HIC, but maybe not for HTV as well?

We should ensure template bound common properties are setup.

Not sure if it should apply just to content and/or header. Whichever one it doesn't control should probably have a resource key.

Steps to reproduce

Add HCC to project
set padding

Expected behavior

padding changes

Screenshots

No response

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

No response

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

No response

Visual Studio Build Number

No response

Device form factor

No response

Additional context

No response

Help us help you

Yes, but only if others can assist.

[michael-hawker]

@niels9001 thoughts here on what padding should control, I imagine content? As I think for the one we do pass through today it's set on the items container or what not?

[niels9001]

Hmm, good question.. wouldn't you set a margin on the content itself then?

Not sure what e.g. ListView does when a Header is used and a custom padding is set? Or e.g. a TextBox or ComboBox.

[michael-hawker]

Welp, the platform isn't consistent here...

ListView for instance applies the padding to the whole control, so the header and the items are all inset.
ComboBox in contrast applies the padding to the items within the combobox drop/down itself...

[AndrewKeepCoding]

ComboBox in contrast applies the padding to the items within the combobox drop/down itself...

The Padding is applied to the ComboBox content, not to the drop items.

Setting Padding on HeaderedContentControl does nothing.

The HeaderedContentControl doesn't apply border either.

XAML:

<Grid
    ColumnDefinitions="*,*"
    RowDefinitions="*,*,*">
    <ListView
        Grid.Row="0"
        Grid.Column="0"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="No Padding"
        ItemsSource="{x:Bind Items}"
        SelectedIndex="0" />
    <ListView
        Grid.Row="0"
        Grid.Column="1"
        Padding="32"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="Padding"
        ItemsSource="{x:Bind Items}"
        SelectedIndex="0" />
    <ComboBox
        Grid.Row="1"
        Grid.Column="0"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="No Padding"
        ItemsSource="{x:Bind Items}"
        SelectedIndex="0" />
    <ComboBox
        Grid.Row="1"
        Grid.Column="1"
        Padding="32"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="Padding"
        ItemsSource="{x:Bind Items}"
        SelectedIndex="0" />

    <toolkit:HeaderedContentControl
        Grid.Row="2"
        Grid.Column="0"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="No Padding">
        <TextBlock Text="Content" />
    </toolkit:HeaderedContentControl>
    <toolkit:HeaderedContentControl
        Grid.Row="2"
        Grid.Column="1"
        Padding="32"
        BorderBrush="SkyBlue"
        BorderThickness="1"
        Header="Padding">
        <TextBlock Text="Content" />
    </toolkit:HeaderedContentControl>
</Grid>

[niels9001]

@AndrewKeepCoding Thanks for this detailed analysis 😁!

@michael-hawker @AndrewKeepCoding Looking at this, it seems to be most natural to set the padding on the entire control (like ListView) does? If I'd need to set a specific padding on the content that I'm displaying I think I'd expect to set the margin on the control (e.g. for adding additional spacing between the content and header?

@michael-hawker did you have a specific use case in mind?

[AndrewKeepCoding]

I agree. The ListView's behavior makes sense to me. Also le'ts not forget about the other basic properties like Maring, BorderBrush, BorderThickness, Background, etc...

[michael-hawker]

Yeah, I guess that makes sense from ListView, as the Margin is the outside space before the border, with the padding in the inner space. And if you want padding in the Header, you can define your own element with its own margin or padding.

My main case was more around adjusting the padding within the header itself, but that's probably more niche.