How can I prevent xamarin form ListView items overlapping?

I am currently working on a Xamarin project which displays some content requesting from an API. The requested content is a list of objects and they will be displayed in a list view. API call is working properly and provide responds as expected. When I display the respond in a list view it looks little messy.

This is my Xamarin form page code (Some contents are hard coded in order to make the UI consistent before further development):

<?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:helper="clr-namespace:WinningQuotes.Helper;assembly=WinningQuotes"
             x:Class="WinningQuotes.Views.QuotesPage"
             Title="Quotes">
    <ContentPage.Content>
        <StackLayout BackgroundColor="LightGray" Padding="0, 0, 0, 10">
            <ListView x:Name="ListQuote" ItemTapped="ListQuote_OnItemTapped" SeparatorVisibility="None" HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout BackgroundColor="LightGray" Padding="10, 10, 10, 0">
                                <Grid RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.25}"
                                      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75}"
                                      BackgroundColor="#FFFFFF" ColumnSpacing="0" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>

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

                                    <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="Brown" Padding="10">
                                        <Label Text="Author" TextColor="#FFFFFF" FontSize="18" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal">
                                        <Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />

                                        <StackLayout Margin="10, 0, 0, 0" HorizontalOptions="StartAndExpand">
                                            <Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
                                        </StackLayout>
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="1" Padding="10, 5, 5, 5">
                                        <Label Text="AUTHOR HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />

                                        <Label Text="24" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="2" Padding="5">
                                        <Label Text="QUOTES HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />

                                        <Label Text="120" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="3" Padding="5, 5, 10, 5">
                                        <Button Text="Quotes" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" FontSize="10" FontAttributes="None" />
                                    </StackLayout>
                                </Grid>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

When I run this on android emulator or real android device, it looks like this:

enter image description here

ListView element contents are overlapping and some unnecessary space below the brown box etc. How can I make this page look consistent?

1 answer

  • answered 2018-11-09 07:02 Ataberk Uzkal

    You can use Spacing in StackLayout to seperate the childeren. I believe changing default margin to this->Margin="10, 0, 0, 0" is the reason of overlapping. Try it this way. Hope it works.

                                        <StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal" Spacing="10">
                                          <Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />
    
    
                                          <Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
    
                                    </StackLayout>