跳到正文
浏览文档

Virtual List

使用 List 行外观的虚拟化列表,即 VirtualizingStackPanel 上的 ListBox。

示例可交互
Virtual List — Avalonia UIKit
Live demo unavailable
<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>

用法

ListBox 默认借助 VirtualizingStackPanel 进行虚拟化,主题保留该面板,因此 列表 的行和悬浮滚动条可直接用于长列表。绑定 ItemsSource,并在 ItemTemplate 中为行提供 DataTemplate;演示列出了 1 万条记录,只有视野内的行才会创建实例。虚拟列表的外观与 List 相同,因此无需添加任何样式类。

若需要分组、搜索框或末尾加载更多,请使用 uikit:ListView;它的各行高度一致。

滚动到指定条目

ScrollToItem 是 ListBox 及其他任意 ItemsControl 的扩展方法(命名空间 AvaloniaUIKit),可按索引滚动到某个条目,也包括面板尚未创建的条目。ScrollStrategy.Center 在列表允许的范围内把条目置于中间;其他策略把视野外的条目滚动到较近的一端,而对已在视野内的条目不作移动。在列表完成布局之前发起的调用会等待布局完成。

滚动到指定条目可交互
Live demo unavailable
<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>