【WinForm UI控件系列】消息面板（消息中心）控件MessagePanel

久爱物联网2026-06-24 22:59

MessagePanel 是一个现代化的消息通知面板控件，支持消息筛选、已读/未读状态管理、删除确认等功能。适用于通知中心、消息列表、系统公告等场景。

一、示例效果

二、使用文档

MessagePanel 消息面板控件

控件名称

MessagePanel

中文名称

消息面板控件

控件优点

MessagePanel 是一个现代化的消息通知面板控件，支持消息筛选、已读/未读状态管理、删除确认等功能。适用于通知中心、消息列表、系统公告等场景。

主要特性

  • 消息筛选：支持全部/未读两种筛选模式
  • 已读/未读管理：未读消息显示红点标记，点击标题自动标记已读
  • 删除确认：删除消息时弹出确认对话框，防止误删
  • 鼠标滚轮滚动：支持鼠标滚轮滚动查看更多消息
  • 悬停效果：消息项悬停时显示边框高亮和删除按钮悬停效果
  • Tooltip提示：清空、关闭、删除按钮悬停显示提示文本
  • 主题适配：支持亮色/暗色主题切换
  • SVG图标：使用 SVG 图标管理器加载图标

重要参数说明

MessagePanel 控件属性

基本属性
属性名 类型 默认值 说明
Messages List<MessageItem> new List() 消息列表数据
Filter MessageFilter All 筛选条件（全部/未读）
HeaderHeight int 48 标题栏高度
ItemSpacing int 8 消息项间距
ItemPadding int 15 消息项内边距
CornerRadius int 8 圆角半径
BorderWidth int 1 边框宽度
颜色属性
属性名 类型 默认值 说明
BorderColor Color 45, 45, 48 边框颜色
HoverBorderColor Color 80, 80, 88 悬停边框颜色
HeaderBgColor Color 30, 30, 33 标题栏背景色
ItemBgColor Color 35, 35, 38 消息项背景色
HoverBgColor Color 45, 45, 48 悬停背景色
TextColor Color 245, 245, 245 文本颜色
SubTextColor Color 150, 150, 160 次要文本颜色
ButtonBgColor Color 1, 139, 141 按钮背景色
ButtonHoverBgColor Color 26, 164, 166 按钮悬停背景色
IconColor Color 180, 180, 190 图标颜色
DangerColor Color 255, 77, 79 危险色（删除/关闭悬停）
主题属性
属性名 类型 默认值 说明
FollowGlobalTheme bool true 是否跟随全局主题

MessageItem 消息项属性

属性名 类型 默认值 说明
Id string 自动生成12位 消息唯一标识（自动生成）
Title string null 消息标题
Content string null 消息内容（支持换行）
Date DateTime? null 消息日期
IsRead bool false 是否已读
NoticeIcon string "notification" 通知图标名称
ButtonText string "详情" 跳转按钮文本
ButtonIcon string "right" 跳转按钮图标
ShowButton bool true 是否显示跳转按钮
TagColor Color 255, 77, 79 未读红点颜色

MessageFilter 筛选枚举

值 说明
All 显示全部消息
Unread 仅显示未读消息

重要事件

事件名 参数类型 说明
TitleClicked MessageItem 点击消息标题时触发
MessageDeleted MessageItem 消息删除后触发
Cleared EventArgs 清空全部消息时触发
Closed EventArgs 点击关闭按钮时触发

使用示例

基本使用

csharp 复制代码 
using AntdUIEx.Controls.MessagePanel;

// 创建消息面板
MessagePanel messagePanel = new MessagePanel();
messagePanel.Size = new Size(400, 500);
messagePanel.Location = new Point(10, 10);
this.Controls.Add(messagePanel);

// 添加消息
messagePanel.Messages.Add(new MessageItem
{
    Title = "系统通知",
    Content = "您的账户已成功激活，欢迎使用系统。",
    Date = DateTime.Now,
    IsRead = false,
    NoticeIcon = "notification"
});

