[Grid] Add RowSpacing and ColumnSpacing

[zxbmmmmmmmmm]

What does the pull request do?

Add RowSpacing and ColumnSpacing properties for Grid, just like in UWP and WinUI 3.

What is the updated/expected behavior with this PR?

1. Add a Grid with various children.
2. Arrange children in different row and columns.
3. Set RowSpacing and ColumnSpacing to non-zero values.

How was the solution implemented (if it's not obvious)?

Add the corresponding spacing before calculating the position of each RowDefinition or ColumnDefinition.
Subtract spacing before calculating stars when GridUnitType=star.

Checklist

• Added unit tests (if possible)?
• Added XML documentation to any related classes?
• Consider submitting a PR to https://github.com/AvaloniaUI/avalonia-docs with user documentation

Breaking changes

None

Obsoletions / Deprecations

None

Fixed issues

Fixes #5152

[avaloniaui-bot]

You can test this PR using the following package version. 11.3.999-cibuild0054627-alpha. (feed url: https://nuget-feed-all.avaloniaui.net/v3/index.json) [PRBUILDID]

[cla-avalonia]

• All contributors have signed the CLA.

[zxbmmmmmmmmm]

@cla-avalonia agree

[maxkatz6]

Would it make sense to add coercion for negative values? Or does UWP support them?

[Poker-sang]

negative spacing is not recommended feature, but it is supported in uwp/winui3. And so do this PR. This PR support negative spacing, too.

[robloo]

I also think we should support negative Spacing if possible. It matches with what is allowed for Margin/Padding which can be negative.

There are some rare layout cases it's useful and by default the math usually supports negatives for free.

[Poker-sang]

Now both the spacing in uwp/winui3 and in these 3 PRs don't support negative values in principle, but in practice they do support (

[robloo]

Great work! This has been a nice to have for a long time.

[MrJul]

I'm marking this PR with needs-api-review for the sake of it but we were fine with this for UniformGrid in #17993 (comment) so I really don't see it being rejected.

[robloo]

I'm marking this PR with needs-api-review for the sake of it but we were fine with this for UniformGrid... so I really don't see it being rejected.

It also matches UWP/WinUI as-is and I've never heard of concerns with that API.

[DoubleDBE]

We need this 😁

[MrJul]

Public API for review:

namespace Avalonia.Controls
{
    public class Grid : Panel
    {
+        public static readonly StyledProperty<double> RowSpacingProperty;
+        public static readonly StyledProperty<double> ColumnSpacingProperty;
+        public double RowSpacing { get; set; }
+        public double ColumnSpacing { get; set; }
    }
}

[MrJul]

The API has been approved.

The implementation will be reviewed soon.
@zxbmmmmmmmmm would you be able to handle any bug in the future that comes from the new implementation?

[zxbmmmmmmmmm]

This PR is partially based on the implementation of WinUI 3 and was written by @Poker-sang and me.
If there are any issues, we should be able to solve them together.

[MrJul]

LGTM, thank you!
A very nice feature to have :)

[xllifi]

Grid lines are broken

---

Elements overflow when there's not enough space

2025-03-19.02-08-20.mp4

Element shown in video

<Border Background="{DynamicResource UiTheme01}" BorderBrush="{DynamicResource UiTheme04}"
    BorderThickness="1" CornerRadius="8">
    <Grid Margin="8" ColumnSpacing="8" HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" VerticalAlignment="Center" Text="Путь до Steam:" />
        <TextBox Name="SteamPathTextBox" Grid.Column="1" VerticalAlignment="Center" 
            Background="{DynamicResource UiTheme02}" BorderThickness="0" Text="C:\Program Files\Steam\steam.exe" />
        <Button Grid.Column="2" Width="32" Height="32" VerticalAlignment="Center" Click="SetSteamPath">
            <lucideAvalonia:Lucide Icon="Folder" StrokeBrush="{DynamicResource White}" />
        </Button>
    </Grid>
</Border>

---

Avalonia nightly 11.3.999-cibuild0055611-alpha
I'm using Romzetron.Avalonia 11.2.1 theme but the same happens with Avalonia.Themes.Fluent 11.3.999-cibuild0055611-alpha as well