Collection view with horizontal grid layout has extra space on right (end) of collection

[MaxGuernseyIII]

Description

I've noticed that, on iOS, there is extra space to the right of items in a collection view with an horizontal grid layout.

These two collections have equivalent items sources that have undergone the same modification events:

When I select the first one in the visual tree, there is no extra space...

When I select the second one in the visual tree, there is a bunch of extra space...

The apple store folks seem to be persnickety about how things look, so this seems like it might be an issue.

Steps to Reproduce

Below is all the code required to reproduce this. I've reproduced it running an iOS simulator of an iPhone 16 with iOS 18 via the Pair with Mac feature. I tried several versions of MAUI, including the (now) current version: 8.0.92.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mauiCollectionViewProblemOnIOs="clr-namespace:MauiCollectionViewProblemOn_iOS"
             x:Class="MauiCollectionViewProblemOn_iOS.MainPage"
             x:DataType="mauiCollectionViewProblemOnIOs:DemoViewModel">

  <Grid RowDefinitions="*,*">
    <CollectionView Grid.Row="0" ItemsSource="{Binding Collection1}" HorizontalOptions="Center">
      <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>
      </CollectionView.ItemsLayout>
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Button Width="32" Text="." />
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
    <CollectionView Grid.Row="1" ItemsSource="{Binding Collection2}" HorizontalOptions="Center">
      <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="10" />
      </CollectionView.ItemsLayout>
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Button Width="32" Text="." />
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
  </Grid>
</ContentPage>

MainPage.xaml.cs

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;

namespace MauiCollectionViewProblemOn_iOS;

public partial class MainPage
{
  readonly DemoViewModel ViewModel;

  public MainPage()
  {
    InitializeComponent();
    ViewModel = new();
    BindingContext = ViewModel;
  }

  protected override void OnAppearing()
  {
    base.OnAppearing();

    ViewModel.Collection1.Clear();
    ViewModel.Collection1.Add(Guid.NewGuid().ToString());
    ViewModel.Collection1.Add(Guid.NewGuid().ToString());
    ViewModel.Collection1.Add(Guid.NewGuid().ToString());

    ViewModel.Collection2.Clear();
    ViewModel.Collection2.Add(Guid.NewGuid().ToString());
    ViewModel.Collection2.Add(Guid.NewGuid().ToString());
    ViewModel.Collection2.Add(Guid.NewGuid().ToString());
  }
}

public class DemoViewModel : ObservableObject
{
  public ObservableCollection<string> Collection1 { get; } = [];
  public ObservableCollection<string> Collection2 { get; } = [];
}

Link to public reproduction project repository

No response

Version with bug

8.0.92 SR9.2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

If you just want a horizontal strip of items, you can use a linear item layout and make sure the width of all the items is uniform.

Relevant log output

n/a

[similar-issues-ai[bot]]

We've found some similar issues:

• #11320 , similarity score: 81%
• #15815 , similarity score: 81%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[MaxGuernseyIII]

I see the similarities but neither of them seems to be iOS specific. I suppose I may have failed to explicitly mention that I cannot reproduce this behavior on Android. Only iOS.

Technically, only on an iOS simulation, as I have no iOS device on which to test it and am much-chagrined at even having a mac on which to run a simulator.

Also: the "inclusive heat" job failed, even though whatever service was invoked came back with a 200 and said I was 0% angry and 0% offensive (in the text of the job).

[ninachen03]

This issue has been verified using Visual Studio 17.12.0 Preview 3(8.0.92 & 8.0.82). Can repro this issue at iOS platform. MauiApp14.zip

[MaxGuernseyIII]

@ninachen03 Thank you. I would have uploaded the project in a .zip myself, except it said your team couldn't download .zips.

If that's not true anymore, the bug form might have a bug. :)