Xamarin IOS CollectionView: cannot vertically align items

Question

I'm using CollectionView with DataTemplate

<DataTemplate x:Key="tileTemplate">
    <StackLayout VerticalOptions="FillAndExpand"  BackgroundColor="Red" Padding="5" x:Name="ItemContainer">
        <StackLayout Padding="5" HorizontalOptions="CenterAndExpand" WidthRequest="{Binding Width, Source={x:Reference ItemContainer}}" HeightRequest="{Binding Width, Source={x:Reference ItemContainer}}">
        <Image Source="{Binding LogoID}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFit" />
        </StackLayout>
    </StackLayout>
</DataTemplate>


<CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource itemsDataTemplateSelector}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical"/>
    </CollectionView.ItemsLayout>
</CollectionView>

On Android they align vertically from the top:

But on IOS they align rather chaotically:

I can't figure out how to align them from the top like in Android.

--== UPDATE ==-- :

The problem is with HeightRequest of inner StackLayout

HeightRequest="{Binding Width, Source={x:Reference ItemContainer}}"

(same result if you use OnSizeAllocated)

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    
    HeightRequest = Width;
}

How to keep proportions and prevent tiles from popping on IOS is still opened question.

Jack Hua Jack Hua · Accepted Answer · 2020-07-01T02:14:14

It may caused by the layout in your stacklayout, I wrote a sample and it works well in iOS:

<CollectionView >
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Baboon</x:String>
            <x:String>Capuchin Monkey Capuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin MonkeyCapuchin Monkey</x:String>
            <x:String>Blue Monkey</x:String>
        </x:Array>
    </CollectionView.ItemsSource>

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">
                <Frame BackgroundColor="Green" WidthRequest="100" HeightRequest="90">
                    <Image Source="Images.png"/>
                </Frame>
                <Label Text="{Binding .}" HorizontalTextAlignment="Center"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Xamarin IOS CollectionView: cannot vertically align items

2 Answers