企业官网建设流程全解析

• UI组件
• 桌面应用

对话气泡是通讯类软件的核心交互元素，相比纯文本形式的上下文对话，气泡能让聊天界面更生动、更具可读性，配合不同皮肤还能显著丰富软件的个性化能力。本文以 HandyControl 扩展控件库中的ChatBubble为对象，结合其源码实现与官方 Demo，系统讲解该控件的属性体系、继承自SelectableItem的选中与已读机制，以及如何在ListBox中构建一个完整的聊天会话界面。读完本文，你将能够独立在 WPF 项目中接入ChatBubble，实现收发双方气泡、文本/图片/语音/自定义四类消息模板切换，并借助“已读回执”能力落地消息阅读状态管理。

ChatBubble 是什么

ChatBubble是 HandyControl 提供的一个专用于聊天场景的扩展控件，定义于 ChatBubble.cs：

public class ChatBubble : SelectableItem

它继承自SelectableItem（而非普通的ContentControl），因此天然具备“可被选中”的交互语义。文档中对它的定位非常明确：相对于纯文本的上下文对话，气泡形式能让聊天界面更加生动有趣；通过扩展气泡皮肤，还能让软件的个性化功能更加丰富。整个控件的默认视觉样式（圆角气泡 + 尾部小三角）与角色区分（发送方居右、接收方居左）均由 HandyControl 的主题样式模板提供，开发者无需手写任何复杂 XAML 即可获得接近主流 IM 软件的观感。

核心属性详解

ChatBubble对外暴露了四个核心属性，下表是文档给出的属性总览，结合源码可以进一步确认每个属性的类型、默认值与触发时机：

Role：对话角色

Role决定气泡在界面上的归属方向与配色。其类型ChatRoleType定义于 ChatRoleType.cs：

