C# MAUI Problem with overlapping "ListViews"

Question

I have problem with overlapping List Views. My xaml is organize to three parts "inputs" (Pickers & Entry), "button" (start calculations), outputs (two list views which print List of "Duct" class:

    public class Duct
    {
        public int? dimension { get; set; }
        public double crossSection { get; set; }
        public double? airSpeed { get; set; }
    }

On windows my app prints view list correctly.

But on android I get overlapping view lists.

When I scroll this view list I lost all outputs.

My List view xaml code looks like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EngineeringCalculator.VentilationCalculations"
             Title="Rectangle duct to round">
    <VerticalStackLayout>
        <!-- Grid with X and Y lenght of rectangular duct-->
        
        <Grid Padding="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Picker Grid.Row="0" x:Name="XPicker" Title="Select X dimension"/>
            <Picker Grid.Row="1" x:Name="YPicker" Title="Select Y dimension"/>
        </Grid>
        <!-- Grid with manual entry -->
        <Grid Padding="10" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Entry Grid.Row="0" Grid.Column="0" x:Name="AirEntry"
       Placeholder="Enter air flow in m3/h" Keyboard="Numeric"/>
            <Label Grid.Row="0" Grid.Column="1" Text="m³/h" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"/>
        </Grid>
        <!-- Button to calculate the best round ducts -->
        
        <Button 
                x:Name="CounterBtn"
                Text="Recalculate"
                SemanticProperties.Hint="Recalculate rectangle duct to round"
                Clicked="OnGetEquivalentChannels"
                HorizontalOptions="Center" />
        
        
    <ListView x:Name="RectangleDuct" Background="Transparent">
            <ListView.Header >

                <Grid Padding="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Text="Input rectangle duct informations" FontAttributes="Bold" Background="Gray"/>
                    <Label Grid.Row="1" Grid.Column="0" Text="Dimension" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.Column="1" Text="Cross Section" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.Column="2" Text="Air speed" FontAttributes="Bold" />
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0"
                           Text="{Binding dimension, StringFormat='{0} &#x2205;'}"
                            />
                            <Label
                           Grid.Column="1"
                           Text="{Binding crossSection, StringFormat='{0} m²'}"
                            />
                            <Label
                           Grid.Column="2"
                           Text="{Binding airSpeed, StringFormat='{0} m/s'}"
                            />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        
        <!-- Print list with 3 best round ducts-->
           
    <ListView  x:Name="RecalculatedDucts" Background="Transparent">
            <ListView.Header>
                <Grid Padding="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Label x:Name="RecalculateSummary" Grid.Row="0" Text="Equal round ducts" FontAttributes="Bold" Background="Gray"/>
                    <Label Grid.Row="1" Grid.Column="0" Text="Dimension" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.Column="1" Text="Cross Section" FontAttributes="Bold" />
                    <Label Grid.Row="1" Grid.Column="2" Text="Air speed" FontAttributes="Bold" />
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0"
                           Text="{Binding dimension, StringFormat='{0} &#x2205;'}"
                            />
                            <Label
                           Grid.Column="1"
                           Text="{Binding crossSection, StringFormat='{0} m²'}"
                            />
                            <Label
                           Grid.Column="2"
                           Text="{Binding airSpeed, StringFormat='{0} m/s'}"
                            />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        
    </VerticalStackLayout>
</ContentPage>

How can I fix this? I'm looking for method to have slider for full page on windows and android/ios.

Answer 1

Yes, the layout mechanism doesn't know how high the ListView needs to be at runtime. Just as Jason mention, you can set an explicit height for the ListView.

Depending on your needs(the data structure and presentation of the items in the two lists), it is recommended that you use Display grouped data to display the data. Large data sets can often become unwieldy when presented in a continually scrolling list. In this scenario, organizing the data into groups can improve the user experience by making it easier to navigate the data.

Data should be grouped before it can be displayed. This can be accomplished by creating a list of groups, where each group is a list of items. The list of groups should be an IEnumerable<T> collection, where T defines two pieces of data:

• A group name.
• An IEnumerable collection that defines the items belonging to the group.

For more information, you can check document: Display grouped data.

Note:

And there is an official sample here, you can refer to it here: .NET MAUI - ListView. Please play attention to GroupingPage.xaml and GroupedAnimalsViewModel.cs.

Besides, you can also use Display grouped data in a CollectionView to achieve this.