[AutoLayout] Possible Issue: AutoLayout Control Arranges Children with Margins Differently Than StackPanel and Grid

[agneszitte]

Current behavior

The AutoLayout control seems to arrange children with Margin properties differently than StackPanel and Grid. In scenarios where elements have defined margins, AutoLayout does not produce the same alignment and spacing results as the other two containers.

As seen in the attached image below, with identical child elements and margin configurations, AutoLayout handles margins in a way that varies from StackPanel and Grid.

Expected behavior

[!WARNING] Potentially an issue with AutoLayout ? To confirm first!

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

Sample app to repro: UnoAutoLayoutTests.zip

<Grid Grid.ColumnDefinitions="*,*,*">

    <!-- Examples using Grid -->
    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <TextBlock Text="Grid"
                   HorizontalAlignment="Center"
                   FontWeight="Bold"
                   FontSize="11" />
        <Grid Background="DeepPink"
              Padding="10,8"
              Grid.RowDefinitions="Auto,Auto">
            <Border Background="Orange"
                    Height="50"
                    Width="50" />
            <Border Grid.Row="1"
                    Background="Purple"
                    Height="50"
                    Width="50" />
        </Grid>
        <Grid Background="Cyan"
              Grid.RowDefinitions="Auto,Auto">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
            <Border Grid.Row="1"
                    Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
        </Grid>
        <Grid Background="Yellow"
              Grid.RowDefinitions="Auto,Auto">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="0,8,0,0" />
            <Border Grid.Row="1"
                    Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="0,0,0,8" />
        </Grid>
        <Grid Background="LightGreen"
              Grid.RowDefinitions="Auto,Auto">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,0" />
            <Border Grid.Row="1"
                    Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,0,10,8" />
        </Grid>
    </StackPanel>

    <!-- Examples using StackPanel -->
    <StackPanel Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <TextBlock Text="StackPanel"
                   HorizontalAlignment="Center"
                   FontWeight="Bold"
                   FontSize="11" />
        <StackPanel Background="DeepPink"
                    Padding="10,8">
            <Border Background="Orange"
                    Height="50"
                    Width="50" />
            <Border Background="Purple"
                    Height="50"
                    Width="50" />
        </StackPanel>
        <StackPanel Background="Cyan">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
        </StackPanel>
        <StackPanel Background="Yellow">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="0,8,0,0" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="0,0,0,8" />
        </StackPanel>
        <StackPanel Background="LightGreen">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,0" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,0,10,8" />
        </StackPanel>
    </StackPanel>

    <!-- Examples using Toolkit AutoLayout -->
    <StackPanel Grid.Column="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <TextBlock Text="AutoLayout"
                   HorizontalAlignment="Center"
                   FontWeight="Bold"
                   FontSize="11" />
        <utu:AutoLayout Background="DeepPink"
                        Padding="10,8">
            <Border Background="Orange"
                    Height="50"
                    Width="50" />
            <Border Background="Purple"
                    Height="50"
                    Width="50" />
        </utu:AutoLayout>
        <utu:AutoLayout Background="Cyan">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,8" />
        </utu:AutoLayout>
        <utu:AutoLayout Background="Yellow">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="0,8,0,0" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="0,0,0,8" />
        </utu:AutoLayout>
        <utu:AutoLayout Background="LightGreen">
            <Border Background="Orange"
                    Height="50"
                    Width="50"
                    Margin="10,8,10,0" />
            <Border Background="Purple"
                    Height="50"
                    Width="50"
                    Margin="10,0,10,8" />
        </utu:AutoLayout>
    </StackPanel>

</Grid>

Nuget Package: Uno.Sdk 5.5.32

Affected platform(s): Same behavior on all platform, including Windows

IDE: Microsoft Visual Studio Professional 2022 (64-bit) - Version 17.11.5

[agneszitte]

@carldebilly I would like your feedback for this "possible" issue as I have some doubts here for the current behavior