List

List rows with hover, selection and the overlay scrollbar, as ListBox.

ExampleInteractive

List — Avalonia UIKit

<ListBox Width="240" Height="200" HorizontalAlignment="Left" SelectedIndex="1">
  <ListBoxItem Content="Apple" />
  <ListBoxItem Content="Banana" />
  <ListBoxItem Content="Cherry" />
  <ListBoxItem Content="Grape" IsEnabled="False" />
  <ListBoxItem Content="Mango" />
  <ListBoxItem Content="Orange" />
  <ListBoxItem Content="Peach" />
  <ListBoxItem Content="Strawberry" />
</ListBox>

View code

#Usage

The theme covers ListBox and ListBoxItem: 34px rows of 16px text with 12×4 padding, square and full width, with no chrome of the list's own. A hovered row takes the list hover color (UIKit.ListHover), the selected row the active color (UIKit.ListActive; hovering adds nothing), and a disabled item shows muted text; the scrollbar overlays the rows, from the ScrollViewer theme. Put a row's content in the ItemTemplate. The items panel stays virtualizing, so a long list is the same control: see Virtual List.

#Examples

An empty list shows a 48px Inbox icon, centered; there is nothing to add for it.

<ListBox Width="240" Height="120" HorizontalAlignment="Left" />

View code

#Not covered

• The built-in search field.
• Loading more items on scroll.
• Reordering by drag and drop.