Adjust Maui Grid Row height according to label with multiple rows

I'm new to MAUI and I want to develop an app where the user has multiple input fields (dynamically added from an XML file). The problem is that the Grid cells seem to adjust fine when a label is just one row, but as soon as the text spills over to multiple rows the cell height isn't adjusted accordingly.

Check this example:

<ScrollView>
    <VerticalStackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <Label x:Name="c1r1" Grid.Column="0" Grid.Row="0" Text="Some information that will span multiple rows. I'd like the row height to adjust accordingly." VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r1" Grid.Column="1" Grid.Row="0" Content="OK"/>
            <RadioButton x:Name="c3r1" Grid.Column="2" Grid.Row="0" Content="Not OK at all"/>

            <Label x:Name="c1r2" Grid.Column="0" Grid.Row="1" Text="Short text" VerticalTextAlignment="Center"/>
            <RadioButton x:Name="c2r2" Grid.Column="1" Grid.Row="1" Content="OK"/>
            <RadioButton x:Name="c3r2" Grid.Column="2" Grid.Row="1" Content="NOK"/>
        </Grid>
    </VerticalStackLayout>
</ScrollView>

This looks fine on a wide screen, like Windows Machine. However, on an Android Emulator with small screen, the long label text on column 0 row 0 wraps but only the first two rows are shown. Likewise the radio button on column 0 row 2 wraps, but is partially cut at the bottom.

I've tried different RowDefinition Height settings, like * and Auto, which didn't change anything.

I've also tried to wrap the controls in different types of layouts, but haven't found anything that does what I want.

What can I do to make the row height expand so that the whole text is visible??



Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)