ItemsControl、VirtualizingStackPanel 和 ScrollViewer 高度

Question

我想使用 ItemsControl 显示重要的项目列表。

我使用 ItemsControl 的原因是我正在开发的应用程序中的 DataTemplate 要复杂得多：提供的示例代码仅反映了我遇到的尺寸问题。

我想 ：

• ItemsControl 要虚拟化，因为有很多项目要显示

• 其大小自动扩展到其父容器（网格）

  <Grid>
      <ItemsControl x:Name="My" ItemsSource="{Binding Path=Names}">
          <ItemsControl.Template>
              <ControlTemplate>
                  <StackPanel>
                      <StackPanel>
                          <TextBlock Text="this is a title" FontSize="15" />
                          <TextBlock Text="This is a description" />
                      </StackPanel>
                      <ScrollViewer CanContentScroll="True" Height="400px">
                          <VirtualizingStackPanel IsItemsHost="True" />
                      </ScrollViewer>
                  </StackPanel>
              </ControlTemplate>
          </ItemsControl.Template>
          <ItemsControl.ItemTemplate>
              <DataTemplate>
                  <TextBlock Text="{Binding}" />
              </DataTemplate>
          </ItemsControl.ItemTemplate>
      </ItemsControl>
  </Grid>
  

背后的代码是：

public partial class Page1: Page
{
    public List<string> Names { get; set; }
    public Page1()
    {
        InitializeComponent();

        Names = new List<string>();
        for(int i = 0; i < 10000; i++)
            Names.Add("Name : " + i);

        My.DataContext = this;
    }
}

当我将 ScrollViewer 高度强制为 400px 时，ItemsControl 虚拟化按我的预期工作：ItemsControl 会非常快速地显示列表，无论它包含多少项。

但是，如果我删除 Height="400px"，列表将扩展其高度以显示整个列表，无论其父容器高度如何。更差：它出现 在后面 它的容器。

在 ItemsControl 周围放置滚动查看器可提供预期的视觉结果，但虚拟化消失并且列表需要太多时间才能显示。

如何实现 ItemsControl 的自动高度扩展和虚拟化？

Answer 1

问题出在 ItemsControl.Template 中：你在那里使用 StackPanel，这可以为她的孩子提供他们想要的高度。将其替换为类似的东西

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <TextBlock Text="this is a title" FontSize="15" />
        <TextBlock Text="This is a description" />
    </StackPanel>
    <ScrollViewer CanContentScroll="True" Grid.Row="1">
        <VirtualizingStackPanel />
    </ScrollViewer>
</Grid>

它应该工作得很好。

希望能帮助到你。