Xamarin iOS images overlapping inside Grid

user_3303064 0
Viewed 998

Heyo,

So in Xamarin I have a <Grid> with an <Image> and a couple <Label>s inside it, all wrapped inside a <ViewCell>. This looks totally fine in Xamarin.Android, however in Xamarin.iOS the images overlap the labels. I'm not sure what the difference could be - why does it look good in Xamarin.Android but in iOS its all wonky?

Below is my XAML and a couple mockups to show what I mean.

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <ViewCell.View>
            <Grid>
                <Grid.ColumnDefinitions>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Image Grid.Column="0" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageOverlayEN}" />
                <Label Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferText}" FontSize="18">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                        <OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
                        <OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
                        <OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
                    </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label Grid.Column="0" Grid.Row="2" VerticalTextAlignment="Start" LineBreakMode="WordWrap" Text="{Binding DynamicOfferDetail}" FontSize="16">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                        <OnPlatform.iOS>RobotoCondensed-Regular</OnPlatform.iOS>
                        <OnPlatform.Android>RobotoCondensed-Regular.ttf#RobotoCondensed-Regular</OnPlatform.Android>
                        <OnPlatform.WinPhone>RobotoCondensed-Regular.ttf#RobotoCondensed</OnPlatform.WinPhone>
                    </OnPlatform>
                    </Label.FontFamily>
                </Label>
                </Grid>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

I tried setting the HeightRequest but that didn't seem to make a difference:

#if __IOS__
    if (viewModel.Items.Count > 0)
    {
        MyListView.HeightRequest = 300 * viewModel.Items.Count;
    }
#endif

Here is a visual representation of what is happening:

enter image description here

xamarin.forms xamarin xamarin.android xamarin.ios
1 Answers

Figured it out - had to do with my RowDefinitions being all set to Auto

This got it looking just right:

<RowDefinition Height="1*" />
<RowDefinition Height="0.18*" />
<RowDefinition Height="0.77*" />

I think what was happening is the ListView renders first, the Auto row definition heights set the height of each row before the image is done loading, then the image finishes loading and overlaps the rest of the list view's item (including the labels). This might just be a quirk of iOS, where as Android calculates the row heights after the images are done loading (explaining why it looked fine in Android)

user_33030640
Related