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> 

它應該可以正常工作。

希望它有幫助。