[Bug] CollectionView with GridItemsLayout and GroupHeader/GroupFooter Horizontally centred

pablolop002 commented 3 years ago

Description

When you have a CollectionView using a GridItemsLayout, centred text in header/footer is centred on first column instead of on full collection view. Maybe related with #13347 (#13380, #13464).

Steps to Reproduce

Create a grouped collection view with a grid item layout
Set a centred group header/footer

Expected Behavior

Group header/footer centred on full collection view.

Actual Behavior

Group header/footer centred on first column.

Basic Information

Version with issue: 5.0.0.2012
Last known good version: ??
Platform Target Frameworks:
- iOS: 14.1
- Android: No problem here
- UWP: ---
Android Support Library / AndroidX Version: ---
NuGet Packages:
Affected Devices: iOS devices

Environment

Show/Hide Visual Studio info

``` Visual Studio Professional 2019 for Mac Version 8.8.8 (build 12) Installation UUID: 02553e71-3d24-46d9-bb19-48c3e7d92de6 GTK+ 2.24.23 (Raleigh theme) Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638) Package version: 612000113 Mono Framework MDK Runtime: Mono 6.12.0.113 (2020-02/4fdfb5b1fd5) (64-bit) Package version: 612000113 Roslyn (Language Service) 3.8.0-5.20519.18+4c195c3ac1974edcefa76774d7a59a2350ec55fa NuGet Versión: 5.8.0.6860 SDK de .NET Core SDK: /usr/local/share/dotnet/sdk/5.0.103/Sdks Versiones del SDK: 5.0.103 5.0.102 5.0.101 5.0.100 3.1.406 3.1.405 3.1.404 SDK de MSBuild: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks .NET Core Runtime Runtime: /usr/local/share/dotnet/dotnet Versiones de tiempo de ejecución: 5.0.3 5.0.2 5.0.1 5.0.0 3.1.12 3.1.11 3.1.10 3.1.9 .NET Core 3.1 SDK SDK: 3.1.406 Xamarin.Profiler No se encontró "/Applications/Xamarin Profiler.app" Updater Versión: 11 Xamarin.Android Versión: 11.1.0.26 (Visual Studio Professional) "Commit": xamarin-android/d16-8/a36ce73 Android SDK: /Users/pablolop002/Library/Developer/Xamarin/android-sdk-macosx Versiones de Android admitidas: Ninguna instalada Versión de SDK Tools: 26.1.1 Versión de las herramientas de plataforma del SDK: 30.0.5 Versión de las herramientas de compilación del SDK: 30.0.3 Información de compilación: Mono: 5e9cb6d Java.Interop: xamarin/java.interop/d16-8@79d9533 ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc Microsoft OpenJDK for Mobile Java SDK: /Users/pablolop002/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.25 1.8.0-25 El código EPL de Android Designer está disponible EPL: https://github.com/xamarin/AndroidDesigner.EPL Android SDK Manager Version: 16.8.0.32 Hash: 01a7774 Branch: remotes/origin/d16-8 Build date: 2021-01-14 00:34:58 UTC Android Device Manager Version: 16.8.0.46 Hash: 0a81419 Branch: remotes/origin/d16-8 Build date: 2021-01-14 00:35:22 UTC Apple Developer Tools Xcode 12.4 (17801) Build 12D4e Xamarin.Mac Version: 7.4.0.4 (Visual Studio Professional) Hash: 5a05865f6 Branch: xcode12.4 Build date: 2021-01-28 02:30:22-0500 Xamarin.iOS Version: 14.10.0.4 (Visual Studio Professional) Hash: 5a05865f6 Branch: xcode12.4 Build date: 2021-01-28 02:30:23-0500 Xamarin Designer Version: 16.8.0.510 Hash: 44e3f3ce9 Branch: remotes/origin/d16-8 Build date: 2020-12-10 00:06:14 UTC Build Information Release ID: 808080012 Git revision: 147eee6fcc43c486d8b79477b6a521322a015604 Build date: 2021-02-04 04:32:34-05 Build branch: release-8.8 Xamarin extensions: 147eee6fcc43c486d8b79477b6a521322a015604 Operating System Mac OS X 10.16.0 Darwin 20.3.0 Darwin Kernel Version 20.3.0 Thu Jan 21 00:07:06 PST 2021 root:xnu-7195.81.3~1/RELEASE_X86_64 x86_64 Enabled user installed extensions Xamarin Extensions - Syncfusion 18.4.0.30 Telerik Xamarin Add-in 2021.1.119 ```

Build Logs

Screenshots

Reproduction Link

Workaround

hartez commented 3 years ago

@pablolop002 How are you centering your text? What does your GroupHeaderTemplate look like?

pablolop002 commented 3 years ago

@hartez this is the GroupHeaderTemplate code:

<CollectionView.GroupHeaderTemplate>
                    <DataTemplate x:DataType="models:CollectionGroup">
                        <Frame HasShadow="False"
                               BackgroundColor="{StaticResource PrimaryColor}"
                               Padding="5"
                               CornerRadius="5">
                            <Label Text="{Binding Name}"
                                   Style="{StaticResource TitleLabelStyle}"
                                   HorizontalOptions="Center"
                                   HorizontalTextAlignment="Center" />
                        </Frame>
                    </DataTemplate>
 </CollectionView.GroupHeaderTemplate>

The footer has the same code but without the frame

rmarinho commented 3 years ago

Hi @pablolop002 do you mind upload a reproduction? I have tried to reproduce on our gallery but wasn't able too.

heres a little bit of our xaml

<CollectionView.ItemsLayout>
                <GridItemsLayout Span="2" HorizontalItemSpacing="5" Orientation="Vertical"></GridItemsLayout>
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}" Margin="5,0,0,0"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <Frame HasShadow="False"
                               BackgroundColor="Lavender"
                               Padding="5"
                               CornerRadius="5">
                        <Label Text="{Binding Name}" BackgroundColor="LightGreen" FontSize="16" FontAttributes="Bold" 
                           HorizontalOptions="Center"
                           HorizontalTextAlignment="Center"/>
                    </Frame>
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>

xamarin / Xamarin.Forms