Implementing SfAvatarView (WPF)

When to Use This Skill

Use this skill when the user needs to:

• Display a user profile picture, initials, or avatar character
• Show text initials (single or double character) with a colored background
• Use pre-built avatar characters (Avatar1–Avatar25)
• Build a group avatar view from a data collection
• Customize avatar shape (Circle, Square, Custom) and size
• Apply borders, backgrounds, gradients, or font styling to an avatar
• Attach a badge (status indicator) to an avatar

Component: SfAvatarView Assembly: Syncfusion.Shared.WPF XAML Namespace: xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

---

Component Overview

SfAvatarView displays a user avatar in one of five content modes:

ContentType	What it Shows
Default	Built-in Avatar1 character, no setup needed
Initials	Text initials extracted from AvatarName
CustomImage	User-supplied image via ImageSource
AvatarCharacter	One of 25 pre-built character images
Group	Multiple avatars from a bound collection

Shape is controlled by AvatarShape (Circle / Square / Custom). Size by AvatarSize (ExtraSmall → ExtraLarge).

---

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package and assembly setup
• XAML namespace declaration
• Minimal working example (Default type)
• ImageSource quick start
• Required CSS/theme imports

Content Types

📄 Read: references/content-types.md

• Default — zero-config avatar character
• Initials — AvatarName + InitialsType (Single/Double)
• CustomImage — ImageSource with pack:// URI
• AvatarCharacter — Avatar1–Avatar25 enum
• Group view — GroupSource + member path properties + ViewModel pattern
• ContentTemplate — fully custom DataTemplate rendering

Visual Styles

📄 Read: references/visual-styles.md

• AvatarShape: Circle (default), Square, Custom
• AvatarSize: ExtraSmall, Small, Medium, Large, ExtraLarge
• Custom shape — explicit Height, Width, CornerRadius, FontSize
• Style reuse via WPF ResourceDictionary

Customization

📄 Read: references/customization.md

• BorderBrush and BorderThickness
• Background — solid color
• Gradient background — LinearGradientBrush / RadialGradientBrush
• FontFamily, FontSize, Foreground for initials text

Badge Integration

📄 Read: references/badge-integration.md

• Attaching SfBadge to SfAvatarView
• Positioning badge with HorizontalPosition / VerticalPosition
• Status indicator pattern (online/offline dot)

---

Quick Start Example

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

Display initials:

<syncfusion:SfAvatarView ContentType="Initials"
                         AvatarName="Alex"
                         InitialsType="DoubleCharacter"
                         AvatarShape="Circle"
                         AvatarSize="Large" />

Display a custom image:

<syncfusion:SfAvatarView ContentType="CustomImage"
                         AvatarShape="Circle"
                         AvatarSize="Large"
                         ImageSource="pack://application:,,,/Assets/profile.png" />

Display a pre-built character:

<syncfusion:SfAvatarView ContentType="AvatarCharacter"
                         AvatarCharacter="Avatar5"
                         AvatarShape="Circle"
                         AvatarSize="Medium" />

---

Common Patterns

Pattern 1 — Pick content type based on available data:

• Have a profile image URL → ContentType="CustomImage" + ImageSource
• Have a name string → ContentType="Initials" + AvatarName
• Need a placeholder → ContentType="AvatarCharacter" + choose Avatar1–Avatar25
• Need fully custom UI inside the avatar → ContentTemplate with DataTemplate

Pattern 2 — Group avatar from a list:

• Bind a collection → ContentType="Group" + GroupSource
• Map member paths: InitialsMemberPath, ImageSourceMemberPath, BackgroundColorMemberPath, InitialsColorMemberPath

Pattern 3 — Shape + size selection:

• Profile card with circular avatar → AvatarShape="Circle" + AvatarSize enum
• Square tile avatar → AvatarShape="Square" + AvatarSize enum
• Fully custom dimensions → AvatarShape="Custom" + explicit Height/Width/CornerRadius

---

Key Props Reference

Property	Type	Purpose
ContentType	AvatarContentType	Selects rendering mode
AvatarName	string	Source for initials extraction
InitialsType	AvatarInitialsType	Single or double character initials
ImageSource	ImageSource	Image URI for CustomImage mode
AvatarCharacter	AvatarCharacter	Pre-built character enum (Avatar1–Avatar25)
AvatarShape	AvatarShape	Circle / Square / Custom
AvatarSize	AvatarSize	ExtraSmall / Small / Medium / Large / ExtraLarge
GroupSource	IEnumerable	Data collection for Group mode
ContentTemplate	DataTemplate	Custom template for avatar content
BorderBrush	Brush	Border color
BorderThickness	Thickness	Border width
Background	Brush	Background fill (solid or gradient)
CornerRadius	CornerRadius	Rounding for Custom shape