c# – How Can we achieve Masonry like design in .NET MAUI CollectionView or List view(Or any other Display Collections)


I am trying to show list of items in .NET MAUI but my figma design contains Masonry design with 2 columns(only) similar to below image:
enter image description here

How Can we achieve Masonry like design in .NET MAUI CollectionView or List view(Or any other Display Collections) for android and iOS?

I have tried with below approach using placeholer api: https://jsonplaceholder.typicode.com/photos

<CollectionView ItemsSource="{Binding PhotoSamples}" Grid.Row="1" 
    IsVisible="{Binding IsLoading, Converter={StaticResource InvertedBoolConverter}}">

<CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical" VerticalItemSpacing="5" Span="2" />
</CollectionView.ItemsLayout>

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="viewModels:PhotoSample">
        <ContentView Padding="5">
            <VerticalStackLayout>
                <Image Source="{Binding ThumbnailUrl}" Aspect="Center"
                WidthRequest="150" HeightRequest="150" Margin="0,0,0,10" />

                <Label Text="{Binding Title}" FontAttributes="Bold" FontSize="Large" />
            </VerticalStackLayout>
        </ContentView>
    </DataTemplate>
</CollectionView.ItemTemplate>

but it results in gaps when height is different as shown in below emulator screenshot:

enter image description here

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img