Xamarin Forms CollectionView Custom Layout Design - xamarin

Question

In the app that I'm designing, I use collectionview to show loads of images. And this is my current design.
And this is the design I want.
where the images that are shorter in height will have the next image fill up the white spaces.
Heres my code:
<CollectionView x:Name="cv_WallPapers"
ItemsSource="{Binding Results, Mode=TwoWay}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
SelectionMode="Single"
SelectionChanged="cv_WallPapers_SelectionChanged"
>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2"
VerticalItemSpacing="5"
HorizontalItemSpacing="5"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Padding="4"
BorderColor="#34eba8"
BackgroundColor="#34eba8"
CornerRadius="10"
HasShadow="False">
<Image Source="{Binding urls.regular}"
HorizontalOptions="FillAndExpand"/>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I've no idea how to do that in Xamarin. And appreciate the help!

Answer 1

Unfortunately，CollectionView in Forms still doesn't support such a layout until now .However, we could use Custom Renderer as a workaround in Android.
public class MyCollectionViewRenderer: CollectionViewRenderer
{
public MyCollectionViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
{
base.OnElementChanged(elementChangedEvent);
if(elementChangedEvent.NewElement!=null)
{
this.SetLayoutManager(new StaggeredGridLayoutManager(2, 1));
}
}
}
In iOS , because the UICollectionView in native iOS doesn't have such a property or API , so we need to implement it manually (re-calculate the size of each item and set the offset) . Which you could refer https://developer.apple.com/documentation/uikit/uicollectionview/customizing_collection_view_layouts?language=objc . And I will post the feature request as soon as possible .