首页 > 解决方案 > UWP ListView 不垂直滚动

问题描述

ListView在a 中添加 a 后Grid,由于某种原因它不会垂直滚动。我把ListView里面放了,ScrollViewer然后又拿出来了,还是没什么区别。需要做些什么来解决这个问题并添加一个垂直滚动条,以便用户知道所有内容都无法适应他们的屏幕?

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

更新

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

标签: listviewuwpuwp-xaml

解决方案


问题是您将第二行ListView的高度设置为Auto,这意味着它将拉伸到最大高度,以显示其内容。如果你有足够长的屏幕,你可以看到结果。

但是我们通常不会将ListView/GridView的高度设置为Auto,我们可以将其高度设置为固定值。或者您可以使用 * 代替。* 表示它将是您的窗口高度的其余部分。所以你可以像这样改变你的代码。

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

如上面的代码所示,第一行将自动拉伸其高度,第二行将占用其余的窗口高度。

您还可以设置更多 *.

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

上面的代码显示第二行和第三行各占其余高度的一半。

在此处输入图像描述


推荐阅读