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

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.