ListView

A list with sections, a search field, loading states and confirm and cancel, as uikit:ListView.

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

#Usage

uikit:ListView is the List as a control of its own, with what a ListBox lacks: sections, a search field, a loading state and the List's selection rules. Its rows are uikit:ListItems with the List's look, in a virtualizing panel. Put the items in ItemsSource (or as children) and the row's content in ItemTemplate.

• Selection. A click or Enter selects a row and raises Confirmed; with Cmd (macOS) or Ctrl the confirm is secondary (IsSecondary). Up and Down move the selection, wrap at the ends and skip headers and footers. Esc clears it and raises Cancelled. SelectedItem and SelectedIndex (an IndexPath of section and row) bind two-way; IsSelectable="False" turns selection off and keeps the hover.
• Right click. A right press marks the row with a 1px frame in the selection color without selecting it; RightClickedIndex tells which, for a context menu. A click on a row or a press outside the list clears the mark.
• Disabled rows. DisabledSelector returns whether an item's row is disabled.
• Scrolling. ScrollToItem(index, strategy) centers the row with Center; any other strategy scrolls a row out of view to the nearer edge. The first row scrolls to the very top.
• Loading more. With HasMore, scrolling within LoadMoreThreshold rows (20) of the end raises LoadMore and sets IsLoadingMore; clear it once the items are added.
• Check icon. A row's CheckIcon shows in a 20px column at its end while the row IsConfirmed; set both with a style on uikit|ListItem.

uikit:ListSections (Header, Footer and items) make sections, with 14px muted headers and 12px muted footers, as in the demo. For your own objects, SectionItemsSelector returns a section's items and SectionHeaderTemplate and SectionFooterTemplate draw its header and footer. A section without items is not shown.

#Examples

IsSearchable="True" puts a search field above the rows. The query (SearchText) filters the items by their text, or by SearchFilter, and selects the first one; Up, Down and Enter work while typing.

<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" shows three skeleton rows instead of the rows. An empty list shows EmptyContent, or the Inbox icon.

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