Table
以命名主题呈现的朴素表格,基于 TableView。
示例可交互
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>