I try to create a MAUI XAML page with MVVM which should display several groups of buttons that are arranged in columns like in the picture below, but I want the column’s width to take up all available space evenly. Also all buttons inside the columns should resize their height to take up all space based on the column with the most buttons.

To achieve this, I tried using a CollectionView (yellow) that holds all the scales (columns) and the item template of that columns has another CollectionView (blue) that holds all the buttons of that column.

I learned that I can use a GridItemsLayout in the CollectionViews with the span bound to the count of the ItemsSource. That does work for spreading the columns over the complete width but not for the CollectionView that holds the buttons inside a column (blue) as you can see in the second picture. Now all CollectionViews are sized by the number of items of the first column.

The XAML code of this state looks like this:

<CollectionView
Grid.Row="1"
Margin="8"
BackgroundColor="Yellow"
ItemsSource="{Binding ScaleList}"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
    <GridItemsLayout
        HorizontalItemSpacing="4"
        Orientation="Vertical"
        Span="{Binding ScaleList.Count}"
        VerticalItemSpacing="4" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="datamodels:Scale">
        <Grid RowDefinitions="Auto,*">
            <Label
                Grid.Row="0"
                Padding="4"
                BackgroundColor="Green"
                HorizontalTextAlignment="Center"
                Text="{Binding Label}" />
            <CollectionView
                Grid.Row="1"
                BackgroundColor="Blue"
                ItemsSource="{Binding ValueList}"
                VerticalOptions="FillAndExpand">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout ItemSpacing="4" Orientation="Vertical" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="datamodels:MyValue">
                        <Frame
                            Padding="0"
                            BackgroundColor="Aquamarine"
                            CornerRadius="0">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:MyTestPageViewModel}}, Path=ValuePressedCommand}" CommandParameter="{Binding .}" />
                            </Frame.GestureRecognizers>
                            <Grid
                                Margin="4"
                                BackgroundColor="Red"
                                ColumnDefinitions="Auto,*">
                                <Image
                                    Grid.Column="0"
                                    Margin="4"
                                    BackgroundColor="White"
                                    HeightRequest="24"
                                    WidthRequest="24" />

                                <Label
                                    Grid.Column="1"
                                    Margin="4"
                                    Text="{Binding Name}"
                                    VerticalOptions="Center" />
                            </Grid>
                        </Frame>

                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

I would appreciate help to get the CollectionView use the complete vertical space and scale its items accordingly to the “most filled” column.

Maybe my approach is completely wrong and you can show up an other way to create this UI.

I also uploaded this sample project here if you want to try it out.