ItemsControl, VirtualizingStackPanel và ScrollViewer height

Question

Tôi muốn hiển thị một danh sách các mục quan trọng bằng cách sử dụng một ItemsControl.

Lý do tại sao tôi đang sử dụng một ItemsControl là DataTemplate phức tạp hơn nhiều trong ứng dụng mà tôi đang làm việc: Mã mẫu được cung cấp chỉ phản ánh vấn đề về kích thước mà tôi có.

Tôi muốn:

• ItemsControl được ảo hóa vì có nhiều mặt hàng để hiển thị

• kích thước của nó để mở rộng để chứa cha mẹ một cách tự động (Grid)

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

Các mã sau là:

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

Như tôi đã buộc các chiều cao ScrollViewer đến 400px, ItemsControl ảo hóa hoạt động như tôi mong đợi: Các ItemsControl hiển thị danh sách rất nhanh chóng, bất kể có bao nhiêu mục nó chứa.

Tuy nhiên, nếu tôi xóa Chiều cao = "400px", danh sách sẽ mở rộng chiều cao của nó để hiển thị toàn bộ danh sách, bất kể chiều cao vùng chứa gốc của nó. Tệ hơn nữa: nó xuất hiện đằng sau vùng chứa của nó.

Đưa trình xem scroller quanh ItemsControl cung cấp kết quả hình ảnh dự kiến, nhưng ảo hóa sẽ biến mất và danh sách mất quá nhiều thời gian để hiển thị.

Làm cách nào để có thể đạt được cả chiều cao tự động mở rộng và ảo hóa của ItemsControl?

Answer 1

Sự cố nằm trong ItemsControl.Template: bạn sử dụng StackPanel ở đó, cung cấp cho con của mình nhiều độ cao tùy ý. Thay thế nó thành một cái gì đó như

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

Và nó sẽ hoạt động tốt.

Hy vọng điều đó sẽ hữu ích.