添加多条消息

csharp 复制代码 
// 添加多条消息
messagePanel.Messages.AddRange(new MessageItem[]
{
    new MessageItem
    {
        Title = "豆包大模型 2.1 已上线",
        Content = "豆包已上线豆包大模型 2.1，Agent、代码交付、多模态能力全面增强。",
        Date = DateTime.Now.AddDays(-1),
        IsRead = false,
        NoticeIcon = "notification"
    },
    new MessageItem
    {
        Title = "版本更新通知",
        Content = "系统已更新至最新版本，请查看更新日志。",
        Date = DateTime.Now.AddDays(-2),
        IsRead = true,
        NoticeIcon = "info"
    },
    new MessageItem
    {
        Title = "安全提醒",
        Content = "检测到异常登录行为，请及时修改密码。",
        Date = DateTime.Now.AddHours(-3),
        IsRead = false,
        NoticeIcon = "warning"
    }
});

绑定事件

csharp 复制代码 
// 标题点击事件
messagePanel.TitleClicked += (sender, item) =>
{
    MessageTip.ShowAtMouse($"点击标题：{item.Title}");
    // item.IsRead 已自动设置为 true
};

// 消息删除事件
messagePanel.MessageDeleted += (sender, item) =>
{
    MessageTip.ShowAtMouse($"已删除消息：{item.Title}");
};

// 清空事件
messagePanel.Cleared += (sender, e) =>
{
    MessageTip.ShowAtMouse("已清空全部消息");
};

// 关闭事件
messagePanel.Closed += (sender, e) =>
{
    MessageTip.ShowAtMouse("面板已关闭");
    // 可以隐藏面板或执行其他操作
    messagePanel.Visible = false;
};

切换筛选模式

csharp 复制代码 
// 显示全部消息
messagePanel.Filter = MessageFilter.All;

// 仅显示未读消息
messagePanel.Filter = MessageFilter.Unread;

自定义样式

csharp 复制代码 
// 自定义颜色
messagePanel.HeaderBgColor = Color.FromArgb(24, 144, 255);
messagePanel.ButtonBgColor = Color.FromArgb(24, 144, 255);
messagePanel.TextColor = Color.White;
messagePanel.BorderColor = Color.FromArgb(24, 144, 255);

// 自定义尺寸
messagePanel.HeaderHeight = 56;
messagePanel.ItemSpacing = 12;
messagePanel.ItemPadding = 20;
messagePanel.CornerRadius = 12;

自定义消息项

csharp 复制代码 
// 自定义消息项样式
messagePanel.Messages.Add(new MessageItem
{
    Title = "自定义消息",
    Content = "这是一条自定义样式的消息。",
    Date = DateTime.Now,
    IsRead = false,
    NoticeIcon = "star",           // 自定义图标
    ButtonText = "查看详情",        // 自定义按钮文本
    ButtonIcon = "arrow-right",    // 自定义按钮图标
    ShowButton = true,             // 显示按钮
    TagColor = Color.FromArgb(255, 77, 79)  // 自定义红点颜色
});

// 隐藏跳转按钮
messagePanel.Messages.Add(new MessageItem
{
    Title = "无跳转按钮消息",
    Content = "这条消息没有跳转按钮。",
    Date = DateTime.Now,
    IsRead = false,
    ShowButton = false
});

主题适配

csharp 复制代码 
// 跟随全局主题（默认）
messagePanel.FollowGlobalTheme = true;

// 禁用主题跟随，使用自定义颜色
messagePanel.FollowGlobalTheme = false;
messagePanel.HeaderBgColor = Color.FromArgb(30, 30, 30);
messagePanel.ItemBgColor = Color.FromArgb(35, 35, 35);

删除消息

csharp 复制代码 
// 通过代码删除消息
string messageId = "ABC123XYZ456";
messagePanel.DeleteMessage(messageId);

