Description List
Labels and values in a grid, with spans and separators.
<uikit:DescriptionList Width="600" HorizontalAlignment="Left">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
<uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
<uikit:DescriptionItem Label="Status" Value="Stable" />
<uikit:DescriptionSeparator />
<uikit:DescriptionItem Label="Author" Value="supermomonga" />
</uikit:DescriptionList>Usage
uikit:DescriptionList lays out uikit:DescriptionItems, each a Label and a Value (the value is the content, so it can be a control), in rows of Columns. An item takes Span columns; a new row starts when the next span would pass the columns, and the items of a row that is not full grow to share it. A uikit:DescriptionSeparator is an 8px band across a whole row. The list is bordered by default: a 1px border with the theme radius, a rule between rows, and muted 14px labels on the label fill beside 16px values.
| Property or class | Effect |
|---|---|
Columns | Items per row, 1 to 10 (3 by default). |
Orientation | Horizontal (the default) puts labels beside their values, Vertical above them. |
IsBordered | False drops the border, the rules, the label fill and the cell padding. |
LabelWidth | The width of a label beside its value (120 by default). |
small, large | Cell padding 4×2 or 12×6 instead of 8×4; rows without borders 2 or 8 apart instead of 4. |
Examples
Orientation="Vertical" puts each label above its value.
<uikit:DescriptionList Orientation="Vertical" Width="600" HorizontalAlignment="Left">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
<uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
<uikit:DescriptionItem Label="Status" Value="Stable" />
</uikit:DescriptionList>IsBordered="False" for a plain grid without borders, fills or padding, in either orientation.
<StackPanel Spacing="24" HorizontalAlignment="Left">
<uikit:DescriptionList IsBordered="False" Width="600">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
<uikit:DescriptionItem Label="Platform" Value="macOS, Windows, Linux" Span="2" />
<uikit:DescriptionItem Label="Status" Value="Stable" />
</uikit:DescriptionList>
<uikit:DescriptionList IsBordered="False" Orientation="Vertical" Width="600">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
</uikit:DescriptionList>
</StackPanel>The size classes change the padding; the large list here has two columns and 100px labels.
<StackPanel Spacing="24" HorizontalAlignment="Left">
<uikit:DescriptionList Classes="small" Width="600">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
</uikit:DescriptionList>
<uikit:DescriptionList Classes="large" Columns="2" LabelWidth="100" Width="600">
<uikit:DescriptionItem Label="Name" Value="Avalonia UIKit" />
<uikit:DescriptionItem Label="Version" Value="0.1.0" />
<uikit:DescriptionItem Label="License" Value="MIT" />
</uikit:DescriptionList>
</StackPanel>Not covered
- Nothing: the control covers the component.