Empty
An empty state: media, a title, a description and actions, centered.
ExampleInteractive
<uikit:EmptyState Classes="icon-media" Title="No projects yet" Description="Create your first project to get started."
Width="420" HorizontalAlignment="Left">
<uikit:EmptyState.Media>
<PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
</uikit:EmptyState.Media>
<uikit:EmptyState.Actions>
<StackPanel Orientation="Horizontal" Spacing="8">
<Button Classes="primary" Content="Create project" />
<Button Classes="outline" Content="Import project" />
</StackPanel>
</uikit:EmptyState.Actions>
</uikit:EmptyState>Usage
uikit:EmptyState centers a column with 24px padding and 16px gaps, on a radius of 12: the header (Media, then Title and Description 8px apart, at most 384px wide), the Actions, then its content. The title is 14px medium and the description muted 14px; both center and wrap. Media takes any control (an icon, an image, an avatar), and the icon-media class frames it in a 32px muted square. Every part is optional. The control is named EmptyState, as "Empty" says little in an Avalonia app.
Examples
A 40px icon as plain media, a bordered state with icon-media, a title alone, and content below the actions.
<WrapPanel ItemSpacing="16" LineSpacing="16">
<!-- A plain media: any control, here a 40px icon. -->
<uikit:EmptyState Title="Inbox zero" Description="You have read every message." Width="300">
<uikit:EmptyState.Media>
<PathIcon Data="{StaticResource UIKit.Icon.Inbox}" Width="40" Height="40" />
</uikit:EmptyState.Media>
</uikit:EmptyState>
<!-- Bordered, with the icon in its muted square. -->
<uikit:EmptyState Classes="icon-media" Title="No results" Description="Try a different search term." Width="300"
BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1">
<uikit:EmptyState.Media>
<PathIcon Data="{StaticResource UIKit.Icon.Search}" />
</uikit:EmptyState.Media>
</uikit:EmptyState>
<!-- A title alone. -->
<uikit:EmptyState Title="Nothing here" Width="300" />
<!-- Content below the actions. -->
<uikit:EmptyState Classes="icon-media" Title="No files" Width="300">
<uikit:EmptyState.Media>
<PathIcon Data="{StaticResource UIKit.Icon.File}" />
</uikit:EmptyState.Media>
<uikit:EmptyState.Actions>
<Button Classes="outline" Content="Upload" />
</uikit:EmptyState.Actions>
<TextBlock Text="Drop files here, or upload them." Foreground="{DynamicResource UIKit.MutedForeground}" />
</uikit:EmptyState>
</WrapPanel>Not covered
- The dashed frame around the empty state; Avalonia's
Borderdraws no dashes.