Virtual List

A virtualized list with the List's rows, as ListBox over a VirtualizingStackPanel.

<ListBox Width="240" Height="240" HorizontalAlignment="Left"
         ItemsSource="{x:Static local:VirtualRow.Samples}">
  <ListBox.ItemTemplate>
    <DataTemplate x:DataType="local:VirtualRow">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock Text="{Binding Number}" Width="48" Foreground="{DynamicResource UIKit.MutedForeground}" />
        <TextBlock Text="{Binding Title}" />
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

#Usage

ListBox virtualizes with a VirtualizingStackPanel by default, and the theme keeps that panel, so the rows and the overlay scrollbar of the List apply to long lists as they are. Bind ItemsSource and give the row a DataTemplate in ItemTemplate; the demo lists ten thousand records, and only the rows in view are realized. A virtual list looks the same as the List, so there is no class to add.

For sections, a search field or loading more at the end, use uikit:ListView; its rows share one height.

#Scroll to an item

ScrollToItem, an extension method for ListBox and any other ItemsControl (namespace AvaloniaUIKit), scrolls to an item by its index, also one the panel has not realized yet. ScrollStrategy.Center puts the item in the middle of the list, as far as the list allows; the other strategies bring an item out of view to the nearer edge and leave an item in view where it is. A call made before the list is laid out waits for the layout.

<StackPanel Spacing="12" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="8">
    <Button Classes="outline small" Content="Top" Click="OnTop" />
    <Button Classes="outline small" Content="Row 50" Click="OnRow50" />
    <Button Classes="outline small" Content="Center 25" Click="OnCenter25" />
    <Button Classes="outline small" Content="Bottom" Click="OnBottom" />
  </StackPanel>
  <ListBox Name="Rows" Width="320" Height="240" HorizontalAlignment="Left"
           ItemsSource="{x:Static local:VirtualRow.Samples}">
    <ListBox.ItemTemplate>
      <DataTemplate x:DataType="local:VirtualRow">
        <StackPanel Orientation="Horizontal" Spacing="8">
          <TextBlock Text="{Binding Number}" Width="48" Foreground="{DynamicResource UIKit.MutedForeground}" />
          <TextBlock Text="{Binding Title}" />
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</StackPanel>