Data Table

AvaloniaUIKit.DataGrid

以 Avalonia 的 TableView 呈现的数据表格，或使用 AvaloniaUIKit.DataGrid 包提供的 DataGrid。

示例可交互

Data Table — Avalonia UIKit

Live demo unavailable

<TableView Width="400" Height="240" HorizontalAlignment="Left"
           ItemsSource="{x:Static local:Person.Samples}">
  <TableView.Columns>
    <TableViewColumn Header="Name" Binding="{Binding Name}" Width="120" />
    <TableViewColumn Header="Email" Binding="{Binding Email}" Width="180" />
    <TableViewColumn Header="Amount" Binding="{Binding Amount}" Width="100" HorizontalContentAlignment="Right" />
  </TableView.Columns>
</TableView>

用法

TableView 默认就是数据表格的外观：带主题圆角半径的边框，下方带一条分隔线的表头区，若干固定高度的行且每行下方有一条分隔线，悬停与选中填充，表头边缘的调整手柄，以及覆盖式滚动条。没有行时，主体显示一个空盒子图标。列是带 Header 和 Binding 的 TableViewColumn；为它们指定像素 Width，数字列使用 HorizontalContentAlignment="Right"。普通表格是同一控件配合 Theme="{StaticResource UIKitTable}"：参见表格。

样式类	效果
`stripe`	每隔一行使用偶数行颜色，并在最后一行之下延续空的条纹行。
`borderless`	行的周围既没有边框，也没有填充。
`xsmall`	行高 26px，单元格内边距 4×2，文字 12px。
`small`	行高 30px，单元格内边距 6×3。
`large`	行高 40px，单元格内边距 12×8，文字 16px。

默认为行高 32px、内边距 8×4、文字 14px。

对于 DataGrid（Avalonia.Controls.DataGrid 包），请在 UIKitTheme 之后把 AvaloniaUIKit.DataGrid 包中的 UIKitDataGridTheme 加入应用的样式。该网格呈现同样的外观，并保留 DataGrid 自有的能力：表头中的排序指示器、列宽调整与列重排。对于只用于展示的表格，设置 IsReadOnly="True"（否则点击单元格即进入编辑），并设置 CanUserResizeColumns="True"（默认关闭）；用 CellStyleClasses="text-right" 和右对齐的表头让某一列右对齐。stripe、borderless 与尺寸样式类都相同。Classes="cell-selectable" 选中单元格而不是整行：所选行的当前单元格取选中颜色，并随方向键移动，行本身保持普通外观。HeadersVisibility="All" 会额外增加一列窄行头。

示例

Classes="stripe" 填充每隔一行，并在最后一行之下延续条纹。

条纹可交互

Live demo unavailable

<TableView Classes="stripe" Width="400" Height="240" HorizontalAlignment="Left"
           ItemsSource="{x:Static local:Person.Samples}">
  <TableView.Columns>
    <TableViewColumn Header="Name" Binding="{Binding Name}" Width="120" />
    <TableViewColumn Header="Email" Binding="{Binding Email}" Width="180" />
    <TableViewColumn Header="Amount" Binding="{Binding Amount}" Width="100" HorizontalContentAlignment="Right" />
  </TableView.Columns>
</TableView>

small 与 large 改变行高、单元格内边距，以及（对 large）文字大小。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="16" HorizontalAlignment="Left">
  <TableView Classes="small" Width="400" Height="160" ItemsSource="{x:Static local:Person.Samples}">
    <TableView.Columns>
      <TableViewColumn Header="Name" Binding="{Binding Name}" Width="120" />
      <TableViewColumn Header="Email" Binding="{Binding Email}" Width="180" />
      <TableViewColumn Header="Amount" Binding="{Binding Amount}" Width="100" HorizontalContentAlignment="Right" />
    </TableView.Columns>
  </TableView>
  <TableView Classes="large" Width="400" Height="200" ItemsSource="{x:Static local:Person.Samples}">
    <TableView.Columns>
      <TableViewColumn Header="Name" Binding="{Binding Name}" Width="120" />
      <TableViewColumn Header="Email" Binding="{Binding Email}" Width="180" />
      <TableViewColumn Header="Amount" Binding="{Binding Amount}" Width="100" HorizontalContentAlignment="Right" />
    </TableView.Columns>
  </TableView>
</StackPanel>

DataGrid 配合 UIKitDataGridTheme：只读、可从表头排序、列可调整宽度，金额列通过 CellStyleClasses="text-right" 右对齐。

DataGrid可交互

Live demo unavailable

<DataGrid Width="400" Height="240" HorizontalAlignment="Left"
          ItemsSource="{x:Static local:Person.Samples}"
          IsReadOnly="True" CanUserSortColumns="True" CanUserResizeColumns="True" CanUserReorderColumns="False">
  <DataGrid.Columns>
    <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="120" />
    <DataGridTextColumn Header="Email" Binding="{Binding Email}" Width="180" />
    <DataGridTextColumn Header="Amount" Binding="{Binding Amount}" Width="100" CellStyleClasses="text-right">
      <DataGridTextColumn.Header>
        <TextBlock Text="Amount" HorizontalAlignment="Right" />
      </DataGridTextColumn.Header>
    </DataGridTextColumn>
  </DataGrid.Columns>
</DataGrid>

带 Classes="cell-selectable" 的 DataGrid：点击某个单元格，然后用方向键移动。

单元格选择可交互

Live demo unavailable

<DataGrid Classes="cell-selectable" Width="400" Height="240" HorizontalAlignment="Left"
          ItemsSource="{x:Static local:Person.Samples}"
          IsReadOnly="True" CanUserResizeColumns="True" CanUserReorderColumns="False">
  <DataGrid.Columns>
    <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="120" />
    <DataGridTextColumn Header="Email" Binding="{Binding Email}" Width="180" />
    <DataGridTextColumn Header="Amount" Binding="{Binding Amount}" Width="100" CellStyleClasses="text-right">
      <DataGridTextColumn.Header>
        <TextBlock Text="Amount" HorizontalAlignment="Right" />
      </DataGridTextColumn.Header>
    </DataGridTextColumn>
  </DataGrid.Columns>
</DataGrid>

没有行的表格。

空状态可交互

Live demo unavailable

<TableView Width="400" Height="180" HorizontalAlignment="Left">
  <TableView.Columns>
    <TableViewColumn Header="Name" Width="120" />
    <TableViewColumn Header="Email" Width="180" />
    <TableViewColumn Header="Amount" Width="100" HorizontalContentAlignment="Right" />
  </TableView.Columns>
</TableView>

Data Table

#用法

#示例

用法

示例