question

ApptacularApps-8305 avatar image
ApptacularApps-8305 asked ·

UWP ListView not scrolling vertically

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>
windows-uwpwindows-uwp-xaml
1 comment
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I haven't heard from you for a while. Do @yanxiaodi and @ramr-msft 's answers solve your problem? Please feel free to contact us if you still have problems.

0 Votes 0 · ·
mrlacey avatar image
mrlacey answered ·

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>
Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

yanxiaodi avatar image
yanxiaodi answered ·

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" >
 ...

Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.