ListView

带分组、搜索框、加载状态以及确认与取消的列表，即 uikit:ListView。

示例可交互

ListView — Avalonia UIKit

Live demo unavailable

<uikit:ListView Width="280" Height="300" HorizontalAlignment="Left" SelectedItem="Banana">
  <uikit:ListSection Header="Fruits" Footer="3 items">
    <x:String>Apple</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
  </uikit:ListSection>
  <uikit:ListSection Header="Citrus" Footer="3 items">
    <x:String>Lemon</x:String>
    <x:String>Orange</x:String>
    <x:String>Lime</x:String>
  </uikit:ListSection>
  <uikit:ListSection Header="Berries" Footer="2 items">
    <x:String>Strawberry</x:String>
    <x:String>Blueberry</x:String>
  </uikit:ListSection>
</uikit:ListView>

用法

uikit:ListView 把列表做成独立控件，补齐了 ListBox 缺少的能力：分组、搜索框、加载状态以及 List 的选择规则。它的行是 uikit:ListItem，沿用 List 的外观，并置于虚拟化面板中。将条目放入 ItemsSource（或作为子元素），行的内容放入 ItemTemplate。

选择。 单击或按 Enter 会选中一行并触发 Confirmed；按 Cmd（macOS）或 Ctrl 时为次级确认（IsSecondary）。上下方向键移动选择，在两端循环，并跳过页眉和页脚。Esc 清除选择并触发 Cancelled。SelectedItem 与 SelectedIndex（由分组和行构成的 IndexPath）支持双向绑定；IsSelectable="False" 关闭选择但保留悬停效果。
右键。 右键按下会用 1px 的选中色边框标记该行，但不选中它；RightClickedIndex 指出是哪一行，可用于上下文菜单。单击任意行或在列表外按下都会清除该标记。
禁用行。 DisabledSelector 返回某个条目的行是否禁用。
滚动。 ScrollToItem(index, strategy) 在 Center 策略下将行居中；其他策略把视野外的行滚动到较近的一端。第一行会滚动到最顶端。
加载更多。 设置 HasMore 后，滚动到距末尾 LoadMoreThreshold 行（20）以内会触发 LoadMore 并设置 IsLoadingMore；条目添加完成后请清除该标记。
对勾图标。 当行处于 IsConfirmed 时，其 CheckIcon 会显示在行末的 20px 列中；可通过针对 uikit|ListItem 的样式同时设置两者。

uikit:ListSection（Header、Footer 以及条目）用于构成分组，页眉为 14px 弱化文字，页脚为 12px 弱化文字，如演示所示。若要使用自己的对象，SectionItemsSelector 返回某个分组的条目，SectionHeaderTemplate 与 SectionFooterTemplate 绘制其页眉和页脚。没有条目的分组不会显示。

示例

IsSearchable="True" 会在行上方放置一个搜索框。查询词（SearchText）按条目文字或 SearchFilter 过滤条目，并选中第一个；输入过程中上下方向键与 Enter 仍然可用。

搜索可交互

Live demo unavailable

<uikit:ListView Width="280" Height="260" HorizontalAlignment="Left" IsSearchable="True">
  <x:String>Apple</x:String>
  <x:String>Banana</x:String>
  <x:String>Cherry</x:String>
  <x:String>Grape</x:String>
  <x:String>Lemon</x:String>
  <x:String>Mango</x:String>
  <x:String>Orange</x:String>
  <x:String>Peach</x:String>
  <x:String>Pear</x:String>
  <x:String>Plum</x:String>
  <x:String>Kiwi</x:String>
  <x:String>Lime</x:String>
</uikit:ListView>

IsLoading="True" 会以三行骨架屏替代原有行。空列表显示 EmptyContent，或 Inbox 图标。

加载可交互

Live demo unavailable

<uikit:ListView Width="280" Height="200" HorizontalAlignment="Left" IsLoading="True" />

ListView

#用法

#示例

用法

示例