user-interfacecheckboxmauicollectionview

Why are the Check Boxes in the CollectionView differently sized?


I can't find a solution for an odd behaviour of .NET MAUI.

I'm harnessing a collection view in order to portray a variable number of answers to a question. Every answer is preceded by a check box. However, the check boxes don't seem to align and have different sizes. Please compare the following:

Check Box Problem Picture

The background of the surrounding collection view is coloured "aqua", whereas the background of the check boxes is coloured "yellow", for illustration purposes.

This is evidently in the corresponding code of the View:

<CollectionView Grid.Row="2"
                Grid.Column="0"
                ItemsSource="{Binding CurrentAnswers}"
                ItemsLayout="VerticalGrid"
                ItemSizingStrategy="MeasureAllItems"
                VerticalScrollBarVisibility="Always"
                HeightRequest="400">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid x:DataType="models:Answer"
                  Padding="20"
                  BackgroundColor="Aqua">
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <RadioButton Grid.Row="0"
                             Grid.Column="0"
                             Content="{x:Binding Content}"
                             TextColor="{StaticResource NightBlue}"
                             GroupName="Answers"
                             IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsStandardToBooleanConverter}, 
                        Source={x:Reference refTestView}}" />
                <Grid Grid.Row="0"
                      Grid.Column="0"
                      IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsMultipleChoiceToBooleanConverter}, 
                        Source={x:Reference refTestView}}">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <CheckBox Grid.Row="0"
                              Grid.Column="0"
                              BackgroundColor="Yellow"
                              Color="{StaticResource AlpineBlue}" />
                    <Label Grid.Row="0"
                           Grid.Column="1"
                           Text="{Binding Content}"
                           TextColor="{StaticResource NightBlue}"
                           VerticalOptions="Center"
                           LineBreakMode="WordWrap" />
                </Grid>


                <Entry Grid.Row="0"
                       Grid.Column="0"
                       IsSpellCheckEnabled="False"
                       IsTextPredictionEnabled="False"
                       HorizontalOptions="Start"
                       WidthRequest="400"
                       TextColor="{StaticResource NightBlue}"
                       IsVisible="{Binding 
                        Path=BindingContext.CurrentQuestion.QuestionType,
                        Converter={StaticResource QuestionTypeIsEntryToBooleanConverter}, 
                        Source={x:Reference refTestView}}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Depending on the question type in the ViewModel are either radio buttons, check boxes or entries visible.

Does anyone understand, why this problem occurs? Is this correlated to the side-by-side implementation of the radio-button and entry?


Solution

  • Just as Jason mentioned, since you didn't specify any specific sizing for the control of the CollectionView.ItemTemplate of the CollectionView, each row calculates its own layout independently based on each of its own contents.

    If you want the CheckBox to be the same size for each row, you can specify a specific height and width for them.

    For example:

    <CheckBox Grid.Row="0"  
              Grid.Column="0"
              BackgroundColor="Yellow"
              Color="{StaticResource AlpineBlue}" 
              WidthRequest="30" 
              HeightRequest="30"/>