CollectionView header layout issue with grid

mknotzer commented 3 months ago

Description

<StackLayout>
<Grid ColumnDefinitions="150,*,50,75,150,150">
    <Label Grid.Column="0" Text="Erstellung" />
    <Label Grid.Column="1" BackgroundColor="Orange" Text="Tabelle" />
    <Label Grid.Column="2" BackgroundColor="Fuchsia" Text="Info" />
    <Label Grid.Column="3" BackgroundColor="Yellow" Text="Aktion" />
    <Label Grid.Column="4" BackgroundColor="Green" Text="Abgleich" />
    <Label Grid.Column="5" BackgroundColor="Blue" Text="Redo" />
</Grid>

<CollectionView>
    <CollectionView.Header>
        <Grid ColumnDefinitions="150,*,50,75,150,150">
            <Label Grid.Column="0" Text="Erstellung" />
            <Label Grid.Column="1" BackgroundColor="Orange" Text="Tabelle" />
            <Label Grid.Column="2" BackgroundColor="Fuchsia" Text="Info" />
            <Label Grid.Column="3" BackgroundColor="Yellow" Text="Aktion" />
            <Label Grid.Column="4" BackgroundColor="Green" Text="Abgleich" />
            <Label Grid.Column="5" BackgroundColor="Blue" Text="Redo" />
        </Grid>
    </CollectionView.Header>
</CollectionView>
</StackLayout>

iOS (bug)

Android (ok)

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.70 SR7

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?

No response

Relevant log output

No response

github-actions[bot] commented 3 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Header of the CollectionView is wider than the actual element (#9194), similarity score: 0.80
[macOS] CollectionView.Header with a Grid - incorrect fixed width - does not resize (#22354), similarity score: 0.79
[regression/8.0.3] Grid in CollectionView HeaderTemplate takes the whole page in iOS (#18886), similarity score: 0.77

Closed similar issues:

CollectionView inside a Grid completely wrong measurements. (#15553), similarity score: 0.77
[iOS] CollectionView with GridItemsLayout and footer, renders the cell in the center if is just one cell (#23795), similarity score: 0.77

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

kevinxufei commented 2 months ago

Hi, @mknotzer I'm sorry that I can't reproduce the same results as you. Based on the code you provided, my results are as follows: MauiApp13.zip

The iOS simulator cannot display the label in the CollectionView; the label is truncated on the Android Emulator.
When I rotate the Android simulator, the display is normal.

Could you provide a sample project so that we can reproduce the problem? Thank you!

Domik234 commented 2 months ago

The same problem appears on CarouselView on iOS where longer text in label can extend calculated width of view in the Carousel and ignore display metrics limits.

I am currently focused on prioritized tasks which needs to be solved at first but I'll get to this propably later too. I've used CardsView.Maui or Sharpnado.CollectionView.Maui (depends on case) as workaround.

mknotzer commented 2 months ago

sample project

BugReport.zip

kevinxufei commented 2 months ago

I can repro this issue at iOS platform on the latest 17.11.0 Preview 7.0 (8.0.80 & 8.0.70 & 8.0.60) with sample project.

sample project BugReport.zip

Kremed commented 2 months ago

Iam facing the same issue, I just set the WidthRequest="{Binding WidthInDip}" in Xaml as workaround and C# Mvvm:

[ObservableProperty] public double widthInDip = 0;

 var displayInfo = DeviceDisplay.MainDisplayInfo;
 WidthInDip = (displayInfo.Width / displayInfo.Density) ;

Please Confirm !!

dotnet / maui