syncfusion-wpf-badge

Syncfusion WPF Badge（SfBadge）の実装

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

次のような場合に、このスキルを使用してください。

• ボタン、アイコン、画像などの UI 要素に通知バッジを追加する
• 未読メッセージ数やステータスインジケーターを表示する
• 色、形状、アニメーションを使ってバッジの外観をカスタマイズする
• コンテナー上でのバッジの位置と配置を制御する
• リストやコレクション内で、データバインドされたバッジコンテンツを実装する

コンポーネントの概要

Syncfusion WPF Badge（SfBadge）は、ほかの UI 要素に件数、ステータス、アラートを表示する通知コンポーネントです。一般的な使用例は次のとおりです。

• 未読メッセージ数 - メールボックスボタンに「99+」を表示します
• ステータスインジケーター - 色付きのバッジでオンライン／オフラインのステータスを示します
• アラート通知 - エラー、警告、成功の状態に応じて異なる色を使用します
• カスタム通知 - データプロパティにバインドして動的に更新します

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

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリのセットアップ
• XAML と C# を使用した SfBadge の追加
• ボタンを使った基本的なバッジの例
• 表示コンテンツの設定
• よくあるセットアップの問題と解決策

配置と位置

📄 参照： references/alignment-positioning.md

• HorizontalAlignment および VerticalAlignment プロパティ（Left、Center、Right、Stretch）
• HorizontalAnchor および VerticalAnchor による位置指定（Inside、Center、Outside）
• HorizontalPosition および VerticalPosition による正確な配置（0-1 の範囲）
• HorizontalAnchorPosition および VerticalAnchorPosition によるカスタム配置
• バッジ境界内でのコンテンツの配置

カスタマイズ

📄 参照： references/customization.md

• 定義済みの色（Fill プロパティ：Accent、Success、Error、Warning、Information）
• カスタムの背景色と前景色
• 定義済みの形状（Rectangle、Oval、Ellipse、None）
• CustomShape プロパティによるカスタム SVG 形状
• バッジサイズの設定

コンテンツとアニメーション

📄 参照： references/content-animation.md

• Content プロパティと表示形式
• カスタム UI 用の ContentTemplate
• AnimationType（Scale、Opacity、None）
• 数値の書式設定と表示規則
• テキストの書式設定（FontFamily、FontSize、FontStyle）

外観と機能

📄 参照： references/appearance-features.md

• Stroke と StrokeThickness のカスタマイズ
• Opacity プロパティと透明度
• バッジを非表示にする Visibility プロパティ
• バッジの直接使用と SfBadge.Badge コンテナーの使用
• ListView および ItemsSource とのデータバインディング
• 統合パターンとエッジケース

クイックスタートの例

<Button Width="100" Height="50" Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge 
            Content="10" 
            Fill="Success"
            Shape="Oval"
            x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>

// C# equivalent
SfBadge sfBadge = new SfBadge();
sfBadge.Name = "badge";
sfBadge.Content = "10";
sfBadge.Fill = BadgeFill.Success;
sfBadge.Shape = BadgeShape.Oval;

Button button = new Button();
button.Width = 100;
button.Height = 50;
button.Content = "Inbox";

SfBadge.SetBadge(button, sfBadge);

よくあるパターン

パターン 1：位置を制御したステータスバッジ

配置プロパティを使って、特定の隅にバッジを配置します。

<notification:SfBadge 
    HorizontalAlignment="Right" 
    VerticalAlignment="Top" 
    Content="5"/>


<notification:SfBadge 
    HorizontalAlignment="Left" 
    VerticalAlignment="Bottom" 
    Content="3"/>

パターン 2：件数更新のアニメーション

バッジのコンテンツが変更されたときにアニメーションを有効にします。

<notification:SfBadge 
    AnimationType="Scale" 
    Content="{Binding UnreadCount}"
    Fill="Error"/>

パターン 3：カスタムスタイルのバッジ

色、形状、テキストの書式設定を組み合わせます。

<notification:SfBadge 
    Fill="Information"
    Shape="Ellipse"
    FontSize="16"
    FontStyle="Italic"
    Content="NEW"/>

パターン 4：データバインドされたコレクション

条件付きの表示設定で ListView にバッジを表示します。

<ListView ItemsSource="{Binding MailItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding ItemName}"/>
                <notification:SfBadge 
                    Content="{Binding UnreadCount}"
                    Visibility="{Binding HasMessages, Converter={StaticResource BoolToVisibilityConverter}}"
                    Shape="Oval"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

主なプロパティ

プロパティ	デフォルト	用途
Content	null	バッジに表示するテキスト／値
Fill	Accent	定義済みの色の状態（Success、Error、Warning など）
Shape	Oval	バッジの形状（Oval、Rectangle、Ellipse、None、Custom）
HorizontalAlignment	Right	水平方向の位置（Left、Center、Right、Stretch）
VerticalAlignment	Top	垂直方向の位置（Top、Center、Bottom、Stretch）
HorizontalAnchor	Center	アンカーモード（Inside、Center、Outside、Custom）
VerticalAnchor	Center	アンカーモード（Inside、Center、Outside、Custom）
AnimationType	None	コンテンツ変更時のアニメーション（Scale、Opacity、None）
Background	null	カスタム背景色（Fill を上書きします）
Foreground	null	カスタム文字色
FontSize	14	文字サイズ（ピクセル）
Opacity	1	不透明度（0～1 の範囲）
Visibility	Visible	バッジの表示／非表示（Visible、Collapsed）

よくあるユースケース

ユースケース 1：未読メッセージのインジケーター

受信トレイのボタンに未読メッセージ数を示すバッジを表示し、更新時にアニメーションを適用します。

ユースケース 2：オンライン状態のインジケーター

カスタム配置を使用して、ユーザーのアバターに小さな色付きのバッジを表示します（オンラインは緑、オフラインは赤）。

ユースケース 3：エラー／警告アラート

フォームコントロールに赤またはオレンジのバッジを表示して、入力検証エラーや警告を示します。

ユースケース 4：動的な通知カウンター

通知の到着に応じて、データバインディングでバッジのコンテンツを更新し、Scale アニメーション効果を適用します。

ユースケース 5：複数状態のステータスバッジ

アプリケーションの状態やユーザーの役割に応じて、異なるバッジスタイル（色、形状、コンテンツ）を表示します。