// 清空全部消息
messagePanel.ClearMessages();

完整示例

csharp 复制代码 
public partial class NotificationForm : Form
{
    private MessagePanel messagePanel;

    public NotificationForm()
    {
        InitializeComponent();
        InitializeMessagePanel();
    }

    private void InitializeMessagePanel()
    {
        messagePanel = new MessagePanel();
        messagePanel.Size = new Size(380, 450);
        messagePanel.Location = new Point(20, 20);
        this.Controls.Add(messagePanel);

        // 添加示例消息
        messagePanel.Messages.AddRange(new MessageItem[]
        {
            new MessageItem
            {
                Title = "新功能发布",
                Content = "系统新增数据导出功能，支持Excel、PDF等多种格式导出。",
                Date = DateTime.Now.AddHours(-1),
                IsRead = false,
                NoticeIcon = "notification"
            },
            new MessageItem
            {
                Title = "账户安全提醒",
                Content = "您的密码已超过90天未更新，建议及时修改以确保账户安全。",
                Date = DateTime.Now.AddDays(-3),
                IsRead = true,
                NoticeIcon = "warning"
            },
            new MessageItem
            {
                Title = "系统维护通知",
                Content = "系统将于本周六凌晨2:00-4:00进行例行维护，届时服务将暂停。",
                Date = DateTime.Now.AddDays(-5),
                IsRead = false,
                NoticeIcon = "info"
            }
        });

        // 绑定事件
        messagePanel.TitleClicked += OnTitleClicked;
        messagePanel.MessageDeleted += OnMessageDeleted;
        messagePanel.Cleared += OnCleared;
        messagePanel.Closed += OnClosed;
    }

    private void OnTitleClicked(object? sender, MessageItem item)
    {
        MessageTip.ShowAtMouse($"已查看：{item.Title}");
    }

    private void OnMessageDeleted(object? sender, MessageItem item)
    {
        MessageTip.ShowAtMouse($"已删除：{item.Title}");
    }

    private void OnCleared(object? sender, EventArgs e)
    {
        MessageTip.ShowAtMouse("已清空全部消息");
    }

    private void OnClosed(object? sender, EventArgs e)
    {
        messagePanel.Visible = false;
    }
}

注意事项

  1. 消息ID：MessageItem 的 Id 属性会在首次访问时自动生成12位随机字符串，无需手动设置
  2. 已读状态：点击消息标题会自动将消息标记为已读，红点消失
  3. 删除确认：点击删除按钮会弹出确认对话框，确认后才会删除消息
  4. 滚动支持：当消息数量较多超出面板高度时，支持鼠标滚轮滚动
  5. 主题适配：默认跟随全局主题，可通过 FollowGlobalTheme 属性禁用
  6. SVG图标：NoticeIcon、ButtonIcon 等图标属性使用 SvgIconManager 管理的图标名称
  7. 设计时支持：在设计器中不会加载SVG图标，避免设计器异常

版本更新

2026-06-23

  • 新增：MessagePanel 消息面板控件
  • 新增：MessageItem 消息项数据类
  • 新增：全部/未读筛选功能
  • 新增：已读/未读红点标记
  • 新增：删除确认对话框
  • 新增：鼠标滚轮滚动支持
  • 新增：Tooltip提示文本
  • 新增：主题适配支持
  • 新增：TitleClicked、MessageDeleted、Cleared、Closed 事件

三、后记说明

更多控件，敬请关注，如有需求、好的建议，请留言(xue5zhijing)

更多控件：更多：https://blog.csdn.net/uaime/article/details/161663833

热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06飞书长连接_事件订阅（接收消息，审批任务状态变更）07GitHub 镜像站点08【AI总结】2026年6月 主流国内外大模型总结09Trae国际版与国内版深度测评：AI原生IDE的双生花10AI科技热点日报 | 2026年6月1日