UWP ListView not scrolling vertically

Question

After adding a ListView inside a Grid, it doesn't scroll vertically for some reason. I've placed the ListView inside a ScrollViewer then taken it out again and that still didn't make a difference. What needs to be done to fix this and add a vertical scroll bar so the user is aware that all content can't fit their screen?

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <TextBlock x:Uid="Header" Style="{StaticResource HeaderTextBlockStyle}" />
        <TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
    </StackPanel>
    <ListView Grid.Row="1"
                ItemsSource="{x:Bind listItems}"
                SelectionChanged="ListView_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Title}" 
                        Style="{StaticResource TitleTextBlockStyle}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

UPDATE

<Page
    x:Class="MyApp.ContactPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <TextBlock x:Uid="Header" Style="{StaticResource HeaderTextBlockStyle}" />
            <TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
        </StackPanel>
        <ListView 
                Grid.Row="1"
                ItemsSource="{x:Bind listItems}" 
                SelectionChanged="ListView_SelectionChanged">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Title}" 
                                       Style="{StaticResource TitleTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

Vincent Vincent · Accepted Answer · 2020-06-04T02:41:18

The problem is that you set the second row, ListView's height to Auto, which means it will stretch to the max height, in order to show it's content. If you have a long enough screen, you can see the result.

But we usually do not set a ListView/GridView's height to Auto, we can set it's height to a fix value. Or you can use * instead. * means it will the the rest of your window height. so you can change your code like this.

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

As the above code shows, the first row will stretch its height automaticaly, the second row will take the rest of you window height.

You can also set more *.

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

The above code shows that the second and the third row will take half of the rest height each.

UWP ListView not scrolling vertically

1 Answers