UWP ListView not scrolling vertically

Apptacular Apps 386 Reputation points
2020-06-03T23:02:25.46+00:00

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? Should anything else be change to ensure best performance?

<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>
Universal Windows Platform (UWP)
{count} vote

Accepted answer
  1. Matt Lacey 791 Reputation points MVP
    2020-06-04T14:46:53.317+00:00

    This issue is that your (second) RowDefinition is set to Auto.

    This means it will grow as big as the contents. Unfortunately, there's nothing anywhere to then prevent the ListView from growing indefinitely to host all the items it contains. As the ListView then becomes as big as all the items it contains, it never needs to show the scrollbar. Yes, this happens even though the listview (and the grid's second row) grows past the bottom of the window.
    The easiest way to address this is to force the row to be limited to not extend beyond the visible window space.
    If you set the height of the second RowDefinition to be a star (see below) which will tell the row to take up all the available space (in the window) but no more. In turn, this limits the space available to the ListView and that then will cause the scrollbar to show once there are sufficient items in the list that scrolling becomes necessary.

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

1 additional answer

Sort by: Most helpful
  1. Xiaodi Yan 876 Reputation points MVP
    2020-06-03T23:33:10.297+00:00

    Hi, try to update the layout like this:

    <Grid VerticalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    ...your StackPanel...
    
    <ListView Grid.Row="1" VerticalAlignment="Stretch" >
    ...