Avalonia UI Controls v23.1.3 Maintenance Release

by Avatar Bill Henning (Actipro)
Wednesday, February 7, 2024 at 4:56pm

A new Avalonia UI Controls release is now available the adds several great new controls.

See the related announcement post for the detailed list of enhancements and updates.

Download Buy Now



Avatar controls are used to represent people or objects. They can render a full-size image, a centered glyph, a person's initials, or text.

Empty, initials, and image avatars

When text is provided, initials can automatically be derived. Large text-based content will scale down to try and fit within the circle as needed. A generic "empty" glyph will be displayed when no avatar content is provided.

Solid and soft appearances, showing how different initials derive various color combinations

An avatar is most distinctive when using image-based content, so text-based content can be harder to differentiate. While an avatar's foreground and background can be manually specified, there is built-in logic to automatically select color combinations based on the avatar's content and using either a solid or soft appearance.

Avatar derives from Button and supports the standard button command model and click events.


Use an AvatarGroup to render multiple Avatar controls. Avatars in a group can overlap with each other by a given size percentage, and you can expand the avatars on mouse hover. When the avatars don't fit in the available space, they can overflow to a popup.

An avatar group with an overflow button that when clicked, shows overflowed avatars

Wrap the group in a chromeless button to make an actionable avatar group that executes a task when clicked.


Badges can add contextual information to target elements, or even used on their own. Badges can display small content like text, counts, icons, or can render as a dot.

Various kinds of badges

When a badge adorns an element, it shows and hides using an animated "pop" effect. It can be easily aligned to any anchor position on the target element.


NumericBadge inherits Badge and supports binding to a numeric value, such as a count value. The badge automatically displays when the count increments to a positive number and hides when decrementing to zero.

Badge and NumericBadge adorning elements

The displayed numeric value has overflow support, meaning that a large value can be restricted to only show "99+" for example.


The RingSpinner control renders an animated ring where the two ring segment ends chase each other around the circle.

A couple RingSpinner controls

It is used when some form of processing is occurring to tell the end user that something is happening.

Shared Library


The RingSlice shape renders a portion (or the entire circle) of a ring shape. Its start/end angles, radius, thickness, and other stroke properties can be set.

A circular progress bar

Ring slice shapes can be combined in many interesting ways within UI, primarily used to create progress indicators.

Tags: new, avalonia

Add Comment

Please log in to a validated account to post comments.