Custom Image Gallery (CollectionView, Grid) in .Net MAUI

Question

everyone!

I want to make an Image Gallery with unusual view. It will consists of cells of different size (see attached image for reference). I guess I need to use CollectionView with Grid. But I can't realize how to implement such view, where Images appears in the specified order. May be I need creating and filling cells dynamically by C# code... I'm not sure.

Could you direct me please? Any advices.

Here is my layout:

<CollectionView x:Name="collectionView" ItemsSource="{Binding GalleryItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:GalleryItem">

            <Grid x:Name="gridCollection" VerticalOptions="Center" HorizontalOptions="Center" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150" Grid.ColumnSpan="2" Grid.RowSpan="2" />
                    <RowDefinition Height="150" />
                    <RowDefinition Height="150" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150" Grid.ColumnSpan="2" Grid.RowSpan="2" />
                    <ColumnDefinition Width="150" />
                    <ColumnDefinition Width="150" />
                </Grid.ColumnDefinitions>
                
                <!-- Button as an example. Image will replace them -->
                <Button Text="Image 1" Grid.RowSpan="2" Grid.ColumnSpan="2" BackgroundColor="Yellow" />
                <Button Text="Image 2" Grid.Row="0" Grid.Column="2" BackgroundColor="Green" />
                <Button Text="Image 3" Grid.Row="1" Grid.Column="2" BackgroundColor="Red" />
                <Button Text="Image 4" Grid.Row="2" Grid.Column="0" BackgroundColor="Purple" />
                <Button Text="Image 5" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" BackgroundColor="Blue" />
            </Grid>
            
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Answer 1

You can simple use Grid to achieve that effect. And don't forget to add ColumnSpacing="5" RowSpacing="5" for the Grid.

Here's the output: