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:

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

Documentation and Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](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](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](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](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](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