Button does not spread in RelativePanel

[shinta0806]

Describe the bug

Place the Button in the RelativePanel,

• RelativePanel.AlignLeftWithPanel="True"
• RelativePanel.AlignRightWithPanel="True"

does not cause the Button to extend to the left or right.

The same problem exists in the vertical direction.

• RelativePanel.AlignTopWithPanel="True"
• RelativePanel.AlignBottomWithPanel="True"

Steps to reproduce the bug

1. Place the RelativePanel.
2. Place the Button inside the RelativePanel.
3. Set AlignLeftWithPanel / AlignRightWithPanel property.

Sample program in GitHub:
https://github.com/shinta0806/TestRelativePanel

Expected behavior

TextBox spreads in RelativePanel.
I would like the Button to behave the same as the TextBox.

Screenshots

[NG] Button
[NG] ComboBox

[OK] TextBox

NuGet package version

WinUI 3 - Windows App SDK 1.5.3: 1.5.240428000

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• TextBox text jitter inside relative panel when resizing window. (#8898), similarity score: 0.71
• Bug: Right aligned ComboBox popup drastically shifts to the right on opened (#9567), similarity score: 0.70
• Hit box incorrect for title bar buttons in Right-To-Left languages (#8559), similarity score: 0.70

Closed similar issues:

• AutoSuggestBox Query button moves to the left (#6439), similarity score: 0.71
• ComboBox dropdown / flyout opens in the wrong location when using certain RelativePanel attached properties (#6554), similarity score: 0.71

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[shinta0806]

Hi, AI.
This bug occurs even if the window is not resized.

[codendone]

I suspect this is due to the behavior certain controls choose. Button will stretch if HorizontalAlignment and VerticalAlignment are set, like this:

<RelativePanel Background="Aquamarine">
    <Button Content="Button" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
        RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</RelativePanel>

But RelativeLayout owners will need to confirm if that is required or if there is a bug here.

[MikeHillberg]

Button's default style sets the HorizontalAlignment to left. So it's the same in a StackPanel or Grid that it won't fill all available space unless you explicitly set it to Stretch.

[shinta0806]

Thank you very much!
I close this ticket.