Different Sized Buttons in CollectionView on iOS

[pvoelker]

I've been working on a 'quizzing' game using MAUI. I am using MAUI in .NET 7

For the quizzing interface, I am using buttons in a CollectionView. I have ItemSizingStrategy set to "MeasureAllItems" with word wrap enabled. The text can vary in size and wrap within the button. So I need each button to size individually to maximize screen space.

On iOS the text wraps, however the buttons are not sized correctly. It works fine on Android. A link to sample project that exhibits this is below:

Maui Button Collection Example

The CollectionView is in: https://github.com/pvoelker/MauiButtonCollEx/blob/7ae97d25f8e4986aada71990f521161dec12ba5a/MainPage.xaml#L14

Is there something I'm doing wrong or a trick to get sizing to work correctly on iOS? Or if there is a known issue, please point me to it. I tried looking in issues but did not seem to find this particular behavior described...

I am limited to .NET 7 at this point as MAUI in .NET 8 has a new CollectionView bug in it. And a number of third party libraries do not work correctly in .NET 8 yet...

Any suggestions or recommendations would be appreciated

[pvoelker]

I did try removing 'MinimumHeightRequest'. That didn't make a change...

[bradencohen]

Your problem is that the CollectionView is within both a ScrollView and VerticalStackLayout.

If you look around the bug reports, there have been quite a few explanations as to why this won't work, but here are some sources:
#8097 (hartez's comment)
CollectionView docs CTRL-F VerticalStackLayout

I revised your code, it would look something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionOfButtons.MainPage">

        <Grid
            RowDefinitions="Auto, *"
            RowSpacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label Grid.Row="0">Buttons should size appropriately with wrapped text...</Label>
            
            <CollectionView
                Grid.Row="1"
                ItemsSource="{Binding Path=StringList, Mode=OneWay}"
                ItemSizingStrategy="MeasureAllItems"
                SelectionMode="Single">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Vertical" ItemSpacing="1" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Button
                            Text="{Binding}"
                            LineBreakMode="WordWrap"
                            FontSize="24">
                        </Button>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Grid>
</ContentPage>

[pvoelker]

I applied your recommended changes and still have the same issue with the sizing of the buttons. Is it possible something with LinearItemsLayout?

[bradencohen]

Hmm... that does seem a little bizarre. I pulled your project and was able to reproduce. I tested on .NET 8 too, and it still is sized weird. Seems to be related to the LineBreakMode.

[bradencohen]

As a workaround, you could give using the Border control with a TapGestureRecognizer a try.

[pvoelker]

I have implement my own button to get around issues with the standard button in Windows and iOS for MAUI .NET 7. So far it seems to work pretty well:

https://github.com/pvoelker/JBQQuizMe/blob/main/JBQQuizMeApp/BetterButton.xaml
https://github.com/pvoelker/JBQQuizMe/blob/main/JBQQuizMeApp/BetterButton.xaml.cs