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

Question

I have a problem on iOs. On android CollectionView items aligns perfect, but on iOS not. Screenshots:
Android screenshot: https://i.stack.imgur.com/7v2lK.png
iOs screenshot: https://i.stack.imgur.com/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>

Answer 2

just upgrade xamrin Froms Version.
Xamarin.Forms CollectionView Introduction

Answer 3

I have also ran into simular problems with using grids like this inside Data Templates on iOS. I can't explain why it's not working reliable, but I managed to work around it by switching to stacklayout + putting the HeightRequest="150" on the Image. Seen as you're basically using the grid as a vertical stack, you might want to try this one.