Implementing Syncfusion WPF Badge (SfBadge)

When to Use This Skill

Use this skill when you need to:

• Add notification badges to UI elements (buttons, icons, images)
• Display unread message counts or status indicators
• Customize badge appearance with colors, shapes, and animations
• Control badge positioning and alignment on containers
• Implement data-bound badge content in lists or collections

Component Overview

The Syncfusion WPF Badge (SfBadge) is a notification component used to display counts, status, or alerts on other UI elements. Common use cases include:

• Unread message counts - Display "99+" on mailbox buttons
• Status indicators - Show online/offline status with colored badges
• Alert notifications - Use different colors for errors, warnings, or success states
• Custom notifications - Bind to data properties for dynamic updates

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and assembly setup
• Adding SfBadge via XAML and C#
• Basic badge with button example
• Setting display content
• Common setup issues and solutions

Alignment and Positioning

📄 Read: references/alignment-positioning.md

• HorizontalAlignment & VerticalAlignment properties (Left, Center, Right, Stretch)
• HorizontalAnchor & VerticalAnchor positioning (Inside, Center, Outside)
• HorizontalPosition & VerticalPosition for precise placement (0-1 range)
• Custom alignment with HorizontalAnchorPosition & VerticalAnchorPosition
• Content alignment within badge boundaries

Customization

📄 Read: references/customization.md

• Predefined colors (Fill property: Accent, Success, Error, Warning, Information)
• Custom background and foreground colors
• Predefined shapes (Rectangle, Oval, Ellipse, None)
• Custom SVG shapes via CustomShape property
• Badge size configuration

Content and Animation

📄 Read: references/content-animation.md

• Content property and display formats
• ContentTemplate for custom UI
• AnimationType (Scale, Opacity, None)
• Number formatting and display conventions
• Text formatting (FontFamily, FontSize, FontStyle)

Appearance and Features

📄 Read: references/appearance-features.md

• Stroke and StrokeThickness customization
• Opacity property and transparency
• Visibility property for hiding badges
• Direct badge usage vs SfBadge.Badge container
• Data binding with ListView and ItemsSource
• Integration patterns and edge cases

Quick Start Example

<!-- Basic badge on a button -->
<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);

Common Patterns

Pattern 1: Status Badges with Position Control

Position badges in specific corners with alignment properties:

<!-- Top-right corner (default) -->
<notification:SfBadge 
    HorizontalAlignment="Right" 
    VerticalAlignment="Top" 
    Content="5"/>

<!-- Bottom-left corner -->
<notification:SfBadge 
    HorizontalAlignment="Left" 
    VerticalAlignment="Bottom" 
    Content="3"/>

Pattern 2: Animated Count Updates

Enable animations when badge content changes:

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

Pattern 3: Custom Styled Badges

Combine colors, shapes, and text formatting:

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

Pattern 4: Data-Bound Collections

Display badges in ListView with conditional visibility:

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

Key Properties

Property	Default	Purpose
Content	null	Badge display text/value
Fill	Accent	Predefined color state (Success, Error, Warning, etc.)
Shape	Oval	Badge shape (Oval, Rectangle, Ellipse, None, Custom)
HorizontalAlignment	Right	Horizontal position (Left, Center, Right, Stretch)
VerticalAlignment	Top	Vertical position (Top, Center, Bottom, Stretch)
HorizontalAnchor	Center	Anchor mode (Inside, Center, Outside, Custom)
VerticalAnchor	Center	Anchor mode (Inside, Center, Outside, Custom)
AnimationType	None	Animation on content change (Scale, Opacity, None)
Background	null	Custom background color (overrides Fill)
Foreground	null	Custom text color
FontSize	14	Text size in pixels
Opacity	1	Transparency (0-1 range)
Visibility	Visible	Show/hide badge (Visible, Collapsed)

Common Use Cases

Use Case 1: Unread Message Indicator

Display badge showing count of unread messages on an inbox button with animation on update.

Use Case 2: Online Status Indicator

Small colored badge on user avatar (green for online, red for offline) using custom positioning.

Use Case 3: Error/Warning Alert

Red or orange badge on form controls to indicate validation errors or warnings.

Use Case 4: Dynamic Notification Counter

Update badge content from data binding as notifications arrive, with Scale animation effect.

Use Case 5: Multi-State Status Badge

Show different badge styles (color, shape, content) based on application state or user role.