public enum ChatRoleType { Sender, // 发送方（自己） Receiver // 接收方（对方） }

在默认样式 ChatBubbleBaseStyle.xaml 中，Sender气泡水平右对齐、背景为DarkPrimaryBrush、前景为TextIconBrush；当Role切换为Receiver时，样式触发器会自动将水平对齐翻转为左对齐，背景切换为BorderBrush、前景切换为PrimaryTextBrush，同时气泡尾部（Tail）的Path会被水平镜像（ScaleTransform ScaleX="-1"），形成指向左右不同方向的对话尖角。也就是说，开发者只需要绑定Role，气泡的左右布局与配色会自动完成。

Type：消息类型

Type决定气泡内容区域使用哪一种渲染模板，其类型ChatMessageType定义于 ChatMessageType.cs：

public enum ChatMessageType { String, // 文本 Image, // 图片 Audio, // 语音 Custom // 自定义内容 }

四种类型在默认样式中分别对应四套ControlTemplate：

• ChatBubbleStringBaseTemplate：文本模板，将Content直接渲染为可换行（TextWrapping="Wrap"）的TextBlock；
• ChatBubbleImageBaseTemplate：图片模板，把Content作为Image.Source渲染，并通过TemplateBinding Padding生成描边内衬；
• ChatBubbleAudioBaseTemplate：语音模板，模板左侧带一个未读红点（Ellipse），右侧渲染音频图标，角色反转时整组元素会镜像对调；
• ChatBubbleCustomBaseTemplate：自定义模板，通过ContentPresenter将任意Content呈现为气泡内容。

四套模板共享同一套气泡骨架（圆角Border+ 尾部Path），不同Type只是替换内容区域，因此消息外观保持高度一致。

IsRead：已读状态

IsRead是一个bool类型依赖属性，默认值为ValueBoxes.FalseBox（即false）。它在语音模板中被直接消费：未读时（IsRead == false），气泡左上角/右上角显示一个DangerBrush颜色的红点（对应Boolean2VisibilityReConverter反转可见性），已读后红点自动隐藏。在默认样式中还存在一条便捷绑定：

<Setter Property="IsRead" Value="{Binding IsSelected, RelativeSource={RelativeSource Self}}"/>

即气泡被选中时IsRead会被置为true，将“选中”与“已读”两个语义自动关联起来。

ReadAction：选中回调

ReadAction是一个Action<object>类型的普通 CLR 属性（非依赖属性），参数为气泡的Content。它是文档所述“该气泡被选中时触发”的动作钩子，可用于在气泡被点选时把消息标记为已读、上报阅读回执或统计曝光等业务逻辑。需要特别说明的是，ReadAction并非独立触发，它的执行依附于OnSelected流程（见下文选中机制）。

选中与已读机制：从 SelectableItem 到 OnSelected

ChatBubble的“选中即已读”能力来自它的基类SelectableItem。该类定义于 SelectableItem.cs，继承自ContentControl并实现ISelectable接口，核心成员包括：

• IsSelected：当前是否被选中；
• SelfManage：是否由控件自行管理选中状态（true时点击即切换自身IsSelected）；
• CanDeselect：是否允许再次点击取消选中；
• 冒泡路由事件Selected/Deselected：供外层（如ListBox）通过事件聚合处理。

SelectableItem在鼠标左键按下/抬起过程中捕获点击，并在OnMouseLeftButtonUp中根据SelfManage、CanDeselect与当前选中状态，最终调用虚方法OnSelected(RoutedEventArgs)（或Deselected路由事件）向上冒泡。

ChatBubble重写了OnSelected，源码逻辑如下：

protected override void OnSelected(RoutedEventArgs e) { base.OnSelected(e); IsRead = true; ReadAction?.Invoke(Content); }

这段实现非常关键：一旦气泡被选中（无论是用户直接点击，还是作为ListBoxItem被选中），基类先向上冒泡Selected事件，随后ChatBubble自动将IsRead置为true，并执行ReadAction?.Invoke(Content)把消息内容作为参数回传。这就是“该气泡被选中时触发”ReadAction的完整链路，也解释了为什么默认样式中IsRead与IsSelected绑定不会造成状态冲突——二者最终都收敛到同一次OnSelected调用。

样式与皮肤定制

ChatBubble的默认样式注册于 ChatBubble.xaml，它只是对基础样式的一行继承：

<Style BasedOn="{StaticResource ChatBubbleBaseStyle}" TargetType="hc:ChatBubble"/>

实际细节全部集中在 ChatBubbleBaseStyle.xaml 中。基础样式为所有模板设置了统一的默认值：

Role与Type各自以Style.Triggers联动：Role=Receiver时翻转布局与配色；Type=Image时切换图片模板并追加MaxHeight=280限制图片高度；Type=Audio、Type=Custom时分别切换语音与自定义模板。

从这套结构可以推断，气泡皮肤的定制有两种常规路径：一是通过DynamicResource替换DarkPrimaryBrush、BorderBrush等主题画刷，实现全局换肤；二是以BasedOn继承ChatBubbleBaseStyle后覆盖Template或直接替换BubbleTailGeometry等几何资源，做出完全自定义的气泡造型，这正对应文档开头所述“通过扩展还可以做出气泡皮肤，使软件个性化功能更加丰富”。

实战：在 ListBox 中构建聊天会话

HandyControl 官方 Demo 给出了完整的集成范例。演示入口位于 ChatBubbleDemo.xaml，页面由一个TransitioningContentControl包裹的ScrollViewer承载两个ChatBox示例；核心的会话视图则实现在 ChatBox.xaml 中，其结构可以提炼为三个要点：

1. 以 ListBox 作为消息容器

ListBox的ItemsSource绑定ChatInfos集合，ItemTemplate中直接使用ChatBubble作为条目模板：

<ListBox Name="ListBoxChat" ItemsSource="{Binding ChatInfos}"> <ListBox.ItemTemplate> <DataTemplate> <hc:ChatBubble MaxWidth="300" Role="{Binding Role}" Type="{Binding Type}" Content="{Binding Message}" Tag="{Binding}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

这里把Role、Type、Content（消息文本或图片源）分别绑定到数据模型属性，通过Tag保留原始数据对象，供后续命令取用。ListBox的默认选择行为恰好能驱动ChatBubble的“选中即已读”逻辑。

2. 通过路由事件与 EventToCommand 联动命令

Demo 使用 HandyControl 的Interaction.Triggers监听气泡的Selected路由事件，并转换为ReadMessageCmd命令：

<hc:Interaction.Triggers> <hc:RoutedEventTrigger RoutedEvent="hc:ChatBubble.Selected"> <hc:EventToCommand Command="{Binding ReadMessageCmd}" PassEventArgsToCommand="True"/> </hc:RoutedEventTrigger> </hc:Interaction.Triggers>

PassEventArgsToCommand="True"会将事件参数传入命令，命令层可以从ChatBubble的Tag/Content中取得具体消息对象，从而完成“已读上报”之类的业务动作。

3. 输入区与语音/图片扩展

ChatBox底部输入区包含文本TextBox（KeyDown触发发送命令）、图片按钮和语音按钮，并通过IconSwitchElement在文本/语音模式之间切换，这部分扩展展示了ChatBubble与 HandyControl 其他附加属性（hc:BorderElement.CornerRadius、hc:IconElement.Geometry等）组合使用的完整聊天室形态。语音消息的Type即对应前文的Audio模板，图片消息则对应Image模板。

小结

ChatBubble是 HandyControl 中一个“开箱即用”的聊天场景控件：Role与Type两个枚举属性驱动样式模板自动完成左右布局、配色与四种消息形态的切换；继承自SelectableItem的选中机制配合OnSelected重写，把“选中 → 已读 → 回调”串成一条完整链路，让消息阅读状态的管理几乎零成本；而基于BasedOn与DynamicResource的样式体系则为气泡皮肤定制保留了充分的扩展空间。如果你正在开发 WPF 聊天类应用，可以直接复用 ChatBox.xaml 的 ListBox + 模板绑定结构，并在命令层处理Selected事件完成业务回执。

• UI组件
• 桌面应用