Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
MaxGuernseyIII opened this issue Oct 22, 2024 · 4 comments · May be fixed by #25825
Open

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

MaxGuernseyIII opened this issue Oct 22, 2024 · 4 comments · May be fixed by #25825
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/iOS 🍎 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone
Backlog

Comments

@MaxGuernseyIII
Copy link

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:

Image

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

Image

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

Image

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
@MaxGuernseyIII MaxGuernseyIII added the t/bug Something isn't working label Oct 22, 2024
@similar-issues-ai Similar Issues AI
Copy link

We've found some similar issues:

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
Copy link
Author

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 ninachen03 added platform/iOS 🍎 s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Oct 22, 2024
@ninachen03
Copy link

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

@PureWeen PureWeen added the area-controls-collectionview CollectionView, CarouselView, IndicatorView label Oct 22, 2024
@PureWeen PureWeen added this to the Backlog milestone Oct 22, 2024
@MaxGuernseyIII
Copy link
Author

@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. :)

@Tamilarasan-Paranthaman Tamilarasan-Paranthaman linked a pull request Nov 13, 2024 that will close this issue
Draft
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/iOS 🍎 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Milestone
Backlog
3 participants
@PureWeen @MaxGuernseyIII @ninachen03