如何使 ListView 高度动态化？

Question

我有一个ListView，下面是一个StackLayout。我试图让ListView 的高度随着更多行的添加而增长（使用StackLayout 中的命令），仅使用XAML。发生的事情是 ListView 的高度太大，页面最终可以滚动，StackLayout 一直向下

这是我的代码：

<StackLayout Orientation="Vertical">
     <BoxView HorizontalOptions="FillAndExpand" HeightRequest="10" Color="Transparent/>
     <StackLayout>
          <Label Style="{StaticResource AXASOL_Label_H1}" TextColor="White" Text="Do you have Dependents?" HorizontalOptions="Center"/>
     </StackLayout>
     <ListView>
          <ListView.ItemTemplate>
              <DataTemplate>
                   <ViewCell>
                   </ViewCell>
              </DataTemplate>
           </ListView.ItemTemplate>
     </ListView>
     <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
     </StackLayout>
 </StackLayout>

Answer 1

我建议使用Grid 而不是StackLayout。确保包含ListView 的Row 设置为Height="*"。

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Content="Do you have Dependents?" />

     <ListView Grid.Row="1" ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button Grid.Row="2" Content="Click" Click="ButtonBase_OnClick"></Button>
</Grid>

代码隐藏：

public partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponent();
    DataContext = this;
    Items = new ObservableCollection<Item>();
    Items.Add(new Item("bla"));
    Items.Add(new Item("blub"));
    Items.Add(new Item("blubber"));
 }

  public ObservableCollection<Item> Items { get; set; }

  private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
  {
    Items.Add(new Item("test"));
  }
}

public class Item
{
  public Item(string name)
  {
    Name = name;
  }
  public string Name { get; set; }
}

这将使所有Rows 和Height="Auto" 占用其内容所需的空间，而包含ListView 的Row 将填满所有剩余空间。