WinForm 聊天窗口怎么做：三步搭出 AntdUI 的会话列表与消息气泡

WinForm 聊天窗口怎么做三步搭出 AntdUI 的会话列表与消息气泡【免费下载链接】AntdUI 基于 Ant Design 设计语言的 Winform 界面库项目地址: https://gitcode.com/AntdUI/AntdUIWinForm 做聊天界面不用拿 ListView 和 Label 手拼。AntdUI 的 MsgList 与 ChatList 两个控件分别负责会话列表和消息气泡本文带你从空窗体开始照着搭出一个能跑的聊天窗口。什么业务适合做聊天窗体工单、群聊与即时消息只要是左边一列会话、右边一片对话的结构都可以用 MsgList ChatList 这对组合客服工单会话、内部群聊、客服与客户的即时消息。如果消息区不需要气泡形态比如纯日志流用 RichTextBox 反而省事不必硬套。 两步搭骨架左边 MsgList、右边 ChatList这一步只解决布局把两个控件一左一右放进同一个窗体。注意添加顺序先加 Dock.Fill 的 ChatList再加 Dock.Left 的 MsgList这样左列宽度固定、右侧自动占满剩余空间。var msgList new AntdUI.Chat.MsgList { Dock DockStyle.Left, Width 260 }; var chatList new AntdUI.Chat.ChatList { Dock DockStyle.Fill }; this.Controls.Add(chatList); // 先 Fill this.Controls.Add(msgList); // 后 Left左侧固定 260 宽到这里窗体上已经是左列表右气泡的框架了剩下就是把数据填进去。列表侧会话项的头像、最新消息与未读角标MsgList 的数据放在 Items 集合里每一项是 MsgItem。最常用的四个字段Icon头像、Text最新一条消息、Time右上角时间戳、Count未读数量超过 99 会自动显示 99。var item new AntdUI.Chat.MsgItem(技术交流群) { Icon Resources.GroupAvatar, // 头像 Text 新版本发布通知, // 最新一条消息 Time 上午 9:45, // 右上角时间戳 Count 12 // 未读角标99 自动变 99 }; msgList.Items.Add(item); msgList.IconRound true; // 头像裁成圆形 msgList.IconRadius 8; msgList.BackHover Color.FromArgb(245, 245, 245); msgList.BackActive Color.FromArgb(230, 247, 255); msgList.ItemSelected (s, e) LoadChat(e.Item.ID); // e.Item 是选中的会话选中事件只给会话对象如果你还要点击坐标、鼠标按键这类信息就换成 ItemClick 事件它带出完整的 MouseEventArgs。气泡侧收发消息、系统提示与气泡颜色间距怎么调ChatList 里装的是 IChatItem日常用两种就够TextChatItem 是文字气泡TipChatItem 是居中的时间戳、撤回提示条。区分我和对方靠 SetMe()加了它就翻到右侧显示。// 对方消息文本 头像 昵称 chatList.AddToBottom(new TextChatItem(收到今天下班前给你, av1, AduSkin)); // 我发的消息SetMe() 翻到右侧 chatList.AddToBottom(new TextChatItem(好的辛苦, avMe, 我).SetMe()); // 系统提示条时间戳 / 撤回通知 chatList.AddToBottom(new TipChatItem(DateTime.Now)); chatList.AddToBottom(new TipChatItem(对方撤回了一条消息).SetFore(Style.Db.Warning)); chatList.BackBubble Color.White; // 对方气泡底色 chatList.BackBubbleMe Color.FromArgb(64, 158, 255); // 我方气泡底色 chatList.BubbleGap 0.75f; // 同组气泡间隙0.75 是默认值 chatList.ItemGap 4; // 消息行之间的像素间隙这里要注意一下 BubbleGap 和 ItemGap 分工不同前者管同一发送者连续气泡之间的紧凑程度后者管两条消息行与行之间的空隙。想贴得紧就调小 BubbleGap想要呼吸感就调大 ItemGap。一个能跑的完整例子列表选中后加载聊天区下面是一个窗体类的骨架主线只有一条列表选中会话 → 清空气泡区 → 按历史数据逐条 AddToBottom。public partial class ChatForm : AntdUI.Window { readonly AntdUI.Chat.MsgList msgList new() { Dock DockStyle.Left, Width 260 }; readonly AntdUI.Chat.ChatList chatList new() { Dock DockStyle.Fill }; public ChatForm() { InitializeComponent(); Controls.Add(chatList); // 先 Fill 后 Left Controls.Add(msgList); msgList.Items.Add(new AntdUI.Chat.MsgItem(产品群) { ID p1, Time 昨天 }); msgList.Items.Add(new AntdUI.Chat.MsgItem(张三) { ID p2, Time 10:20, Count 3 }); msgList.ItemSelected (s, e) LoadChat(e.Item.ID); // 主线入口 } // 列表选中 → 清空旧消息 → 载入新会话 void LoadChat(string id) { chatList.Items.Clear(); foreach (var m in FetchHistory(id)) chatList.AddToBottom(new AntdUI.Chat.TextChatItem(m.Text, m.Avatar, m.Name) .SetMe(m.IsMe).SetTime(m.Time)); } void Send() chatList.AddToBottom(new TextChatItem(input.Text, myAvatar, 我).SetMe()); }FetchHistory 换成你自己的接口调用即可返回什么结构都行只要能映射出文本、头像、昵称、是否本人发送这四样。三个进阶点虚拟滚动、自定义消息类型、主题与 DPI大列表只画可见区。消息上万条时可以在子类里重写绘制把滚动视口之外的项跳过public class FastChatList : AntdUI.Chat.ChatList { protected override void OnPaint(PaintEventArgs e) { var start ScrollBar.Value; // 滚动位置 var end start ClientSize.Height; // 视口范围 // 只绘制 Y 坐标落在 [start, end] 内的消息项 } }自定义消息类型。要附件、卡片这类形态时继承 TextChatItem 加字段即可其余行为直接复用public class FileChatItem : AntdUI.Chat.TextChatItem { public string FilePath { get; set; } // 扩展字段附件路径 public FileChatItem(string name, Image icon, string who) : base(name, icon, who) { } }主题与 DPI 适配。底色跟随深浅主题切换间距按缩放系数换算Theme().Call(dark { msgList.BackColor Style.Db.BgBase; // 跟随主题 chatList.BackBubble dark ? Color.FromArgb(38, 42, 51) : Color.White; }); chatList.ItemGap (int)(4 * Config.DpiScale); // 高 DPI 下换算间距⚠️ 容易踩的坑海量消息怎么加载问历史消息上万条怎么加载只把最近一页比如 50 条放进 Items用户滚到顶部时再异步加载更早的批次别一次性全量 AddToBottom。问连续发的几条消息贴得太紧或太散先分清两个参数BubbleGap 管同组气泡间隙默认 0.75ItemGap 管消息行间距像素值分开调。问头像被拉变形了检查 MsgList 的 IconFit默认 TFit.Cover 是等比裁切只有改成 Stretch 才会变形保持默认即可。更细的行为可以看 Chat 组件源码MsgList 和 ChatList 的每个属性都带中文 Description 注释在属性面板里直接就能读到。把这套思路往外推一步MsgList 的数据项 选中事件模式换成工单列表、知识库目录、设备清单同样成立ChatList 的底部追加 自动滚动模式换成审批流水、日志回放也能搭。聊天窗口只是双栏 流式追加这个结构的一个特例掌握这一对组合其余界面照着改就行。【免费下载链接】AntdUI 基于 Ant Design 设计语言的 Winform 界面库项目地址: https://gitcode.com/AntdUI/AntdUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考