maui
maui copied to clipboard
Incorrect spacing with CollectionView that has an GridItemsLayout on Windows
Description
I'm having an CollectionView that has an GridItemsLayout that should draw three boxes with size 64x64 and 16 units as margins between the boxes. The size of the CollectionView is 224 units (64x3 + 16x2). On Android, it is perfect:

But not on Windows:

There is unexpected spacing on the edges, and the spacing between the boxes is doubled.
Steps to Reproduce
- Create a new MAUI application.
- Update MainPage.xaml:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiIssues.MainPage">
<Grid RowDefinitions="Auto, *">
<HorizontalStackLayout Spacing="16" Margin="0,0,0,16">
<Label Text="Reference sizes: " />
<Grid WidthRequest="64" HeightRequest="64" BackgroundColor="Purple">
<Label Text="64" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<Grid WidthRequest="16" HeightRequest="16" BackgroundColor="Purple">
<Label Text="16" FontSize="8" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</HorizontalStackLayout>
<CollectionView WidthRequest="224"
Grid.Row="1"
BackgroundColor="DarkBlue"
ItemsSource="{Binding Numbers}"
>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="3"
VerticalItemSpacing="16"
HorizontalItemSpacing="16" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="64" HeightRequest="64" BackgroundColor="Purple">
<Label Text="{Binding }" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ContentPage>
- Update MainPage.xaml.cs:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = this;
}
public List<int> Numbers { get; } = Enumerable.Range(1, 100).ToList();
}
- Run the application on Android and Windows and compare.
Link to public reproduction project repository
https://github.com/pekspro/MauiIssues/tree/11320_Incorrect_spacing_with_CollectionView_that_has_an_GridItemsLayout
Version with bug
7.0 (current)
Last version that worked well
Unknown/Other
Affected platforms
Windows
Affected platform versions
Windows 10.0.17763.0
Did you find any workaround?
No response
Relevant log output
No response
We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.
Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11 with provided Project: 11320.zip