How to prevent listview from expanding past bottom of screen?

Question

Hi, I am trying to add a list view to my content page but when the items get a large enough count, it pushes everything down past the end of the screen, how do I stop that without setting a max height?

<?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="Test.Test"
             Title="Items" NavigationPage.HasBackButton="True">
    <VerticalStackLayout x:Name="vsLayout" VerticalOptions="Fill" BackgroundColor="#E81A1A">
       
        <ListView ItemsSource="{Binding Items}" SeparatorColor="#0875D4" BackgroundColor="AliceBlue" x:Name="lvItems" VerticalOptions="Start" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid RowSpacing="5" ColumnSpacing="5" Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="33*" />
                                <ColumnDefinition Width="33*" />
                                <ColumnDefinition Width="33*" />
                                <ColumnDefinition Width="0*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding Name}" />
                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Cost}" />
                            <Label Grid.Row="0" Grid.Column="2" Text="{Binding Date}" />
                            <Label Grid.Row="0" Grid.Column="3" Text="{Binding Row}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Frame
            x:Name="fFooter"
            CornerRadius="0"
            Padding="15,1,0,0"
            BackgroundColor="#0875D4" VerticalOptions="EndAndExpand" HorizontalOptions="Fill">
            <Label x:Name="Total" Text="Total: $" TextColor="White" Margin="0,0,5,0"/>
        </Frame>
    </VerticalStackLayout>
</ContentPage>

Answer 1

Your layout is the problem. What you want to do is have your top element a Grid. Then make the RowDefinitions *, fs where fs is the height of the Frame.

Then the ListView will fill the Grid.Row="0" and will scroll. Using a VerticalStackLayout while easy to use will cause problems when scrolling.

Answer 2

Hello,

If you use <ListView> in the <VerticalStackLayout> , Here is a known issue about ListView and CollectionView do not scroll in a VerticalStackLayout.

And if you get height in the background, this value will be -1, you cannot get the specific value.

You can achieve it by <Grid>. I set the listview's row height to 9*, Frame's height to *, you can change it by your layout.

<Grid x:Name="vsLayout" VerticalOptions="Fill"
 BackgroundColor="#E81A1A">
        <Grid.RowDefinitions>
            <RowDefinition Height="9*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ListView  Grid.Row="0">
...
        </ListView>

 <Frame
            Grid.Row="1"
            x:Name="fFooter"
            CornerRadius="0"
            Padding="15,1,0,0"
            BackgroundColor="#0875D4"
            HeightRequest="20"
            HorizontalOptions="Fill">
            <Label x:Name="Total" Text="Total: $" TextColor="White" Margin="0,0,5,0"/>
        </Frame>    
</Grid>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.