跳到正文
浏览文档

Table

以命名主题呈现的朴素表格,基于 TableView。

示例可交互
Table — Avalonia UIKit
Live demo unavailable
<TableView Theme="{StaticResource UIKitTable}" Classes="stripe"
           BorderThickness="1" CornerRadius="5.5"
           Width="400" Height="240" HorizontalAlignment="Left"
           ItemsSource="{x:Static local:Invoice.Samples}">
  <TableView.Columns>
    <TableViewColumn Header="Invoice" Binding="{Binding Id}" />
    <TableViewColumn Header="Status" Binding="{Binding Status}" />
    <TableViewColumn Header="Method" Binding="{Binding Method}" />
    <TableViewColumn Header="Amount" Binding="{Binding Amount}" HorizontalContentAlignment="Right" />
  </TableView.Columns>
</TableView>

用法

TableView Theme="{StaticResource UIKitTable}" 给出一个朴素表格:表头带背景,行高随内容而定,行间有分隔线,各尺寸下文字均为 14px,单元格在行内居中,且没有悬停与选中颜色。默认的 TableView 主题是 数据表格;两者共用单元格与表头主题。表格本身没有边框:设置 BorderThickness="1" CornerRadius="5.5" 可得到带边框的表格。没有行时只显示表头。

列是带 Header 与 Binding 的 TableViewColumn。Width 以像素固定列宽,HorizontalContentAlignment="Right" 让该列的单元格右对齐。

样式类作用
stripe从第二行起,每隔一行使用偶数行颜色。
xsmall、small、large单元格内边距分别为 4×2、6×3 与 12×8,而不是 8×4;文字仍为 14px。

uikit:Table 外观相同,但逐行编写,支持跨列单元格、页脚与标题。

示例

默认外观:无边框、无斑马纹,首列与末列固定为 100px。

基础外观可交互
Live demo unavailable
<TableView Theme="{StaticResource UIKitTable}" Width="400" HorizontalAlignment="Left"
           ItemsSource="{x:Static local:Invoice.Samples}">
  <TableView.Columns>
    <TableViewColumn Header="Invoice" Binding="{Binding Id}" Width="100" />
    <TableViewColumn Header="Method" Binding="{Binding Method}" />
    <TableViewColumn Header="Amount" Binding="{Binding Amount}" Width="100" HorizontalContentAlignment="Right" />
  </TableView.Columns>
</TableView>

尺寸样式类只改变单元格的内边距。

尺寸可交互
Live demo unavailable
<StackPanel Spacing="16" HorizontalAlignment="Left">
  <TableView Theme="{StaticResource UIKitTable}" Classes="small" BorderThickness="1" CornerRadius="5.5"
             Width="400" Height="150" ItemsSource="{x:Static local:Invoice.Samples}">
    <TableView.Columns>
      <TableViewColumn Header="Invoice" Binding="{Binding Id}" />
      <TableViewColumn Header="Method" Binding="{Binding Method}" />
      <TableViewColumn Header="Amount" Binding="{Binding Amount}" HorizontalContentAlignment="Right" />
    </TableView.Columns>
  </TableView>
  <TableView Theme="{StaticResource UIKitTable}" Classes="large" BorderThickness="1" CornerRadius="5.5"
             Width="400" Height="190" ItemsSource="{x:Static local:Invoice.Samples}">
    <TableView.Columns>
      <TableViewColumn Header="Invoice" Binding="{Binding Id}" />
      <TableViewColumn Header="Method" Binding="{Binding Method}" />
      <TableViewColumn Header="Amount" Binding="{Binding Amount}" HorizontalContentAlignment="Right" />
    </TableView.Columns>
  </TableView>
</StackPanel>