UWP GridView垂直滚动条无法显示问题求助

问题根源 #

• 根布局Grid的第二行高度设为Auto，导致GridView会随内容无限拉伸高度，永远不会触发滚动需求
• GridView显式设置了ScrollViewer.VerticalScrollBarVisibility="Disabled"和ScrollViewer.VerticalScrollMode="Disabled"，直接禁用了垂直滚动功能

修复步骤 #

1. 修改Grid的第二行高度为*，让它占据页面剩余空间，限制GridView的最大高度
2. 调整GridView的滚动属性，启用垂直滚动

修改后的完整XAML代码 #

<Page
x:Class="IMG.Pages.UploadPage"
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"
xmlns:img="using:IMG"
xmlns:local="using:IMG.Pages"
xmlns:Models="using:IMG.Models"

mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid x:Name="root">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <!-- 把Auto改为*，让该行占据剩余空间 -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0"
        Padding="2"
        BorderBrush="Black"
        BorderThickness="1"
        Orientation="Horizontal">
        <Button Click="GetPhoto" Content="get images" />
    </StackPanel>
    
    <GridView x:Name="ImageGrid" Width="Auto" Background="LightBlue" Grid.Row="1" Margin="5" Height="Auto"
              SizeChanged="ImageGridSizeChanged"
              ScrollViewer.HorizontalScrollBarVisibility="Auto"
              ScrollViewer.HorizontalScrollMode="Auto"
              <!-- 启用垂直滚动条和滚动模式 -->
              ScrollViewer.VerticalScrollBarVisibility="Auto"
              ScrollViewer.VerticalScrollMode="Enabled">   
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate x:Name="ImgThumbnail" x:DataType="Models:ImageData">
                <StackPanel
                            Width="100"
                            Height="120"
                            Margin="5"
                            AutomationProperties.Name="{x:Bind Hash}">
                    <StackPanel Margin="1">
                        <TextBlock Text="{x:Bind File}" />
                    </StackPanel>
                    <Image x:Name="thumbIMG" Width="80" Height="100" Stretch="UniformToFill" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>
</Page>

额外说明 #

• 设置RowDefinition为*后，GridView的高度会被限制在页面剩余区域内，当内容高度超过这个区域时，垂直滚动条会自动显示
• 保持ItemsWrapGrid的Orientation="Horizontal"可以让图片按水平方向换行，结合垂直滚动就能正常展示多列多行的图片列表

内容的提问来源于stack exchange，提问作者Cedric Raymond