.Net Maui ListView is not appearing in Android

Question

The problem is that listview header and content is not appearing on my android device and android emulator, so please what is the fix for that?

<?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="Listv.MainPage">

<ScrollView>
    <VerticalStackLayout
        Spacing="25"
        Padding="30,0"
        VerticalOptions="Center">

        <ListView>
            <ListView.Header>TheHeader</ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="Hi"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </VerticalStackLayout>
</ScrollView>

Answer 1

From above code,I found that you haven't set the ItemsSource for ListView, that is to say there is no data for ListView to render.

You need to set BindingContext for your page and set the ItemsSource for ListView.

You can refer to the following code:

MainPage.xaml

    <ContentPage.BindingContext>
        <XamListViewApp:MyViewModel></XamListViewApp:MyViewModel>
    </ContentPage.BindingContext>

    <!--<ScrollView>-->
        <StackLayout  Orientation="Vertical"
                      Spacing="25"
                      Padding="30,0"
                      VerticalOptions="Center"
                     >
            <ListView Grid.Row="1"   ItemsSource="{Binding Items}"  >
                
                <ListView.Header>TheHeader</ListView.Header>
                
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!--<Grid BackgroundColor="{Binding BgColor}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70"/>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="80"/>
                                    <ColumnDefinition Width="80"/>
                                </Grid.ColumnDefinitions>

                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding NumType}" Margin="0,0,0,0" />
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding LocationCode}"  Margin="0,0,0,0" />
                                <Label Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="{Binding Barcode}"  Margin="0,0,0,0" />
                                <Label Grid.Row="0" Grid.Column="2" Text="{Binding UserName}"  Margin="0,0,0,0" />
                                <Label Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Text="{Binding PickingAdjustementDate}"  Margin="0,0,0,0" />

                            </Grid>-->

                        <Label Text="Hi"/>

                    </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

    <!--</ScrollView>-->

MyViewModel.cs

public class MyViewModel 
{
    public ObservableCollection<Item> Items { get; set; }


    public MyViewModel() { 
     Items = new ObservableCollection<Item>();

        Items.Add( new Item { NumType = "S" , LocationCode = "0001"});
        Items.Add(new Item { NumType = "M", LocationCode = "0002" });
        Items.Add(new Item { NumType = "L", LocationCode = "0003" });
        Items.Add(new Item { NumType = "S", LocationCode = "0001" });
        Items.Add(new Item { NumType = "M", LocationCode = "0002" });
        Items.Add(new Item { NumType = "L", LocationCode = "0003" });

    }
}

Item.cs

public class Item
{

    public string NumType { get; set; }

    public string LocationCode { get; set; }

    public string Barcode { get; set; }
    public string UserName { get; set; }

    public string PickingAdjustementDate { get; set; }

}

For more information, you can check: ListView appearance

Note:

In general, Xamarin doesn't recommend using the ListView, WebView, or ScrollView inside a ScrollView.