Grid does not properly size itself

Viewed 108

I'm having issues with CollectionView and Grid in my Xamarin Forms application. The CollectionView height does not size itself properly, the elements inside overlaps. I tried everything without success.

Here's the Grid page XAML definition:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Name="this"
         VerticalOptions="FillAndExpand"
         x:Class="RuberoydLabs.WallettoX.Controls.EventCell.EventCell">
<ContentView.Content>
    <Grid x:Name="SpendingEventWrapper"
          BindingContext="{x:Reference this}"
          VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"  />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="30*" />
        </Grid.ColumnDefinitions>
        <AbsoluteLayout Grid.Column="0"
                        Grid.Row="0"
                        VerticalOptions="FillAndExpand">
            <Ellipse Fill="{StaticResource PrimaryBrush}"
                     WidthRequest="35"
                     HeightRequest="35"
                     Margin="5,0,0,0"
                     StrokeThickness="0"
                     AbsoluteLayout.LayoutFlags="PositionProportional"
                     AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" />
            <Label AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                   AbsoluteLayout.LayoutFlags="PositionProportional"
                   Margin="5,-2,0,0"
                   x:Name="UserInitials"
                   TextColor="#0D495A" />
        </AbsoluteLayout>
        <StackLayout Grid.Column="1"
                     Grid.Row="0"
                     Orientation="Vertical"
                     VerticalOptions="FillAndExpand">
            <Label Text="{Binding InputEvent.Title}" 
                   FontSize="15"
                   x:Name="TitleLabel"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="#24838E" />
            <Label Text="{Binding InputEvent.Category.Name}"
                   FontSize="12"
                   x:Name="CategoryLabel"
                   Margin="0,-4,0,0"
                   BackgroundColor="#C59B59"
                   Padding="4,2,4,2"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="White" />
            <Label x:Name="CommentLabel"
                   Text="{Binding InputEvent.Comment}"
                   FontSize="12"
                   Margin="0,-4,0,0"
                   HorizontalOptions="StartAndExpand"
                   VerticalOptions="StartAndExpand"
                   TextColor="#959595" />
        </StackLayout>
        <StackLayout Grid.Column="2"
                     Grid.Row="0"
                     Orientation="Vertical"
                     VerticalOptions="FillAndExpand">
            <Label Text="{Binding InputEvent.Amount, StringFormat='{0:F2}'}"
                   Margin="0,5,10,0"
                   TextColor="#2F2F2F"
                   HorizontalOptions="EndAndExpand" />
            <Label Text="{Binding InputEvent.MoneyAccount.Currency}"
                   Margin="0,-5,10,0"
                   FontSize="11"
                   FontAttributes="Italic"
                   TextColor="#ADADAD"
                   HorizontalOptions="EndAndExpand" />
        </StackLayout>
        <BoxView Grid.ColumnSpan="3"
                 Grid.Row="1"
                 Grid.Column="0"
                 HeightRequest=".5"
                 BackgroundColor="#BABABA"  />
    </Grid>
</ContentView.Content>

and here's my CollectionView XAML definition:

<?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:controls="clr-namespace:RuberoydLabs.WallettoX.Controls.EventCell;assembly=RuberoydLabs.WallettoX"
         xmlns:resources="clr-namespace:RuberoydLabs.WallettoX;assembly=RuberoydLabs.WallettoX"
         x:Class="RuberoydLabs.WallettoX.Views.DashboardPage">
<ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand" 
                 Orientation="Vertical">
        <CollectionView ItemsSource="{Binding Groups}" 
                        IsGrouped="True"
                        VerticalOptions="FillAndExpand">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                        <controls:EventCell InputEvent="{Binding}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal"
                                 HorizontalOptions="FillAndExpand"
                                 Padding="5,0,5,3"
                                 Margin="0,0,0,5"
                                 BackgroundColor="#E3E3E3">
                        <Label FontSize="12"
                               VerticalOptions="Center"
                               TextColor="#767676"
                               Text="{Binding Date, StringFormat='{0:dddd MMMM d, yyyy}'}" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>
            <CollectionView.GroupFooterTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal"
                                 Padding="0,0,10,0"
                                 HorizontalOptions="FillAndExpand">
                        <Label Text="{x:Static resources:StringLocalization.Balance}"
                               HorizontalOptions="EndAndExpand" />
                        <Label Text="{Binding DayBalanceFormatted}"
                               HorizontalOptions="End" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupFooterTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage.Content>

For some reason, the elements inside the list just overlaps. What's interesting, it looks different on Android and iOS.

This is how it looks like on iOS:

enter image description here

enter image description here

And this is how it looks like on Android, it adds weird space between cells if the label spans to two or more lines:

enter image description here

I tried almost everything: removing different kind of grid elements (like ellipsis, box view), tried all possible combinations of VerticalOptions and HorizontalOptions, removing GroupHeaderTemplate and GroupFooterTemplate alltogether, still the issue is there.

Any help would be very much appreciated.

1 Answers

The issue was solved by upgrading to the latest Xamarin v5.0.0.2012

Related