Tree

带文件夹与文件图标的树行，即 TreeView。

示例可交互

Tree — Avalonia UIKit

Live demo unavailable

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

用法

主题覆盖 TreeView 与 TreeViewItem，采用列表样式的行：16px 文字、4px 垂直内边距，每级缩进为 12px 加 16px，标签前 8px 处有 16px 的文件夹图标（展开时为打开状态）或文件图标。文件夹图标就是展开控件；没有子项的条目使用文件图标。悬停行取列表的悬停色，选中行取其激活色，禁用条目为弱化文字。树本身没有装饰，滚动条悬浮在行之上。可用 Header、IsExpanded 和 IsSelected 嵌套 TreeViewItem，或照常绑定 ItemsSource。

对于任意规模的树，请使用虚拟化的 uikit:Tree。

示例

若要带边框的树，请为 TreeView 设置 Border、Padding 与 CornerRadius，并用在 TreeViewItem 上设置 CornerRadius 的 Style 让行也带上圆角。

圆角可交互

Live demo unavailable

<TreeView Width="240" Height="240" HorizontalAlignment="Left"
          Padding="4" BorderThickness="1" BorderBrush="{DynamicResource UIKit.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>

Tree

#用法

#示例

用法

示例