Skip to content
Browse documentation

Tree

A virtualized tree for any number of items, as uikit:Tree.

ExampleInteractive
Tree — Avalonia UIKit
Live demo unavailable
<uikit:Tree Width="240" Height="240" HorizontalAlignment="Left">
  <uikit:TreeItem Label="src" IsExpanded="True">
    <uikit:TreeItem Label="components" IsExpanded="True">
      <uikit:TreeItem Label="button.rs" />
      <uikit:TreeItem Label="tree.rs" />
    </uikit:TreeItem>
    <uikit:TreeItem Label="lib.rs" />
  </uikit:TreeItem>
  <uikit:TreeItem Label="assets" IsDisabled="True">
    <uikit:TreeItem Label="logo.svg" />
  </uikit:TreeItem>
  <uikit:TreeItem Label="Cargo.toml" />
</uikit:Tree>

Usage

uikit:Tree lays the visible part of a tree out as one list of rows and virtualizes it, so a tree of any size stays fast. Its rows have the look of the Tree. Give it uikit:TreeItems (Label, child items, IsExpanded, IsDisabled) as children or in ItemsSource. For your own objects, ChildrenSelector (or a TreeDataTemplate in ItemTemplate) gives an item's children, DisabledSelector disables items, and Expand, Collapse and IsItemExpanded set and read what is open. ItemTemplate draws the content after the icon.

  • A press selects a row and opens or closes a folder. Up and Down move the selection and wrap at the ends; Right opens and Left closes the selected folder, and Enter toggles it. SelectionChanged, Expanded and Collapsed report the changes.
  • A right press marks the row with a frame in the selection color without selecting it (RightClickedItem).
  • RevealItem(item, strategy) opens the item's folders and scrolls it into view; setting SelectedItem to a hidden item opens its folders too. ScrollToItem(index, strategy) scrolls to a row of Entries.

Examples

Fifty packages of two hundred files each: only the rows in view are realized.

VirtualizedInteractive
Live demo unavailable
<uikit:Tree Width="280" Height="300" HorizontalAlignment="Left"
            ItemsSource="{x:Static local:TreeSamples.Workspace}" />