Skip to content
Avalonia UIKit
GitHub

Search documentation

Find components, guides and examples.

Esc
↑↓Navigate↵OpenEscClose

Theme

Choose the site's color theme.

ThemeT

System

Light

Dark

↑↓Preview↵ApplyEscCancel
Browse documentation

Avatar

New control

A circular avatar with an image, initials or a placeholder, and a group that overlaps them.

ExampleInteractive
Avatar — Avalonia UIKit
Avatar demo
<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Left">
  <uikit:Avatar UserName="Jason Lee" />
  <uikit:Avatar UserName="Alice" />
  <uikit:Avatar UserName="Bob" />
  <uikit:Avatar UserName="Carol" />
  <uikit:Avatar />
  <uikit:Avatar UserName="Jason Lee" Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
</StackPanel>

Usage

uikit:Avatar draws a circle on the secondary color with a 1px ring. Inside it: the image (Source, covering the circle) if there is one; else the initials of UserName (the first letters of its first two words) on one of twelve hues, picked from the initials; else the Placeholder icon, the user icon by default. Sizes: xsmall (16px), small (24px), the default (48px) and large (80px); any other Width and Height stays a circle.

uikit:AvatarGroup overlaps its avatars by 30% of their size, the first on top, and shows at most Limit of them (3 by default); with ShowsEllipsis="True" a "⋯" avatar follows a cut group. The group's size class is given to every avatar in it.

Examples

The four sizes with initials and with the placeholder.

SizesInteractive
Avatar demo: Sizes
<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Left">
  <uikit:Avatar Classes="xsmall" UserName="Jason Lee" />
  <uikit:Avatar Classes="small" UserName="Jason Lee" />
  <uikit:Avatar UserName="Jason Lee" />
  <uikit:Avatar Classes="large" UserName="Jason Lee" />
  <uikit:Avatar Classes="small" />
  <uikit:Avatar />
  <uikit:Avatar Classes="large" />
</StackPanel>

A small group, a group of five cut to Limit="3", and the same with ShowsEllipsis="True".

GroupsInteractive
Avatar demo: Groups
<StackPanel Orientation="Horizontal" Spacing="24" HorizontalAlignment="Left">
  <uikit:AvatarGroup Classes="small">
    <uikit:Avatar UserName="Alice" />
    <uikit:Avatar UserName="Bob" />
    <uikit:Avatar UserName="Carol" />
  </uikit:AvatarGroup>
  <uikit:AvatarGroup Limit="3">
    <uikit:Avatar UserName="Alice" />
    <uikit:Avatar UserName="Bob" />
    <uikit:Avatar UserName="Carol" />
    <uikit:Avatar UserName="Dave" />
    <uikit:Avatar UserName="Erin" />
  </uikit:AvatarGroup>
  <uikit:AvatarGroup Limit="3" ShowsEllipsis="True">
    <uikit:Avatar UserName="Alice" />
    <uikit:Avatar UserName="Bob" />
    <uikit:Avatar UserName="Carol" />
    <uikit:Avatar UserName="Dave" />
    <uikit:Avatar UserName="Erin" />
  </uikit:AvatarGroup>
</StackPanel>

Not covered

  • Fetching the image from a URL (give the avatar a loaded bitmap).