UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载Tag 是 HandyControl 中用于指示用户选中项的基础标签控件基于ContentControl实现与纯文字相比提供了关闭、选中与点击等额外交互能力。本文将以 Tag 官方文档 为核心结合仓库源码深入解析其属性、事件、默认样式与容器用法帮助读者在 WPF 项目中快速落地可交互的标签体系。控件概览Tag 在源码中的完整定义位于 Tag.cspublic class Tag : ContentControl它继承自 WPF 原生ContentControl因此可以像普通内容控件一样承载任意Content文本、图像或任意 UIElement。在此基础上Tag 额外提供了三类交互能力关闭通过右上角的关闭按钮删除标签触发Closing/Closed事件选中可配置为可选中模式点击后切换选中态并触发Selected事件内容定制除Content外还支持Header头区域可放置图标、头像等元素。属性详解以下属性在 Tag.cs 中以依赖属性DependencyProperty形式实现支持样式设置、绑定与动画| 属性 | 描述 | 默认值 | 备注 | | - | - | - | - | |ShowCloseButton| 是否显示删除关闭按钮 |true| 默认显示见 Tag.cs | |Selectable| 是否支持选中 |false| 为true时点击标签即选中 | |IsSelected| 是否处于选中态 |false| 为true时触发Selected事件 |除了文档中列出的三个核心属性从 Tag.cs 可以看到控件还提供了一组 Header 相关属性用于在标签左侧扩展一个独立的头部区域| 属性 | 描述 | | - | - | |Header| 头部内容任意对象通常为图标或头像 | |HasHeader| 只读标记当前是否设置了Header| |HeaderTemplate/HeaderTemplateSelector/HeaderStringFormat| 头部内容模板、模板选择器与字符串格式化 |关键实现细节从源码层面可以确认三个值得注意的行为1.IsSelected变更会主动触发事件。IsSelectedProperty注册时的回调直接抛出SelectedEvent也就是说无论是点击还是通过绑定/代码赋值只要IsSelected变为trueSelected事件都会触发见 Tag.cs。2. 点击选中逻辑。在OnMouseLeftButtonDown中仅当Selectable为true时才将IsSelected置为true见 Tag.cs。因此普通 Tag 默认点击不会有任何选中反馈需显式开启Selectable。3. 关闭按钮复用命令系统。构造器中注册了ControlCommands.Close命令绑定触发关闭时会先抛出携带CancelRoutedEventArgs的Closing事件若事件处理中设置Cancel true则取消关闭否则继续抛出Closed事件见 Tag.cs。事件Tag 定义了三个冒泡路由事件RoutingStrategy.Bubble均在 Tag.cs 中注册| 名称 | 说明 | 可取消 | | - | - | - | |Selected| 标签选中时触发 | 否 | |Closing| 标签关闭前触发携带CancelRoutedEventArgs可取消 | 是 | |Closed| 标签关闭后触发 | 否 |Closing/Closed之间的可取消差异是文档未直接点明但源码明确支持的Closing使用CancelRoutedEventArgs设置e.Cancel true即可阻止标签被关闭。这在实现最后一项不可删除需要二次确认等场景时非常实用void Tag_OnClosing(object sender, CancelRoutedEventArgs e) { if (ShouldPreventClose) e.Cancel true; }TagContainer标签专用容器除单标签外HandyControl 还提供了标签容器。需要特别说明的是官方文档中提到的TagPanel已被标记为即将在未来版本中移除官方建议改用功能更丰富的TagContainer来代替。迁移提示在当前仓库源码中已搜索不到TagPanel的实现其对应功能由 TagContainer.cs 完全承接。新项目应直接使用TagContainer。TagPanel已弃用文档保留| 属性 | 描述 | 默认值 | 备注 | | - | - | - | - | |ShowAddButton| 是否显示新增标签按钮 |false| 点击触发AddTagButtonClick事件 | |TagMargin| 标签边距 |Thickness(5)| || 事件 | 说明 | | - | - | |AddTagButtonClick| 点击新增标签按钮时触发 |官方文档给出的 TagPanel 用法示例如下供理解历史写法hc:TagPanel AddTagButtonClickTagPanel_OnAddTagButtonClick Margin32 OrientationHorizontal MaxWidth400 VerticalAlignmentCenter ShowAddButtonTrue hc:Tag ShowCloseButtonFalse Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter2}/ hc:Tag SelectableTrue Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter3}/ hc:Tag ShowCloseButtonFalse Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter4}/ hc:Tag Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter5}/ hc:Tag IsSelectedTrue SelectableTrue ShowCloseButtonFalse Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter4}/ hc:Tag Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter3}/ hc:Tag ShowCloseButtonFalse Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter2}/ hc:Tag IsSelectedTrue SelectableTrue Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter3}/ hc:Tag ShowCloseButtonFalse Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter4}/ hc:Tag Content{ex:Lang Key{x:Static langs:LangKeys.Text}, Converter{StaticResource StringRepeatConverter}, ConverterParameter5}/ /hc:TagPanelTagContainer推荐使用TagContainer继承自ItemsControl天然支持ItemsSource数据绑定、ItemContainerStyle项样式定制与虚拟化实现细节见 TagContainer.cs自动容器GetContainerForItemOverride()返回new Tag()即数据项会自动包装为 Tag 控件见 TagContainer.cs关闭联动删除容器监听Tag.ClosedEvent标签关闭后自动调用tag.Hide()隐藏并根据绑定方式从Items或ItemsSource对应集合中移除该项见 TagContainer.cs继承式关闭按钮ShowCloseButton是以FrameworkPropertyMetadataOptions.Inherits注册的附加属性容器统一设置后所有子 Tag 自动生效见 TagContainer.cs。静态标签用法参考仓库演示程序 TagDemo.xaml在TagContainer中直接声明一组 Taghc:TagContainer Margin11 MaxWidth420 Padding5 hc:Tag HeaderH hc:TitleElement.Background{DynamicResource PrimaryBrush} Margin5 ShowCloseButtonFalse Content标签一/ hc:Tag Margin5 SelectableTrue Content可选中标签/ hc:Tag Margin5 Content可关闭标签/ hc:Tag Margin5 IsSelectedTrue SelectableTrue Content选中态标签 hc:Tag.Header Image Source/Resources/Img/Avatar/avatar2.png/ /hc:Tag.Header /hc:Tag /hc:TagContainer数据绑定用法TagContainer的强项在于数据驱动。先定义一个TagCustomStyle将数据对象的属性映射到 Tag再通过ItemsSource绑定集合即可数据源集合可由 TagDemo 的 ViewModel 提供UserControl.Resources Style x:KeyTagCustomStyle BasedOn{StaticResource TagBaseStyle} TargetTypehc:Tag Setter PropertyContent Value{Binding Name}/ Setter PropertyMargin Value5/ Setter PropertyIsSelected Value{Binding IsSelected}/ /Style /UserControl.Resources hc:TagContainer ItemContainerStyle{StaticResource TagCustomStyle} Margin11 MaxWidth420 Padding5 ItemsSource{Binding DataList}/运行时点击标签的关闭按钮TagContainer会自动从DataList中移除对应数据项配合新增项按钮向集合Add新对象即可实现完整的标签增删管理演示中DockPanel内的TextBox与AddItemCmd命令即承担该职责见 TagDemo.xaml。默认样式与视觉状态Tag 的默认视觉样式定义在 TagBaseStyle.xaml其默认模板要点如下整体使用圆角BorderBorderCircular三列 Grid 布局左列 Header、中列内容、右列关闭按钮关闭按钮为ButtonIcon风格图标按钮使用DeleteGeometry路径鼠标悬停时切换为DeleteFillCircleGeometry并放大图标见 TagBaseStyle.xaml关闭按钮的可见性由ShowCloseButton属性通过Boolean2VisibilityConverter控制见 TagBaseStyle.xaml。样式触发器定义了三个核心视觉状态| 状态 | 效果 | | - | - | |IsMouseOver悬停 | 背景变为DarkMaskBrush遮罩色 | |IsSelected选中 | 背景变为主题色PrimaryBrush前景变为TextIconBrush| |IsEnabled false禁用 | 整体透明度降至 0.4 |其中IsSelected的主题色高亮效果是选中态在视觉上的直观体现配合Selectable属性即可实现点选高亮的标签筛选交互。容器样式 TagContainerBaseStyle 则使用WrapPanel作为 ItemsPanel 并启用FluidMoveBehavior位移动画标签增删时会产生平滑的补位过渡效果。样式最终通过 Tag.xaml 以隐式样式BasedOn继承方式注册到hc:Tag与hc:TagContainer引入 HandyControl 主题资源后即可全局生效无需手动指定Style。完整实践构建可增删的标签输入区结合上述 API 与 TagDemo.xaml 的演示模式一个典型的输入 标签列表场景可以这样组织界面布局上方TextBox输入标签文本下方TagContainer绑定ObservableCollectionstring新增标签按钮点击时将TextBox.TextAdd进集合并清空输入框删除标签无需额外代码——用户点击 Tag 关闭按钮后TagContainer自动从集合移除对应项并触发补位动画选中反馈为 Tag 设置SelectableTrue配合IsSelected触发器即可实现当前筛选标签的高亮标识。若需在删除前拦截例如确认弹窗在TagContainer上订阅冒泡的Closing事件并设置e.Cancel true即可无需改动容器源码。小结HandyControl 的 Tag 体系围绕选中与关闭两种交互构建Tag控件负责单标签的显示、选中与关闭事件TagContainer容器则负责布局、数据绑定与增删联动。对于历史文档中的TagPanel应使用TagContainer平滑迁移——后者在功能与数据绑定能力上完全覆盖前者。借助 TagBaseStyle.xaml 中的主题色触发器与补位动画开发者无需编写任何模板代码即可获得与 HandyControl 整体视觉风格一致的标签交互体验。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl PinBox PIN码框控件详解属性、事件与源码实现HandyControl PinBox PIN码框控件详解属性、事件与源码实现 PinBox 是 HandyControl 提供的一种密码框的另一种形式UI组件桌面应用HandyControl StepBar 步骤条控件详解属性、方法、事件与实战案例HandyControl StepBar 步骤条控件详解属性、方法、事件与实战案例 导读 StepBar步骤条是 HandyControl 中用于引导用户UI组件桌面应用HandyControl NotifyIcon 托盘图标控件完全指南属性、方法、事件与实战案例HandyControl NotifyIcon 托盘图标控件完全指南属性、方法、事件与实战案例 导读 本文围绕 HandyControl 提供的系统托盘图标控UI组件桌面应用上一篇如何用AI化学助手在5分钟内设计复杂分子合成路线终极指南来了下一篇如何快速使用Canvas-toBlob.js前端开发者的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考