search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.63k stars 1.87k forks source link

[Bug] [Android] CollectionView GridItemsLayout when HorizontalItemSpacing is set, first column gets width larger than other columns #15228

Open donatellijl opened 2 years ago

donatellijl commented 2 years ago

Description

Setting the HorizontalItemSpacing in GridItemsLayout on a CollectionView on Android has undesired results. The first column in the grid is given more space that the other columns.

Steps to Reproduce

  1. Run attached sample.
  2. On Android, see the first column of cells has a larger width than the other columns.
  3. On iOS, see that the first column is the same width as all the other columns.

Expected Behavior

On Android, all columns should have the same width. (Android should behave as iOS does)

Actual Behavior

On Android, first column has a larger width than the other columns.

Basic Information

Environment

Show/Hide Visual Studio info ``` === Visual Studio Community 2019 for Mac === Version 8.10.19 (build 2) Installation UUID: c9bce515-d8ca-4d11-b976-f538a9136231 GTK+ 2.24.23 (Raleigh theme) Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638) Package version: 612000162 === Mono Framework MDK === Runtime: Mono 6.12.0.162 (2020-02/2ca650f1f62) (64-bit) Package version: 612000162 === Roslyn (Language Service) === 3.10.0-4.21269.26+029847714208ebe49668667c60ea5b0a294e0fcb === NuGet === Version: 5.9.0.7134 === .NET SDK (x64) === SDK: /usr/local/share/dotnet/sdk/6.0.102/Sdks SDK Versions: 6.0.102 6.0.101 6.0.100-rc.1.21463.6 5.0.405 5.0.404 5.0.403 5.0.402 5.0.401 5.0.400 5.0.302 5.0.301 5.0.203 5.0.202 5.0.201 5.0.103 5.0.102 5.0.101 5.0.100 3.1.416 3.1.415 3.1.414 3.1.413 3.1.412 3.1.411 3.1.410 3.1.409 3.1.408 3.1.407 3.1.406 3.1.405 3.1.404 3.1.403 3.1.402 3.1.401 3.1.302 3.1.301 3.1.300 3.1.202 3.1.200 3.1.102 3.1.101 3.1.100 3.0.101 3.0.100 2.1.701 2.1.700 MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks === .NET Core Runtime === Runtime: /usr/local/share/dotnet/dotnet Runtime Versions: 6.0.2 6.0.1 6.0.0-rc.1.21451.13 5.0.14 5.0.13 5.0.12 5.0.11 5.0.10 5.0.9 5.0.8 5.0.7 5.0.6 5.0.5 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0 3.1.22 3.1.21 3.1.20 3.1.19 3.1.18 3.1.17 3.1.16 3.1.15 3.1.14 3.1.13 3.1.12 3.1.11 3.1.10 3.1.9 3.1.8 3.1.7 3.1.6 3.1.5 3.1.4 3.1.2 3.1.1 3.1.0 3.0.1 3.0.0 2.1.23 2.1.22 2.1.21 2.1.20 2.1.19 2.1.18 2.1.17 2.1.16 2.1.15 2.1.14 2.1.13 2.1.12 2.1.11 === .NET Core 3.1 SDK === SDK: 3.1.416 === .NET 5.0 SDK === SDK: 5.0.405 === Xamarin.Profiler === Version: 1.6.15.68 Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler === Updater === Version: 11 === Xamarin.Android === Version: 12.0.0.3 (Visual Studio Community) Commit: xamarin-android/d16-11/f0e3c2d Android SDK: /Users/jessicadonatelli/Library/Developer/Xamarin/android-sdk-macosx Supported Android versions: 5.1 (API level 22) 6.0 (API level 23) 7.0 (API level 24) 7.1 (API level 25) 8.1 (API level 27) SDK Tools Version: 26.1.1 SDK Platform Tools Version: 30.0.4 SDK Build Tools Version: 30.0.2 Build Information: Mono: c633fe9 Java.Interop: xamarin/java.interop/d16-11@476bb5b ProGuard: Guardsquare/proguard/v7.0.1@912d149 SQLite: xamarin/sqlite/3.35.4@85460d3 Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-11@87af37b === Eclipse Temurin JDK === Java SDK: Not Found === Android SDK Manager === Version: 16.10.0.13 Hash: 1b81df5 Branch: remotes/origin/d16-10 Build date: 2021-11-12 01:17:32 UTC === Android Device Manager === Version: 16.10.0.15 Hash: 89dcc0b Branch: remotes/origin/d16-10 Build date: 2021-11-12 01:17:52 UTC === Apple Developer Tools === Xcode 13.2.1 (19586) Build 13C100 === Xamarin.Mac === Version: 8.6.0.3 (Visual Studio Community) Hash: caa899d24 Branch: d17-1 Build date: 2022-01-16 21:16:56-0500 === Xamarin.iOS === Version: 15.6.0.3 (Visual Studio Community) Hash: caa899d24 Branch: d17-1 Build date: 2022-01-16 21:16:56-0500 === Xamarin Designer === Version: 16.11.0.60 Hash: 56f9b80b0 Branch: remotes/origin/d16-11 Build date: 2021-12-15 02:44:16 UTC === Build Information === Release ID: 810190002 Git revision: 632b6ca654e2733a685bfc9c6a0686e0a317092b Build date: 2022-02-09 13:38:14-05 Build branch: release-8.10 === Operating System === Mac OS X 11.6.2 Darwin 20.6.0 Darwin Kernel Version 20.6.0 Wed Nov 10 22:23:07 PST 2021 root:xnu-7195.141.14~1/RELEASE_X86_64 x86_64 === Enabled user installed extensions === NuGet Package Management Extensions 0.27 Telerik Xamarin Add-in 2022.1.117 Multilingual Extension 1.0.30 ```

Screenshots

Android: Screenshot_1647289284

iOS: Simulator Screen Shot - iPhone 8 - 2022-03-14 at 16 26 22

As HorizontalSpacing increases, only last two columns get smaller. Screen Recording 2022-03-14 at 5 44 26 PM

Reproduction Link

https://github.com/donatellijl/HorizontalItemSpacingIssue

Workaround

My work around was to not use HorizontalItemSpacing and to set a margin around the element in the data template. This obviously isn't ideal because there's more spacing in between the elements than there is around the outside of the elements. To compensate for this, I put a margin around the entire collection view as well. (Note: To use margin inside a data template you need to nest your content in a ContentView.)

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HorizontalItemSpacingIssue.MainPage">
    <CollectionView
        BackgroundColor="Green"
        Margin="15">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</x:String>
                <x:String>Blue Monkey</x:String>
                <x:String>Squirrel Monkey</x:String>
                <x:String>Golden Lion Tamarin</x:String>
                <x:String>Howler Monkey</x:String>
                <x:String>Japanese Macaque</x:String>
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemsLayout>
            <GridItemsLayout
                Orientation="Vertical"
                Span="2"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView>
                    <Label
                        Text="alkfjldksjfaldkfjdlkfjdalkfjasfasdasdasdasdfdgrsdcdcdsads"
                        LineBreakMode="WordWrap"
                        BackgroundColor="Yellow"
                        Margin="15"/>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

Screenshot_1647295760

unamed000 commented 2 years ago

Confirm. I have the same issue on XF 5.0.0.2401