Back to Details

syncfusion-wpf-badge

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Badge (SfBadge)

实现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
当你需要以下功能时，可使用本技能：
  • 为UI元素（按钮、图标、图片）添加通知徽章
  • 显示未读消息计数或状态指示器
  • 自定义徽章的颜色、形状和动画外观
  • 控制徽章在容器上的位置和对齐方式
  • 在列表或集合中实现数据绑定的徽章内容

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
Syncfusion WPF Badge（SfBadge）是一款通知组件，用于在其他UI元素上显示计数、状态或提醒。常见使用场景包括：
  • 未读消息计数 - 在邮箱按钮上显示“99+”
  • 状态指示器 - 使用彩色徽章展示在线/离线状态
  • 提醒通知 - 为错误、警告或成功状态使用不同颜色的徽章
  • 自定义通知 - 绑定到数据属性实现动态更新

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
📄 阅读： references/getting-started.md
  • 安装和程序集设置
  • 通过XAML和C#添加SfBadge
  • 按钮搭配基础徽章的示例
  • 设置显示内容
  • 常见设置问题与解决方案

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
📄 阅读： references/alignment-positioning.md
  • HorizontalAlignment和VerticalAlignment属性（Left、Center、Right、Stretch）
  • HorizontalAnchor和VerticalAnchor定位方式（Inside、Center、Outside）
  • 用于精确定位的HorizontalPosition和VerticalPosition（范围0-1）
  • 使用HorizontalAnchorPosition和VerticalAnchorPosition进行自定义对齐
  • 徽章边界内的内容对齐

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
📄 阅读： references/customization.md
  • 预定义颜色（Fill属性：Accent、Success、Error、Warning、Information）
  • 自定义背景和前景色
  • 预定义形状（Rectangle、Oval、Ellipse、None）
  • 通过CustomShape属性自定义SVG形状
  • 徽章尺寸配置

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)
📄 阅读： references/content-animation.md
  • Content属性和显示格式
  • 用于自定义UI的ContentTemplate
  • AnimationType（Scale、Opacity、None）
  • 数字格式化与显示规则
  • 文本格式化（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
📄 阅读： references/appearance-features.md
  • Stroke和StrokeThickness自定义
  • Opacity属性与透明度设置
  • 用于隐藏徽章的Visibility属性
  • 直接使用徽章与SfBadge.Badge容器的对比
  • 与ListView和ItemsSource的数据绑定
  • 集成模式与边缘情况

Quick Start Example

快速入门示例

xaml
<!-- 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>
csharp
// 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);
xaml
<!-- 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>
csharp
// 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

模式1：带位置控制的状态徽章

Position badges in specific corners with alignment properties:
xaml
<!-- Top-right corner (default) -->
<notification:SfBadge 
    HorizontalAlignment="Right" 
    VerticalAlignment="Top" 
    Content="5"/>

<!-- Bottom-left corner -->
<notification:SfBadge 
    HorizontalAlignment="Left" 
    VerticalAlignment="Bottom" 
    Content="3"/>
使用对齐属性将徽章定位在特定角落：
xaml
<!-- 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

模式2：计数更新动画

Enable animations when badge content changes:
xaml
<notification:SfBadge 
    AnimationType="Scale" 
    Content="{Binding UnreadCount}"
    Fill="Error"/>
当徽章内容变化时启用动画：
xaml
<notification:SfBadge 
    AnimationType="Scale" 
    Content="{Binding UnreadCount}"
    Fill="Error"/>

Pattern 3: Custom Styled Badges

模式3：自定义样式徽章

Combine colors, shapes, and text formatting:
xaml
<notification:SfBadge 
    Fill="Information"
    Shape="Ellipse"
    FontSize="16"
    FontStyle="Italic"
    Content="NEW"/>
结合颜色、形状和文本格式化：
xaml
<notification:SfBadge 
    Fill="Information"
    Shape="Ellipse"
    FontSize="16"
    FontStyle="Italic"
    Content="NEW"/>

Pattern 4: Data-Bound Collections

模式4：数据绑定集合

Display badges in ListView with conditional visibility:
xaml
<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>
在ListView中显示徽章并设置条件可见性：
xaml
<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

关键属性

PropertyDefaultPurpose
Content
nullBadge display text/value
Fill
AccentPredefined color state (Success, Error, Warning, etc.)
Shape
OvalBadge shape (Oval, Rectangle, Ellipse, None, Custom)
HorizontalAlignment
RightHorizontal position (Left, Center, Right, Stretch)
VerticalAlignment
TopVertical position (Top, Center, Bottom, Stretch)
HorizontalAnchor
CenterAnchor mode (Inside, Center, Outside, Custom)
VerticalAnchor
CenterAnchor mode (Inside, Center, Outside, Custom)
AnimationType
NoneAnimation on content change (Scale, Opacity, None)
Background
nullCustom background color (overrides Fill)
Foreground
nullCustom text color
FontSize
14Text size in pixels
Opacity
1Transparency (0-1 range)
Visibility
VisibleShow/hide badge (Visible, Collapsed)
属性默认值用途
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）

Common Use Cases

常见使用场景

Use Case 1: Unread Message Indicator

场景1：未读消息指示器

Display badge showing count of unread messages on an inbox button with animation on update.
在收件箱按钮上显示未读消息计数的徽章，并在更新时添加动画效果。

Use Case 2: Online Status Indicator

场景2：在线状态指示器

Small colored badge on user avatar (green for online, red for offline) using custom positioning.
在用户头像上添加小型彩色徽章（绿色表示在线，红色表示离线），使用自定义定位。

Use Case 3: Error/Warning Alert

场景3：错误/警告提醒

Red or orange badge on form controls to indicate validation errors or warnings.
在表单控件上添加红色或橙色徽章，以指示验证错误或警告。

Use Case 4: Dynamic Notification Counter

场景4：动态通知计数器

Update badge content from data binding as notifications arrive, with Scale animation effect.
通过数据绑定在通知到达时更新徽章内容，并添加Scale动画效果。

Use Case 5: Multi-State Status Badge

场景5：多状态状态徽章

Show different badge styles (color, shape, content) based on application state or user role.
根据应用状态或用户角色显示不同样式的徽章（颜色、形状、内容）。