syncfusion-wpf-avatar-view

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfAvatarView (WPF)

实现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"

当用户需要以下功能时可使用本技能：

显示用户资料图片、姓名首字母或头像角色
显示带彩色背景的文本首字母（单个或两个字符）
使用预构建的头像角色（Avatar1–Avatar25）
从数据集合构建群组头像视图
自定义头像形状（圆形、方形、自定义）和尺寸
为头像应用边框、背景、渐变或字体样式
为头像附加徽章（状态指示器）

组件：

SfAvatarView

程序集：

Syncfusion.Shared.WPF

XAML命名空间：

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).

SfAvatarView

可通过五种内容模式显示用户头像：

ContentType	显示内容
`Default`	内置Avatar1角色，无需额外设置
`Initials`	从 `AvatarName` 中提取的文本首字母
`CustomImage`	用户通过 `ImageSource` 提供的图片
`AvatarCharacter`	25种预构建角色图片之一
`Group`	来自绑定集合的多个头像

形状由

AvatarShape

（圆形/方形/自定义）控制，尺寸由

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

📄 阅读： references/getting-started.md

NuGet包和程序集设置
XAML命名空间声明
最简运行示例（Default类型）
ImageSource快速入门
所需CSS/主题导入

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

📄 阅读： references/content-types.md

```
Default
```
— 零配置头像角色
```
Initials
```
—
```
AvatarName
```
+
```
InitialsType
```
（单字符/双字符）
```
CustomImage
```
— 带pack:// URI的
```
ImageSource
```
```
AvatarCharacter
```
— Avatar1–Avatar25枚举
```
Group
```
视图 —
```
GroupSource
```
+ 成员路径属性 + ViewModel模式
```
ContentTemplate
```
— 完全自定义的DataTemplate渲染

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

📄 阅读： references/visual-styles.md

```
AvatarShape
```
：圆形（默认）、方形、自定义
```
AvatarSize
```
：ExtraSmall、Small、Medium、Large、ExtraLarge
自定义形状 — 显式设置Height、Width、CornerRadius、FontSize
通过WPF ResourceDictionary复用样式

Customization

自定义设置

📄 Read: references/customization.md

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

📄 阅读： references/customization.md

```
BorderBrush
```
和
```
BorderThickness
```
```
Background
```
— 纯色填充
渐变背景 —
```
LinearGradientBrush
```
/
```
RadialGradientBrush
```
首字母文本的
```
FontFamily
```
、
```
FontSize
```
、
```
Foreground
```

Badge Integration

徽章集成

📄 Read: references/badge-integration.md

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

📄 阅读： references/badge-integration.md

将
```
SfBadge
```
附加到
```
SfAvatarView
```
通过
```
HorizontalPosition
```
/
```
VerticalPosition
```
定位徽章
状态指示器模式（在线/离线圆点）

Quick Start Example

快速入门示例

xml

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

Display initials:

xml

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

Display a custom image:

xml

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

Display a pre-built character:

xml

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

xml

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

显示首字母：

xml

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

显示自定义图片：

xml

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

显示预构建角色：

xml

<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

模式1 — 根据可用数据选择内容类型：

有资料图片URL →
```
ContentType="CustomImage"
```
+
```
ImageSource
```
有名称字符串 →
```
ContentType="Initials"
```
+
```
AvatarName
```
需要占位符 →
```
ContentType="AvatarCharacter"
```
+ 选择Avatar1–Avatar25
需要头像内完全自定义UI → 使用
```
ContentTemplate
```
和
```
DataTemplate
```

模式2 — 从列表生成群组头像：

绑定集合 →
```
ContentType="Group"
```
+
```
GroupSource
```

映射成员路径：

InitialsMemberPath

、

ImageSourceMemberPath

、

BackgroundColorMemberPath

、

InitialsColorMemberPath

模式3 — 形状+尺寸选择：

带圆形头像的资料卡片 →
```
AvatarShape="Circle"
```
+
```
AvatarSize
```
枚举
方形磁贴头像 →
```
AvatarShape="Square"
```
+
```
AvatarSize
```
枚举

完全自定义尺寸 →

AvatarShape="Custom"

+ 显式设置

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

属性	类型	用途
`ContentType`	`AvatarContentType`	选择渲染模式
`AvatarName`	`string`	提取首字母的源数据
`InitialsType`	`AvatarInitialsType`	单字符或双字符首字母
`ImageSource`	`ImageSource`	CustomImage模式下的图片URI
`AvatarCharacter`	`AvatarCharacter`	预构建角色枚举（Avatar1–Avatar25）
`AvatarShape`	`AvatarShape`	圆形/方形/自定义
`AvatarSize`	`AvatarSize`	ExtraSmall/Small/Medium/Large/ExtraLarge
`GroupSource`	`IEnumerable`	Group模式下的数据集合
`ContentTemplate`	`DataTemplate`	头像内容的自定义模板
`BorderBrush`	`Brush`	边框颜色
`BorderThickness`	`Thickness`	边框宽度
`Background`	`Brush`	背景填充（纯色或渐变）
`CornerRadius`	`CornerRadius`	自定义形状的圆角