Table
A plain table, as a TableView with a named theme.
<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>Usage
TableView Theme="{StaticResource UIKitTable}" gives a plain table: a header band, rows sized by their content with a rule between them, 14px text at every size, cells centered in their rows, and no hover or selection colors. The default TableView theme is the Data Table; both share the cell and header themes. The table has no border of its own: BorderThickness="1" CornerRadius="5.5" makes a bordered one. Without rows it shows the header alone.
Columns are TableViewColumns with a Header and a Binding. Width fixes a column in pixels, and HorizontalContentAlignment="Right" right-aligns a column's cells.
| Class | Effect |
|---|---|
stripe | Every other row, starting with the second, on the even color. |
xsmall, small, large | Cell padding 4×2, 6×3 and 12×8 instead of 8×4; the text stays 14px. |
uikit:Table has the same look and is written out row by row, with cells that span columns, a footer and a caption.
Examples
The default look: no border, no stripes, and the first and last columns fixed at 100px.
<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>The size classes change only the padding of the cells.
<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>