CollectionView won't be positioned to Center

Issue

I've been stuck in this programming problem for a while now. I've designed a screen just like this in my Xamarin.Forms application. the part I'm stuck is centering the CollectionView which is the part in the screen where it stacks the months. I've tried using Margin but it's not the best solution because it will show different in each screen. I've tried messing with StackLayout and setting its HorizontalOptions to Center/Expand didn't work. Even when I directly set the CollectionView to Center/Expand the content of the CollectionView will still be in the "Start" align of the screen. I'm so clueless here, no idea what I'm doing wrong here. Note that this control is stacked inside a Grid.Row within the main Grid.

XAML is pasted here

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:converters="clr-namespace:Covid19Tracker.Converters;assembly=Covid19Tracker"
             xmlns:i18n="clr-namespace:Covid19Tracker.Common;assembly=Covid19Tracker"
             xmlns:chart1="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             mc:Ignorable="d"
             FlowDirection="{x:Static Device.FlowDirection}"
             BackgroundColor="#0c0e28"
             NavigationPage.HasNavigationBar="False"
             x:Class="Covid19Tracker.Views.MainView">
    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:FlowDirectionConverter x:Key="FlowDirectionConverter"/>
            <converters:ListMarginConverter x:Key="MarginConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>

        <RefreshView IsRefreshing="{Binding IsBusy, Mode=OneWay}" Command="{Binding RefreshCommand}">
            <ScrollView>
                <Grid>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <!--Topbar-->
                    <Grid Padding="30">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" HeightRequest="22" WidthRequest="22" Source="menu.png"/>

                        <Label Grid.Column="1" Margin="30,0,0,0" FontSize="24" Text="{i18n:Translate TopbarLabel}"/>

                        <StackLayout Grid.Column="2" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                            <Image HeightRequest="22" WidthRequest="22" Source="search.png"/>
                            <Image Margin="20,0,0,0" HeightRequest="22" WidthRequest="22" Source="options.png"/>
                        </StackLayout>
                    </Grid>
                    <!--Topbar-->

                    <!--Graph-->
                    <chart1:RadCartesianChart Grid.Row="1" HeightRequest="150" BackgroundColor="Transparent">
                        <chart1:RadCartesianChart.HorizontalAxis>
                            <chart1:CategoricalAxis MajorTickBackgroundColor="Transparent" 
                                                    LabelTextColor="Transparent" 
                                                    LineColor="Transparent" 
                                                    LabelFitMode="MultiLine"
                                                    PlotMode="OnTicks" />
                        </chart1:RadCartesianChart.HorizontalAxis>
                        <chart1:RadCartesianChart.VerticalAxis>
                            <chart1:NumericalAxis MajorTickBackgroundColor="Transparent" 
                                                  LineColor="Transparent"
                                                  LabelTextColor="Transparent"/>
                        </chart1:RadCartesianChart.VerticalAxis>
                        <chart1:RadCartesianChart.Series>
                            <chart1:SplineSeries 
                                Stroke="#e32049"
                                ValueBinding="Value"
                                ItemsSource="{Binding InfectionHistory}"/>
                            <chart1:SplineSeries 
                                Stroke="#2979ff"
                                ValueBinding="Value"
                                ItemsSource="{Binding RecoveredHistory}"/>
                        </chart1:RadCartesianChart.Series>
                    </chart1:RadCartesianChart>
                    <!--Graph-->

                    <!--Statistics-->
                    <Grid Grid.Row="2" Margin="15" HorizontalOptions="CenterAndExpand">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="0">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <StackLayout Grid.Row="0" Margin="20,0,0,0">
                                <Label HorizontalTextAlignment="{Binding Converter={StaticResource FlowDirectionConverter}}" FontSize="Large" Text="{Binding Recovered, StringFormat='{}{0:0,0}'}"/>
                                <Label FontSize="Medium" Text="{i18n:Translate txtRecovering}" TextColor="#2979ff"/>
                            </StackLayout>

                            <BoxView Grid.Row="1" Grid.Column="0" Margin="0,15,0,0" Color="#2979ff" HeightRequest="1" WidthRequest="180"/>
                        </Grid>

                        <Grid Grid.Column="1">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <StackLayout Grid.Row="0" Margin="20,0,0,0">
                                <Label HorizontalTextAlignment="{Binding Converter={StaticResource FlowDirectionConverter}}" FontSize="Large" Text="{Binding Infected, StringFormat='{}{0:0,0}'}"/>
                                <Label FontSize="Medium" Text="{i18n:Translate txtInfections}" TextColor="#e32049"/>
                            </StackLayout>

                            <BoxView Grid.Row="1" Grid.Column="0" Margin="0,15,0,0" Color="#e32049" HeightRequest="1" WidthRequest="180" />
                        </Grid>

                    </Grid>
                    <!--Statistics-->

                    <!--Extended details-->
                    <CollectionView  
                        x:Name="CollectionView"
                        Grid.Row="3" 
                        SelectionMode="Single"
                        SelectionChangedCommand="{Binding SelectionChangedCommand}"  
                        SelectionChangedCommandParameter="{Binding SelectedItem, Source={x:Reference CollectionView}}"
                        Margin="0,10,0,30"
                        ItemsSource="{Binding MonthModels}" 
                        HeightRequest="30">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ItemSpacing="70"/>
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup Name="CommonStates">
                                            <VisualState Name="Selected">
                                                <VisualState.Setters>
                                                    <Setter Property="BackgroundColor" Value="#0c0e28" />
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <Label FontSize="Large" Text="{Binding MonthLabel}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup Name="CommonStates">
                                                <VisualState Name="Normal">
                                                    <VisualState.Setters>
                                                        <Setter Property="TextColor" Value="#4f516e"></Setter>
                                                    </VisualState.Setters>
                                                </VisualState>
                                                <VisualState Name="Selected">
                                                    <VisualState.Setters>
                                                        <Setter Property="TextColor" Value="White" />
                                                    </VisualState.Setters>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                    </Label>
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                    <ListView
                            Grid.Row="4"
                            SeparatorVisibility="Default"
                            SeparatorColor="#232539"
                            HasUnevenRows="True"
                            HeightRequest="350"
                            VerticalOptions="FillAndExpand"
                            HorizontalOptions="FillAndExpand"
                            x:Name="ListView"
                            x:FieldModifier="public"
                            ItemsSource="{Binding ListViewItems}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Padding="20">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2*"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>

                                        <Label TextColor="White" Margin="{Binding Converter={StaticResource MarginConverter}}" Text="{Binding date, StringFormat='{}{0:MMMM dd}'}" />

                                        <StackLayout Orientation="Horizontal" Grid.Column="1">
                                            <Image Margin="0,0,6,0" WidthRequest="6" HeightRequest="6" Source="BluePoly.png"/>
                                            <Label TextColor="#2774f5" Text="{Binding recovered, StringFormat='{}{0:0,0}'}" />
                                        </StackLayout>

                                        <StackLayout Orientation="Horizontal" Grid.Column="2">
                                            <Image Margin="0,0,6,0" WidthRequest="6" HeightRequest="6" Source="RedPoly.png"/>
                                            <Label TextColor="#e32049" Text="{Binding infected, StringFormat='{}{0:0,0}'}" />
                                        </StackLayout>
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                    <!--Extended details-->

                </Grid>

            </ScrollView>
        </RefreshView>
    </ContentPage.Content>
</ContentPage>

I hope I filed this question properly in order to get serious help and not "read FAQ"

Solution

You could add an extra Column both on left and right of the label .

<DataTemplate>
  <Grid>

     <Grid.ColumnDefinitions>

        <ColumnDefinition Width="0.1*" />
        <ColumnDefinition Width="0.8*" />  
        <ColumnDefinition Width="0.1*" />

    </Grid.ColumnDefinitions>

<Label Grid.Column="1" FontSize="Large" Text="{Binding MonthLabel}" HorizontalTextAlignment="Center" >

Now the label will display on the center of screen

Update

You can also put the whole CollectionView in the second

 <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="0.8*" />
                <ColumnDefinition Width="0.1*" />

            </Grid.ColumnDefinitions>



            <!--Extended details-->
            <CollectionView 
                Grid.Column="1"
                        //...>
                
                  //...
            </CollectionView>
</Grid>

Answered By - Lucas Zhang - MSFT