Question

我想在一个uwp页面上显示一个列表视图和一个图像。列表视图的项目是动态添加的。加载页面用户时可以看到完整的列表视图。如果他点击任何一行，列表视图将根据该被点击的行进行过滤。然后用户可以看到过滤的列表视图和列表视图下方的图像。如果用户点击图像，它将再次显示没有图像的完整列表视图。现在我的问题是我想用滚动视图显示列表视图（滚动应该在列表视图高度到达屏幕结束时工作）。如果用户点击列表视图的任何一行，图像的高度应从过滤后的列表视图的末尾填充到屏幕的底部。我在下面做过。

<Grid HorizontalAlignment="Stretch"  >
    <Grid.RowDefinitions    >
        <RowDefinition Height="*"  />
        <RowDefinition Height="*"  />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ListView x:Name="ItemListView" Margin="0,0,0,0"  ScrollViewer.VerticalScrollBarVisibility="Auto"   Grid.Row="0"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Width="Auto"  >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid  >
           //binding items here
              </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
       </ListView>
   <Border Background="Green" Grid.Row="1"  x:Name="Bg"  Tapped="Bg_TappedAsync"  Visibility="Collapsed">
   <TextBlock x:Uid="txt_string1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="DetectFromContent" FontSize="15" MaxLines="4" FontFamily="Calibri" FontStyle="Italic"/>    
   </Border>
    </Grid>

当我这样做时，列表视图和图像（在代码中它是一个边框）占据屏幕的一半。所以当显示过滤的列表视图（它可能只有一行）时，列表视图和图像之间会出现间隙。我想用剩余的屏幕高度填充图像。我怎样才能实现它？我不想设置listview的MaxHeight。因为它应该在不同大小的设备上运行

Answer 1

当您为*创建RowDefinition.Height的两行时，您将获得两个大小相同的Grid行，这就是您所看到的行为。在评估具有Auto和硬编码像素高度的所有行之后，星形为行提供剩余的所有空间。当有多个星形行时，它们将平均分配剩余空间。您还可以使用2*之类的值来表示该行的高度应该是*行的两倍，因此您可以创建像“2：1”这样的“分数”。

但是，在您的情况下，您可能希望将Auto用于第二行的Height。 Auto将为行提供实际需要的大小，因此当图像未显示时，它实际上将具有零高度。当图像显示时，它将与图像一样高，并且由于Grid，列表将占据*高度的其余部分。

在网格中滚动Listview - UWP

1 个答案: