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 の高さを 400 ピクセルに強制すると、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>

そしてそれは罰金を動作するはずです。

希望、それは助けています。