syncfusion-maui-badge-view

在 .NET MAUI 中实现徽章视图

这是一份全面的指南，介绍如何实现和自定义 Syncfusion 的 .NET MAUI 徽章视图（SfBadgeView）控件。徽章视图可在按钮、图像或头像等内容上叠加显示通知数量、状态指示器或提醒。

何时使用此技能

在以下情况下使用此技能：

• 为按钮、图标或个人资料图片添加通知徽章
• 显示未读消息数或通知数量
• 显示状态指示器（在线、忙碌、离开）
• 实现带有自定义位置的通知叠加层
• 添加动画徽章通知
• 创建带有预定义符号或图标的徽章
• 自定义徽章外观（颜色、字体、形状）
• 在内容元素周围放置徽章
• 实现带有屏幕阅读器支持的无障碍徽章通知

组件概述

徽章视图（SfBadgeView）是一种通知控件，可在内容元素上叠加徽章。它支持：

• 文本徽章： 显示通知数量或简短文本
• 图标徽章： 显示预定义的状态符号（在线、离开、忙碌等）
• 定位： 在内容周围的 8 个位置放置徽章（TopRight、TopLeft、BottomRight 等）
• 自定义： 字体、颜色、描边、背景、圆角半径
• 动画： 徽章文本更改时播放缩放动画
• 预定义样式： 8 种颜色类型（Primary、Error、Success、Warning 等）
• 无障碍功能： 支持屏幕阅读器读取徽章内容

文档和导航指南

入门

📄 阅读： references/getting-started.md

在以下情况下阅读此参考文档：

• 安装 Syncfusion.Maui.Core NuGet 包
• 在 MauiProgram.cs 中注册 Syncfusion 处理程序
• 创建第一个徽章视图
• 添加徽章文本或内容
• 实现基本的徽章通知
• 使用 ScreenReaderText 添加无障碍支持

徽章自定义

📄 阅读： references/customization.md

在以下情况下阅读此参考文档：

• 自定义字体属性（大小、字体系列、字形属性）
• 添加描边边框并调整粗细
• 更改文本颜色和内边距
• 应用预定义的徽章类型（Primary、Error、Success、Warning、Info、Dark、Light、Secondary）
• 设置自定义背景颜色
• 为圆角徽章配置圆角半径
• 对齐徽章（Center、Start、End）
• 处理不同尺寸场景下的徽章对齐
• 使用 AutoHide 使多个徽章保持统一对齐
• 启用字体自动缩放以提升无障碍性
• 控制徽章可见性

位置自定义

📄 阅读： references/positioning.md

在以下情况下阅读此参考文档：

• 在内容周围放置徽章（TopRight、TopLeft、BottomRight、BottomLeft、Left、Top、Right、Bottom）
• 使用 Offset 属性微调徽章位置
• 调整 X、Y 坐标以实现精确定位
• 在图像、按钮或自定义控件上放置徽章

动画

📄 阅读： references/animation.md

在以下情况下阅读此参考文档：

• 启用或禁用徽章动画
• 配置徽章文本更改时播放的缩放动画
• 调整动画时长以实现更快或更慢的效果
• 创建动态徽章通知

预定义符号

📄 阅读： references/predefined-symbols.md

在以下情况下阅读此参考文档：

• 使用徽章图标代替文本（Add、Available、Away、Busy、Delete、Dot、Prohibit）
• 使用预定义符号显示状态指示器
• 了解图标和文本的优先级
• 在头像或图像上实现基于图标的徽章