GitHub

Tree

PreviousNext

GPUI Kit's tree rows with folder and file icons, as TreeView.

Partial
InteractiveTree demo
<TreeView Width="240" Height="240" HorizontalAlignment="Left">
  <TreeViewItem Header="src" IsExpanded="True">
    <TreeViewItem Header="components" IsExpanded="True">
      <TreeViewItem Header="button.rs" />
      <TreeViewItem Header="tree.rs" IsSelected="True" />
    </TreeViewItem>
    <TreeViewItem Header="lib.rs" />
  </TreeViewItem>
  <TreeViewItem Header="assets" IsEnabled="False">
    <TreeViewItem Header="logo.svg" />
  </TreeViewItem>
  <TreeViewItem Header="Cargo.toml" />
</TreeView>

Usage

The theme covers TreeView and TreeViewItem with GPUI Kit's list row: 16px text with 4px of vertical padding, 12px plus 16px of indent per level, and a 16px folder (open when expanded) or file icon 8px before the label. The folder icon is the expander; an item without children gets the file icon. A hovered row takes the list's hover color, the selected row its active color, and a disabled item muted text. The tree has no chrome of its own and the scrollbar overlays the rows. Nest TreeViewItems with Header, IsExpanded and IsSelected, or bind ItemsSource as usual.

Examples

For a framed tree, give the TreeView a border, Padding and CornerRadius, and round the rows with a Style that sets CornerRadius on TreeViewItem.

Rounded
InteractiveTree demo: Rounded
<TreeView Width="240" Height="240" HorizontalAlignment="Left"
          Padding="4" BorderThickness="1" BorderBrush="{DynamicResource Gpui.Border}" CornerRadius="5.5">
  <TreeView.Styles>
    <Style Selector="TreeViewItem">
      <Setter Property="CornerRadius" Value="6" />
    </Style>
  </TreeView.Styles>
  <TreeViewItem Header="src" IsExpanded="True">
    <TreeViewItem Header="components" IsExpanded="True" IsSelected="True">
      <TreeViewItem Header="button.rs" />
      <TreeViewItem Header="tree.rs" />
    </TreeViewItem>
    <TreeViewItem Header="lib.rs" />
  </TreeViewItem>
  <TreeViewItem Header="assets">
    <TreeViewItem Header="logo.svg" />
  </TreeViewItem>
  <TreeViewItem Header="Cargo.toml" />
</TreeView>

Not covered

  • GPUI Kit's data model and virtualization; bind ItemsSource as usual.