Button.Content does not use HorizontalContentAlignment properly

[robloo]

Current behavior

Certain Button Content is not centered. This is even specified in XAML with HorizontalContentAlignment just to be sure but the default is also Center. This appears to be related to the StackPanel which is known to have many issues.

Note: StackPanel needs a port from upstream WinUI ASAP like Grid.

                <Button
                    x:Name="NextButton2"
                    MinWidth="100"
                    HorizontalContentAlignment="Center">
                    <StackPanel
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Orientation="Horizontal">
                        <TextBlock
                            x:Name="NextButton2TextBlock"
                            Text="Next"
                            TextAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="0,0,3,0" />
                    </StackPanel>
                </Button>
                <Button
                    x:Name="NextButton3"
                    MinWidth="100"
                    Content="Next"
                    HorizontalContentAlignment="Center">
                </Button>

Expected behavior

All content should be centered by default.

How to reproduce it (as minimally and precisely as possible)

Repro App:

TestApp.zip

Workaround

Perhaps try a different container/panel such as Grid

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

4.0.9

Affected platforms

Android

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

The issue is not with StackPanel, but rather how button manages its own children. You can replace the StackPanel with a Grid and you'll see the same result.

[jeromelaban]

@carldebilly do you know what happens here ?

[carldebilly]

Playground: https://playground.platform.uno/#161c3915

Looks related to the way the "arrange" is build in Uno. My intuition would be it should take into consideration the desiredSize and readjust according to the actual result from ArrangeOverride(). This mechanism is pretty different in Uno and could explain the behavior observed in this issue.

To investigate...

[robloo]

In the playground, first sample, I can delete the HorizontalAlignment="Stretch" from <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> and make it work. This shows two things:

1. Measure/arrange is behaving differently on WASM from Android. I would normally expect these layout-related code paths to be shared and generic for all platforms.
2. StackPanel is not sizing to the child TextBox. This is a bug with StackPanel as I do think it always sizes to children in UWP.

Bottom line: Wasm appears to behave differently from Android.

[Youssef1313]

If this is Android/iOS only, then I would suspect it's because of ContentPresenter bypass.