ViewCell not align correctly and cut part of content - Xamarin Forms

Question

I have a ListView in Xamarin Forms XAML, in this ListView I want to draw a Grid with 4 labels and 1 Entry. My problem is that, when I try to display the ListView, its rows are superimposed and not all the content of the ViewCell, into the DataTemplate, is displayed.

I don't know what is my error.

Here my code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="iGuideTest.ExhibitionsPage"
    Title = "{Binding titleMenu}">
<ContentPage.Content>
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <Label Text="You are in the Exhibitions page" />
            <Button Text="Return to LoginPage" Command="{Binding BackCommand}" />
            <Label Text="{Binding exhibitionsList.Count}" />
        <Button Grid.Row="2" Grid.Column="0" Text="{Binding surname}" Command="{Binding Edit}" />
            <ListView x:Name="ListViewCouchbase" ItemsSource="{Binding exhibitionsList}"
                >
                <ListView.ItemTemplate>
                    <DataTemplate>
                    <ViewCell>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                <Label Grid.Row="0" Grid.Column="0" TextColor="#05199C" Text="{Binding title}" />
                                <Label Grid.Row="0" Grid.Column="1" TextColor="#008000" Text="{Binding userId}" />
                                <Label Grid.Row="1" Grid.Column="1" TextColor="Maroon" Text="{Binding LastUpdated}" />
                                <Label Grid.Row="1" Grid.Column="0" TextColor="Purple" Text="{Binding surname}" />
                                <Entry Grid.Row="2" Grid.Column="0" TextColor="Blue" Text="{Binding Id}" />
                                </Grid>
                    </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    </StackLayout>
</ContentPage.Content>

Thanks in advance.

Answer 1

Try to use HasUnevenRows property:

<ListView HasUnevenRows="True"> ... </ListView>

Answer 2

Yes, i've been there :)

just set ListView RowHeight="xx" where xx is some double indicating the height.

Answer 3

Since you are using a Grid and you have Auto in RowHeight you will be better of setting HasUnevenRows property to true.

Also your grid is of dynamic size on its own, you can set its VerticalOptions to Fill.