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=""
        <StackLayout BackgroundColor="LightGray" Padding="0, 0, 0, 10">
            <ListView x:Name="ListQuote" ItemTapped="ListQuote_OnItemTapped" SeparatorVisibility="None" HasUnevenRows="True">
                            <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">
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />

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

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

                                    <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 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 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 Grid.Row="1" Grid.Column="3" Padding="5, 5, 10, 5">
                                        <Button Text="Quotes" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" FontSize="10" FontAttributes="None" />

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" />