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

[pablolop002]

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

1. Create a grouped collection view with a grid item layout
2. 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]

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

[pablolop002]

@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]

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>