syncfusion-wpf-avatar-view

SfAvatarView の実装（WPF）

このスキルを使用する場面

次のことが必要な場合に、このスキルを使用します。

• ユーザープロフィール画像、イニシャル、またはアバターキャラクターを表示する
• 色付きの背景にテキストのイニシャル（1文字または2文字）を表示する
• 組み込みのアバターキャラクター（Avatar1～Avatar25）を使用する
• データコレクションからグループアバタービューを作成する
• アバターの形状（Circle、Square、Custom）とサイズをカスタマイズする
• アバターに境界線、背景、グラデーション、またはフォントスタイルを適用する
• アバターにバッジ（ステータスインジケーター）を付ける

コンポーネント： SfAvatarView アセンブリ： Syncfusion.Shared.WPF XAML 名前空間： xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

---

コンポーネントの概要

SfAvatarView は、次の5つのコンテンツモードのいずれかでユーザーアバターを表示します。

ContentType	表示内容
Default	組み込みの Avatar1 キャラクター。設定は不要です
Initials	AvatarName から抽出したテキストのイニシャル
CustomImage	ImageSource を介してユーザーが指定した画像
AvatarCharacter	25種類の組み込みキャラクター画像のいずれか
Group	バインドされたコレクションの複数のアバター

形状は AvatarShape（Circle / Square / Custom）で制御します。サイズは AvatarSize（ExtraSmall → ExtraLarge）で制御します。

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• NuGet パッケージとアセンブリの設定
• XAML 名前空間の宣言
• 最小限の動作例（Default タイプ）
• ImageSource のクイックスタート
• 必要な CSS／テーマのインポート

コンテンツの種類

📄 参照先： references/content-types.md

• Default — 設定不要のアバターキャラクター
• Initials — AvatarName + InitialsType（Single/Double）
• CustomImage — pack:// URI を使用する ImageSource
• AvatarCharacter — Avatar1～Avatar25 の列挙型
• Group ビュー — GroupSource + メンバーのパスプロパティ + ViewModel パターン
• ContentTemplate — 完全にカスタマイズ可能な DataTemplate のレンダリング

ビジュアルスタイル

📄 参照先： references/visual-styles.md

• AvatarShape：Circle（既定）、Square、Custom
• AvatarSize：ExtraSmall、Small、Medium、Large、ExtraLarge
• カスタム形状 — 明示的な Height、Width、CornerRadius、FontSize
• WPF ResourceDictionary を使用したスタイルの再利用

カスタマイズ

📄 参照先： references/customization.md

• BorderBrush と BorderThickness
• Background — 単色
• グラデーション背景 — LinearGradientBrush / RadialGradientBrush
• イニシャルテキストの FontFamily、FontSize、Foreground

バッジの統合

📄 参照先： references/badge-integration.md

• SfBadge を SfAvatarView に取り付ける
• HorizontalPosition / VerticalPosition でバッジを配置する
• ステータスインジケーターのパターン（オンライン／オフラインのドット）

---

クイックスタートの例

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

イニシャルを表示する：

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

カスタム画像を表示する：

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

組み込みのキャラクターを表示する：

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

---

よくあるパターン

パターン 1 — 利用可能なデータに基づいてコンテンツの種類を選択する：

• プロフィール画像の URL がある → ContentType="CustomImage" + ImageSource
• 名前の文字列がある → ContentType="Initials" + AvatarName
• プレースホルダーが必要 → ContentType="AvatarCharacter" + Avatar1～Avatar25 を選択
• アバター内に完全にカスタムな UI が必要 → DataTemplate を使用した ContentTemplate

パターン 2 — リストからグループアバターを作成する：

• コレクションをバインドする → ContentType="Group" + GroupSource
• メンバーのパスをマッピングする：InitialsMemberPath、ImageSourceMemberPath、BackgroundColorMemberPath、InitialsColorMemberPath

パターン 3 — 形状とサイズを選択する：

• 円形アバターを使用したプロフィールカード → AvatarShape="Circle" + AvatarSize 列挙型
• 正方形タイルのアバター → AvatarShape="Square" + AvatarSize 列挙型
• 寸法を完全にカスタマイズする → AvatarShape="Custom" + 明示的な Height/Width/CornerRadius

---

主要なプロパティのリファレンス

プロパティ	型	用途
ContentType	AvatarContentType	描画モードを選択します
AvatarName	string	イニシャルを抽出する元となる名前です
InitialsType	AvatarInitialsType	1文字または2文字のイニシャルを指定します
ImageSource	ImageSource	CustomImage モードで使用する画像 URI です
AvatarCharacter	AvatarCharacter	事前定義されたキャラクターの列挙型（Avatar1～Avatar25）です
AvatarShape	AvatarShape	円形／正方形／カスタムを指定します
AvatarSize	AvatarSize	特小／小／中／大／特大を指定します
GroupSource	IEnumerable	Group モードで使用するデータコレクションです
ContentTemplate	DataTemplate	アバターコンテンツ用のカスタムテンプレートです
BorderBrush	Brush	境界線の色です
BorderThickness	Thickness	境界線の幅です
Background	Brush	背景の塗りつぶし（単色またはグラデーション）です
CornerRadius	CornerRadius	カスタム形状の角の丸みです