HeaderedContentControl missing Padding passthru
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
- [x] 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)
- [ ] 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.
@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?
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.
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...
ComboBoxin 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>
@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?
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...
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.