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.

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

Incorrect spacing with CollectionView that has an GridItemsLayout on Windows #11320

Open
pekspro opened this issue Nov 13, 2022 · 2 comments
Open
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone

Comments

@pekspro
Copy link

pekspro commented Nov 13, 2022

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:

image

But not on Windows:

image

There is unexpected spacing on the edges, and the spacing between the boxes is doubled.

Steps to Reproduce

  1. Create a new MAUI application.
  2. 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>
  1. Update MainPage.xaml.cs:
public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();

		BindingContext = this;
	}

	public List<int> Numbers { get; } = Enumerable.Range(1, 100).ToList();
}
  1. 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

@pekspro pekspro added the t/bug Something isn't working label Nov 13, 2022
@jsuarezruiz jsuarezruiz added platform/windows 🪟 area-controls-collectionview CollectionView, CarouselView, IndicatorView labels Nov 14, 2022
@jsuarezruiz jsuarezruiz added this to the Backlog milestone Nov 14, 2022
@ghost
Copy link

ghost commented Nov 14, 2022

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.

@XamlTest XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jun 5, 2023
@XamlTest
Copy link

XamlTest commented Jun 5, 2023

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11 with provided Project:
11320.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants