ItemsControl, VirtualizingStackPanel y altura ScrollViewer

Question

Quiero mostrar una lista importante de elementos mediante un ItemsControl.

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

Me gustaría:

• ItemsControl a virtualizar porque hay muchos elementos para mostrar

• su tamaño se expanda a su contenedor principal de forma automática (el 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>
  

El detrás de código 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 puedo forzar la altura ScrollViewer a 400 píxeles, ItemsControl virtualización obras que yo esperan: ItemsControl muestra la lista muy rápidamente, independientemente del número de artículos que contiene

.

Sin embargo, si quito height = "400px", la lista se ampliará su altura para mostrar toda la lista, sin tener en cuenta su altura contenedor primario. Peor aún:. Aparece detrás su contenedor

Poner una ScrollViewer todo el ItemsControl da el resultado visual era de esperar, pero la virtualización se va y la lista toma demasiado tiempo para mostrar.

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

Answer 1

El problema está en el ItemsControl.Template: utiliza StackPanel allí, lo que da a sus hijos tanta altura como ellos quieren. Reemplazarlo con algo así 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 que debería funcionar bien.

Espero que ayuda.