GitHub

Avatar

PreviousNext

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

New control
InteractiveAvatar demo
<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Left">
  <gpui:Avatar UserName="Jason Lee" />
  <gpui:Avatar UserName="Alice" />
  <gpui:Avatar UserName="Bob" />
  <gpui:Avatar UserName="Carol" />
  <gpui:Avatar />
  <gpui:Avatar UserName="Jason Lee" Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
</StackPanel>

Usage

gpui: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 GPUI Kit's twelve hues, picked from the initials as GPUI picks it; 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.

gpui: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.

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

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

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

Not covered

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