ItemsControl, VirtualizingStackPanel y ScrollViewer height

Question

Quiero mostrar una lista importante de elementos utilizando un ItemsControl.

La razón por la que estoy usando ItemsControl es que DataTemplate es mucho más complejo en la aplicación en la que estoy trabajando: el código de muestra proporcionado solo refleja el problema de tamaño que tengo.

me gusta:

• ItemsControl a virtualizar porque hay muchos elementos para mostrar

• su tamaño para ampliar a su contenedor principal de forma automática (la rejilla)

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

El código subyacente es:

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

Como fuerzo la altura ScrollViewer a 400 píxeles, ItemsControl virtualización funciona como espero: El ItemsControl muestra la lista muy rápidamente, independientemente del número de artículos que contiene.

Sin embargo, si elimino Height = "400px", la lista aumentará su altura para mostrar toda la lista, independientemente de la altura del contenedor principal. Peor aún: aparece detrás de su contenedor.

Al colocar un scrollviewer alrededor de ItemsControl se obtiene el resultado visual esperado, pero la virtualización desaparece y la lista tarda demasiado tiempo en mostrarse.

¿Cómo puedo lograr la expansión de altura automática y la virtualización de mis ItemsControl?

Answer 1

El problema está en ItemsControl.Template: utiliza StackPanel allí, lo que le da a sus hijos la altura que desean. Reemplácelo por algo como

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

Y debería funcionar bien.

Espero que ayude.