mcpField
S
syncfusion-maui-avatar-view

syncfusion-maui-avatar-view

github.com/syncfusion開発61211 回インストール2 週間前に更新
リポジトリ

syncfusion-maui-avatar-view について

Syncfusion の .NET MAUI SfAvatarView を実装するためのスキルです。画像、イニシャル、プリセット、グループ表示に加え、外観の調整やバッジ連携を扱います。

主な機能

  1. 015種類のアバターコンテンツ
  2. 02最大3人のグループ表示
  3. 03円形、四角形、カスタム形状
  4. 04サイズ、色、グラデーションの調整
  5. 05BadgeView によるステータス表示
  6. 06MVVM データバインディング

活用シーン

  1. 01プロフィール画像やイニシャルの表示
  2. 02複数ユーザーをまとめて表示
  3. 03ステータスや通知バッジの追加
  4. 04アプリ内のアバター表示の統一

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/syncfusion-maui-avatar-viewを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
badgeview-integration.md
content-types.md
customization.md
getting-started.md
visual-styles.md

詳細

.NET MAUI アバタービューの実装

Syncfusion .NET MAUI アバタービュー（SfAvatarView）は、カスタム画像、イニシャル、プリセットアバター、グループビューに対応し、ユーザー画像をグラフィカルに表示します。形状、色、サイズ、バッジの統合など、幅広いカスタマイズが可能です。

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

次のようなニーズがある場合に、このスキルを使用してください。

  • アプリケーション（ソーシャルアプリ、連絡先リスト、チャットインターフェース）でユーザーのプロフィール画像を表示する
  • 画像がない場合にユーザーのイニシャルを表示する（1文字または2文字）
  • グループアバターを作成する（最大3人分の画像またはイニシャルを表示）
  • ステータス表示や通知のためにアバターにバッジを追加する
  • サイズをカスタマイズできる円形または正方形のプロフィール画像を実装する
  • 組み込みのベクター画像からプリセットのアバターキャラクターを表示する
  • 色、グラデーション、線、サイズを使ってアバターの外観をカスタマイズする
  • ユーザーを視覚的に表現する必要があるあらゆる MAUI アプリケーションで、ユーザー識別 UI を構築する

コンポーネントの概要

SfAvatarView は、次の5種類のコンテンツでユーザーアバターを表示できる多用途なコントロールです。

  1. Default - 組み込みのベクター画像
  2. Initials - テキストベースのアバター（1文字または2文字）
  3. Custom - ユーザー提供の画像
  4. AvatarCharacter - プリセットのベクター画像
  5. Group - 1つのビューに複数のユーザーを表示（最大3人）

主な機能：

  • 複数の形状（Circle、Square、Custom）
  • 5つのサイズプリセット（ExtraSmall～ExtraLarge）
  • 色の自動生成（ダーク／ライト背景）
  • ステータスや通知用のバッジ統合
  • グラデーション背景と線のカスタマイズ
  • フォントとアスペクト比の制御
  • データバインディングに対応し、MVVM で使用可能

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

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

  • Avatar View コンポーネントをインストールして構成する
  • MauiProgram.cs で Syncfusion ハンドラーを登録する
  • 基本的なアバタービューを初めて作成する
  • アバターにカスタム画像を追加する
  • 初期の XAML および C# 実装を設定する
コンテンツの種類と表示モード

📄 参照： references/content-types.md

次のような場合に参照してください。

  • Default、Initials、Custom、AvatarCharacter、Group のコンテンツタイプから選択する
  • 1文字または2文字のイニシャルを表示する
  • プリセットのアバターキャラクターを設定する
  • 複数の画像またはイニシャルを使ったグループビューを作成する
  • グループビューで画像とイニシャルを組み合わせる
  • グループ内のイニシャルの色や背景色をカスタマイズする
  • 各コンテンツタイプを使う場面を理解する
カスタマイズとスタイル設定

📄 参照： references/customization.md

次のような場合に参照してください。

  • 画像のアスペクト比（AspectFit、AspectFill、Fill、Center）を制御する
  • 色（線、背景、自動ダーク／ライト）をカスタマイズする
  • グラデーション背景を適用する
  • サイズのプロパティ（幅、高さ、角の半径）を設定する
  • 線の太さとコンテンツのパディングを調整する
  • フォントのプロパティ（サイズ、ファミリー、属性、自動スケーリング）を構成する
  • 組み込みのプリセット以外のカスタムスタイルのアバターを作成する
ビジュアルスタイルとサイズ

📄 参照： references/visual-styles.md

次のような場合に参照してください。

  • 組み込みの円形サイズ（ExtraSmall～ExtraLarge）を使用する
  • 組み込みの正方形サイズ（ExtraSmall～ExtraLarge）を使用する
  • 複数のアバターに一貫したビジュアルスタイルを適用する
  • AvatarShape プロパティと AvatarSize プロパティを理解する
  • 定義済みのスタイルで統一感のあるアバター表示を作成する
BadgeView の統合

📄 参照： references/badgeview-integration.md

次のような場合に参照してください。

  • アバターに通知バッジを追加する
  • ステータスインジケーター（オンライン、離席中、取り込み中）を表示する
  • アバター上のバッジの位置を指定する（角、カスタムオフセット）
  • バッジの表示をアニメーション化する
  • SfBadgeView を SfAvatarView と統合する
  • 未読メッセージ数やステータスアイコンを表示する

コメント

Markdown 対応