DataTemplateSelector in CollectionView does not size/measure items properly
Description
I created a sample app, that adds image of a dog/cat in one of four grid spaces based on random chance every n seconds. If the image is on the left - the top item in template is Grid, if it's on the right - it's <Frame/> <Grid>. I use DataTemplateSelector to achieve that. In Android - it usually gets sized properly, but sometimes it too sizes wrong.
https://user-images.githubusercontent.com/36638029/179478529-21d30cde-d4aa-4c20-ab33-b4730388d624.mp4
When it comes to Windows - the sizeing is pretty much never implemented (in my real app I'm developing, it's mostly correct, but usually fallback to some one template and shows everything as that one disregarding all the others (works on Android fails on Windows), but I couldn't replicate it in this sample app for now).
https://user-images.githubusercontent.com/36638029/179477866-7c0839f9-f983-4bc6-9904-d5f560d1e428.mp4
Steps to Reproduce
- Extract this sample project TestImages.zip
- Launch it on Android and try to select items in CollectionView
Expected results: CollectionView items are displayed with proper sizeing Actual results: Item sizing sometimes is not consistent, but always falls inside the measured item space. (I'm pretty sure, that <Grid ColumnDefinitions="," RowDefinitions=","> should divide everything into 4 equal size squares which it doesn't but ¯_(ツ)_/¯ )
- Launch an app on Windows
Expected results: Same UI as in Android Actual Results: Images in ItemTemplates are displayed without taking into account the space provided and can cover one another (in case of grid) or are cropped (in case of Frame)
Version with bug
6.0.400
Last version that worked well
Unknown/Other
Affected platforms
Android, Windows
Affected platform versions
Android 11, 6.0.400
Did you find any workaround?
You can define HeightRequest="..." in xaml for the Image/Frame/Grid to fix the sizeing issue in Windows
Relevant log output
No response
Tested the app on iOS. Seems to have the same/very similar issue as in Windows platform
I'm facing the same issue on iOS: 2 datatemplates with different heights, a datatemplate selector, all items are height as the tallest, ignoring the heightrequest for the small datatemplate. Different ItemSizingStrategy does not resolve
Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11, Android 13.0 and iOS 16.4 with below Project: TestImages.zip
Android:
Windows:
iOS:
Is there any update/workaround on this issue?
Hi, I can also confirm this bug in my app. Very frustrating that this issue has been open for so long.
The issue is not reproduced with the latest MAUI NuGet version (10.0.11) on all platforms (Android, Windows, iOS, and Mac).
| Android | Windows |
|---|---|
Hi @@MissedSte4k. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.
You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.
This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.