How to get correct Grid Column auto Width on Android?

Question

I'm a casual programmer these days and have started to dabble with MAUI. I've got a layout issue which is working correctly on Windows and incorrectly on Android.

I have a Grid with 2 columns and 1 row. The first column contains a ListView and the second contains an Image that changes with the ListView selection. I did it this way as the image wouldn't display within the screen when using HorizontalStackLayout.

I set the ItemsSource programatically when the ContentPage is opened and this doesn't change. The xaml has the first colum set to auto and the second to *

<Grid BackgroundColor="Aqua">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="SubTopicColumn"
            Width="auto" />
        <ColumnDefinition
            Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition
            Height="*" />
    </Grid.RowDefinitions>
    <ListView Grid.Column="0"
        x:Name="VivaListView"
              BackgroundColor = "Green"
        ItemSelected="VivaListView_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout
                        Padding="10">
                        <Label
                            FontSize="Small"
                            Text="{Binding VivaName}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Image x:Name="VivaImage" BackgroundColor="Red"
           Grid.Column="1"
           Margin="0,10,0,0"
           Aspect="AspectFit"
        Source="SelectedViva.Image" />
</Grid>

The background colors are to help illustrate the issue. On Windows, the first column correctly sizes with the content, like so:

but on Android, the first column is not visible:

If I change the setting to * or an absolute number, the column and its items are visible so the content is being loaded correctly.

Am I making a mistake I can't see or is this a bug?

Answer 1

It is having a hard time to determine the actual width of column, and when it fails you are getting this empty result.

You can modify this:

<ColumnDefinition x:Name="SubTopicColumn"
            Width="auto" />

And set something different than "auto". (For example you can make the column take 25% of you screen.)

You can also modify this:

<ListView Grid.Column="0"...

And request width of the control itself. (For example you can set its width to 200)

It is up to you. But do not let him guess its width.