ListView not displaying correctly on iOS

Question

I am coding Xamarin forms app that displays users comments in a ListView.

The problem is it displays correctly on Android but on iOS it is all out of the box (As shown in the screenshots)

The items are added after an async web request is run gathering the information, I don't know if that affects it.

Android Screen

iOS Screen

My XAML

<local:PostListView x:Name="MessageView" HasUnevenRows="True" IsPullToRefreshEnabled="True" Refreshing="MessageView_Refreshing" SeparatorVisibility="None" BackgroundColor="#7ed6df">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:PostViewCell>
                <StackLayout x:Name="MessageLayout" BackgroundColor="White" Margin="10, 10, 10, 10" Padding="10, 10, 15, 10">
                    <Image Source="options_icon.png" HeightRequest="18" HorizontalOptions="End" Margin="5, 0, 5, 0" IsVisible="{Binding ShowBanners}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OptionClick}" CommandParameter="{Binding .}"/>
                        </Image.GestureRecognizers>
                    </Image>
                    <Label Text="{Binding Body}" HorizontalOptions="CenterAndExpand" TextColor="{Binding BodyColor}" FontSize="15" Margin="0, 10, 0, 10"/>
                    <StackLayout x:Name="MessageFooter" Orientation="Horizontal" IsVisible="{Binding ShowBanners}">
                        <Image x:Name="LikeSource" Source="{Binding LikeImageSource}" HeightRequest="20" HorizontalOptions="StartAndExpand" Margin="0, 0, 10, 0">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding LikeClick}" CommandParameter="{Binding .}"/>
                            </Image.GestureRecognizers>
                        </Image>
                        <Label Text="{Binding Timestamp}" TextColor="Black" FontSize="10" HorizontalOptions="EndAndExpand"/>
                    </StackLayout>
                </StackLayout>
            </local:PostViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</local:PostListView>

PostViewCell.cs

using SocialNetwork.iOS.Renderers;
using SocialNetwork.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(PostViewCell), typeof(PostViewCelliOS))]
namespace SocialNetwork.iOS.Renderers
{
    public class PostViewCelliOS : ViewCellRenderer
    {

        public override UIKit.UITableViewCell GetCell(Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;
            return cell;
        }
    }
}

Answer 1

You can try to create a StackLayout wrapping your content like:

<local:PostViewCell>
    <StackLayout>
        <StackLayout x:Name="MessageLayout" BackgroundColor="White" Margin="10, 10, 10, 10" Padding="10, 10, 15, 10">
            <Image Source="options_icon.png" HeightRequest="18" HorizontalOptions="End" Margin="5, 0, 5, 0" IsVisible="{Binding ShowBanners}">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding OptionClick}" CommandParameter="{Binding .}"/>
                </Image.GestureRecognizers>
            </Image>
            <Label Text="{Binding Body}" HorizontalOptions="CenterAndExpand" TextColor="{Binding BodyColor}" FontSize="15" Margin="0, 10, 0, 10"/>
            <StackLayout x:Name="MessageFooter" Orientation="Horizontal" IsVisible="{Binding ShowBanners}">
                <Image x:Name="LikeSource" Source="{Binding LikeImageSource}" HeightRequest="20" HorizontalOptions="StartAndExpand" Margin="0, 0, 10, 0">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding LikeClick}" CommandParameter="{Binding .}"/>
                    </Image.GestureRecognizers>
                </Image>
                <Label Text="{Binding Timestamp}" TextColor="Black" FontSize="10" HorizontalOptions="EndAndExpand"/>
            </StackLayout>
        </StackLayout>
    </StackLayout>
</local:PostViewCell>