Xamarin forms CollectionView data in two columns does not align in lines on iOs

Question

I have a problem on iOs. On android CollectionView items aligns perfect, but on iOS not. Screenshots:
Android screenshot: https://i.sstatic.net/7v2lK.png
iOs screenshot: https://i.sstatic.net/YCwsa.jpg

My code:

 <CollectionView x:Name="FlowersList" VerticalOptions="EndAndExpand" BackgroundColor="Transparent" >
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" x:Name="grid_layout" Span="2" />
                    </CollectionView.ItemsLayout>

                    <CollectionView.ItemTemplate>
                        <DataTemplate >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="nuline_row" Height="Auto"/>
                                    <RowDefinition x:Name="pirma_row" Height="Auto"/>
                                    <RowDefinition x:Name="antra_row" Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="nulinis_stulpelis"/>
                                </Grid.ColumnDefinitions>
                                <Image Grid.Row="0" 
                                       Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
                                       Aspect="AspectFill"                                    
                                       VerticalOptions="FillAndExpand" 
                                       HorizontalOptions="FillAndExpand">
                                </Image>
                                <Label Grid.Row="1" 
                                       Text="{Binding Name, Converter={StaticResource caseConverter}, ConverterParameter=u}"
                                       FontSize="16"
                                       TextColor="Black"
                                       LineBreakMode="WordWrap"
                                       HorizontalOptions="Center"
                                       HorizontalTextAlignment="Center"
                                       VerticalOptions="Start" />
                                <Label Grid.Row="2"
                                       Text="{Binding PriceToDisplay, StringFormat='{0} €'}"
                                       FontSize="16"
                                       TextColor="Black"
                                       LineBreakMode="WordWrap"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Start" Padding="0,-5,0,20" />
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
                                                              NumberOfTapsRequired="1" />

                                </Grid.GestureRecognizers>
                            </Grid>

                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

I have out of ideas. Maybe someone know how to solve this problem?

Answer 1

This may caused by the size of image is different by default:

Solution:

1.Give a specific height in the Grid:

 <Grid.RowDefinitions>
        <RowDefinition x:Name="nuline_row" Height="150"/>
        <RowDefinition x:Name="pirma_row" Height="Auto"/>
        <RowDefinition x:Name="antra_row" Height="*"/>
 </Grid.RowDefinitions>

2.Or give a heightRequest to Image:

<Image Grid.Row="0" 
    Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
    HeightRequest="150"
    Aspect="AspectFill"                                    
    VerticalOptions="FillAndExpand" 
    HorizontalOptions="FillAndExpand">
</Image>