Grid Column and RowSpacing don't display in the colour of its parent

[JohnHDev]

Description

In XF, we could add a Frame with a background colour lets say black, place a grid in it with a background colour of white, set a number of rows and columns, with row and column spacing values of 1. The colour of the frame would be visible in the row and column spacing, giving the grid the appearance of grid lines.

This isn't working in .NET Maui, we would have to add a LOT of box views to replicate the same behaviour.

Steps to Reproduce

Add a Frame with a background colour lets say black, place a grid in it with a background colour of white, set 5 rows and columns with grid length star, with row and column spacing values of 1. The colour of the frame should be visible in the row and column spacing, giving the grid the appearing of grid lines. This isn't working in .NET Maui.

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

iOS 15, windows

Did you find any workaround?

Lots and lots of box views.

Relevant log output

No response

[XamlTest]

Thank you so much for your bug report! Unfortunately, we cannot reproduce your issue with the information above, could you provide a sample project and screenshots that we can reproduce your issue? That should greatly speed up the process, thanks!

[ghost]

Hi @JohnHDev. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[YuqinSong]

Verified Repro with Windows. Repro project is available:
#4946.zip

[JohnHDev]

@hartez Do you know if this will this be picked up before GA? We have a workaround but it is isn't very pretty.

[hartez]

The milestone is set for GA, so the goal right now is to address it before then.

[hartez]

In XF, we could add a Frame with a background colour lets say black, place a grid in it with a background colour of white, set a number of rows and columns, with row and column spacing values of 1.

Based on your description, it sounds like you're talking about something like this:

<Frame BackgroundColor="Black">
    <Grid BackgroundColor="White" RowDefinitions="*,*" ColumnDefinitions="*,*" RowSpacing="1" ColumnSpacing="1">
        <Button BackgroundColor="Gray" Text="One" Margin="2" Grid.Row="0" Grid.Column="0"/>
        <Button BackgroundColor="Gray" Text="Two" Margin="2" Grid.Row="0" Grid.Column="1"/>
        <Button BackgroundColor="Gray" Text="Three" Margin="2" Grid.Row="1" Grid.Column="0"/>
        <Button BackgroundColor="Gray" Text="Four" Margin="2" Grid.Row="1" Grid.Column="1"/>
    </Grid>
</Frame>

The colour of the frame would be visible in the row and column spacing, giving the grid the appearance of grid lines.

This is not what happens in XF if you use that markup. This is how that renders:

Which is what happens in MAUI.Controls as well (minus a Frame bug which offsets the Grid slightly).

Did you mean to set the Grid's BackgroundColor to Transparent? Or is there some other detail I'm misunderstanding?

[JohnHDev]

@hartez Im embarrassed to say I have gotten this completely wrong, I misremembered code I wrote in XF many years ago.
This is indeed how I implemented gridlines, I should have checked my XF solution again before raising as a bug.
My apologies for wasting your time on this! Please close, and let's forget it ever happened.

'Nothing to see here, move along'