syncfusion-maui-avatar-view

Q: How do I install syncfusion-maui-avatar-view?

Run npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-avatar-view in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-maui-avatar-view/ (personal) or .claude/skills/syncfusion-maui-avatar-view/ (project).

by syncfusionMedia & Creative

Implements Syncfusion .NET MAUI Avatar View (SfAvatarView) for displaying user profile pictures, initials, or group avatars. Use when working with avatar views, profile pictures, user images, initials display, profile icons, or contact images. Ideal for implementing user profile displays, contact lists, chat interfaces, or social feeds.

Installs: 210
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-avatar-view

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-maui-avatar-view automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing .NET MAUI Avatar Views

The Syncfusion .NET MAUI Avatar View (SfAvatarView) provides a graphical representation of user images with support for custom images, initials, preset avatars, and group views. It offers extensive customization including shapes, colors, sizes, and badge integration.

When to Use This Skill

Use this skill when the user needs to:

Display user profile pictures in applications (social apps, contact lists, chat interfaces)
Show user initials when images aren't available (single or double character)
Create group avatars displaying multiple users (up to 3 images/initials)
Add badges to avatars for status indicators or notifications
Implement circular or square profile images with customizable sizes
Display preset avatar characters from built-in vector images
Customize avatar appearance with colors, gradients, strokes, and sizing
Build user identification UI for any MAUI application requiring visual user representation

Component Overview

SfAvatarView is a versatile control for displaying user avatars with five content types:

Default - Built-in vector image
Initials - Text-based avatars (single/double character)
Custom - User-provided images
AvatarCharacter - Preset vector images
Group - Multiple users in one view (up to 3)

Key capabilities:

Multiple shapes (Circle, Square, Custom)
Five size presets (ExtraSmall to ExtraLarge)
Automatic color generation (Dark/Light backgrounds)
Badge integration for status/notifications
Gradient backgrounds and stroke customization
Font and aspect ratio controls
MVVM-friendly with data binding support

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When you need to:

Install and configure the Avatar View component
Register Syncfusion handlers in MauiProgram.cs
Create your first basic avatar view
Add custom images to the avatar
Set up initial XAML and C# implementation

Content Types and Display Modes

📄 Read: references/content-types.md

When you need to:

Choose between Default, Initials, Custom, AvatarCharacter, or Group content types
Display single or double character initials
Set up preset avatar characters
Create group views with multiple images or initials
Mix images and initials in group views
Customize initials color or background colors in groups
Understand when to use each content type

Customization and Styling

📄 Read: references/customization.md

When you need to:

Control image aspect ratios (AspectFit, AspectFill, Fill, Center)
Customize colors (stroke, background, automatic dark/light)
Apply gradient backgrounds
Set sizing properties (width, height, corner radius)
Adjust stroke thickness and content padding
Configure font properties (size, family, attributes, auto-scaling)
Create custom styled avatars beyond built-in presets

Visual Styles and Sizes

📄 Read: references/visual-styles.md

When you need to:

Use built-in circle sizes (ExtraSmall to ExtraLarge)
Use built-in square sizes (ExtraSmall to ExtraLarge)
Apply consistent visual styles across multiple avatars
Understand AvatarShape and AvatarSize properties
Create uniform avatar displays with predefined styles

BadgeView Integration

📄 Read: references/badgeview-integration.md

When you need to:

Add notification badges to avatars
Display status indicators (online, away, busy)
Position badges on avatars (corners, custom offsets)
Animate badge appearances
Integrate SfBadgeView with SfAvatarView
Show unread message counts or status icons

FAQ

What does the syncfusion-maui-avatar-view skill do?

How do I install syncfusion-maui-avatar-view?

Run npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-avatar-view in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-maui-avatar-view/ (personal) or .claude/skills/syncfusion-maui-avatar-view/ (project).

Which AI agents can use syncfusion-maui-avatar-view?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-maui-avatar-view safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-maui-avatar-view?

It is published by syncfusion in syncfusion/maui-ui-components-skills. It has 210 recorded installs.