UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载导读ContextMenuButton与ContextMenuToggleButton是 HandyControlHC在Button与ToggleButton基础上扩展的两个带菜单按钮控件。它们的使用方式与 WPF 原生Button、ToggleButton完全一致唯一的区别是额外提供了Menu属性——点击按钮即可弹出绑定的上下文菜单无需再手动编写Popup或监听鼠标事件。本文将以官方文档为主线结合仓库源码剖析其实现原理并通过 XAML/C# 示例说明在菜单绑定、右键菜单、TabControl 溢出按钮等真实场景下的用法。一、控件概览两种按钮一个Menu属性根据官方文档doc/source/handycontrol/extend_controls/contextMenuButton/index.mdHandyControl 提供了两个上下文菜单按钮控件基类说明ContextMenuButtonButton普通按钮点击后弹出上下文菜单ContextMenuToggleButtonToggleButton切换按钮选中/按下时弹出菜单取消选中时关闭菜单二者均位于HandyControl.Controls命名空间继承链简单清晰ContextMenuButton.cs 继承System.Windows.Controls.ButtonContextMenuToggleButton.cs 继承System.Windows.Controls.Primitives.ToggleButton它们对使用者的约定只有一个凡是Button/ToggleButton能写的地方这两个控件都能写只是多了一个名为Menu的属性来挂载ContextMenu。这意味着你可以像使用普通按钮一样处理Click事件、设置Command、绑定Content或模板同时获得点击弹出菜单的能力。二、核心源码解析Menu属性是如何工作的2.1 ContextMenuButton点击即弹出ContextMenuButton.cs 的实现非常精简整个类只有 22 行using System.Windows.Controls; namespace HandyControl.Controls; /// summary /// 带上下文菜单的按钮 /// /summary public class ContextMenuButton : Button { public ContextMenu Menu { get; set; } protected override void OnClick() { base.OnClick(); if (Menu ! null) { Menu.PlacementTarget this; Menu.IsOpen true; } } }关键点有三Menu是普通 CLR 属性而非依赖属性从源码看Menu直接声明为public ContextMenu Menu { get; set; }没有注册为DependencyProperty。因此它天然支持 XAML 属性赋值和 C# 赋值但不支持直接对它做Binding/动画/样式触发。重写OnClick而非Click事件OnClick是ButtonBase提供的虚方法任何触发Click的途径鼠标点击、键盘空格、RaiseEvent都会走这里保证菜单弹出的行为与按钮点击完全同步。先执行基类逻辑再弹菜单base.OnClick()先行调用确保Click事件正常派发后才将Menu的PlacementTarget指向按钮自身this并设置IsOpen true打开菜单。PlacementTarget this的作用是让ContextMenu以该按钮为锚点定位弹出这正是点击按钮弹出菜单效果的位置基础。2.2 ContextMenuToggleButton选中打开、取消选中关闭ContextMenuToggleButton.cs 则在ToggleButton的基础上加入了开关联动逻辑using System.Windows.Controls; using System.Windows.Controls.Primitives; namespace HandyControl.Controls; /// summary /// 带上下文菜单的切换按钮 /// /summary public class ContextMenuToggleButton : ToggleButton { public ContextMenu Menu { get; set; } protected override void OnClick() { base.OnClick(); if (Menu ! null) { if (IsChecked true) { Menu.PlacementTarget this; Menu.IsOpen true; } else { Menu.IsOpen false; } } } }与普通版相比它增加了对IsChecked的判断点击后IsChecked true按钮处于选中态时将菜单锚定到自身并打开再次点击使IsChecked false时直接关闭菜单。这样菜单的打开/关闭状态与按钮的选中/未选中状态一一对应天然支持再次点击收起的交互模型非常适合做工具栏下拉、筛选面板触发器这类带状态的控件。2.3 Menu 属性与右键菜单的区别需要特别说明的是ContextMenuButton.Menu是 HC 为这两个控件新增的专用属性它不是WPF 原生FrameworkElement.ContextMenu属性。原生ContextMenu是右键弹出通过鼠标右键触发ContextMenuService而Menu属性则是左键单击按钮即弹出。二者可以同时存在且互不干扰Menu控制左键点击行为原生ContextMenu控制右键行为。三、XAML 实战点击按钮弹出菜单3.1 最小示例在 XAML 中引入 HC 命名空间后即可直接使用Window ... xmlns:hchttps://handyorg.github.io/handycontrol StackPanel !-- 普通按钮点击弹出菜单 -- hc:ContextMenuButton Content更多操作 Width120 Height32 hc:ContextMenuButton.Menu ContextMenu MenuItem Header复制 / MenuItem Header粘贴 / MenuItem Header删除 IsEnabledFalse / Separator / MenuItem Header设置 / /ContextMenu /hc:ContextMenuButton.Menu /hc:ContextMenuButton !-- 切换按钮选中时弹出菜单再次点击收起 -- hc:ContextMenuToggleButton Content筛选 Width120 Height32 Margin0,12,0,0 hc:ContextMenuToggleButton.Menu ContextMenu MenuItem Header全部 IsCheckedTrue / MenuItem Header已完成 / MenuItem Header未完成 / /ContextMenu /hc:ContextMenuToggleButton.Menu /hc:ContextMenuToggleButton /StackPanel /Window由于Menu是 CLR 属性XAML 属性元素语法hc:ContextMenuButton.Menu与属性赋值语法均可使用。注意MenuItem的IsChecked在菜单弹出后即可通过命令绑定进行联动。3.2 通过命令绑定菜单项菜单项与普通ContextMenu一样支持Command绑定可以配合 MVVM 使用hc:ContextMenuButton Content操作 hc:ContextMenuButton.Menu ContextMenu MenuItem Header打开 Command{Binding OpenCommand} CommandParameterfile1 / MenuItem Header另存为 Command{Binding SaveAsCommand} / /ContextMenu /hc:ContextMenuButton.Menu /hc:ContextMenuButton此时菜单项的数据上下文会继承自按钮所在的可视树Command绑定到 ViewModel 中的ICommand即可正常触发。由于Menu不是依赖属性若需要通过DataTrigger/Style动态切换菜单内容建议在代码后台为Menu属性赋值或将菜单项列表通过ContextMenu.ItemsSource绑定ContextMenu ItemsSource{Binding MenuItems} ContextMenu.ItemTemplate DataTemplate MenuItem Header{Binding Header} Command{Binding Command} / /DataTemplate /ContextMenu.ItemTemplate /ContextMenu3.3 C# 代码动态创建在代码中同样可以动态创建并挂载菜单using HandyControl.Controls; using System.Windows.Controls; var menu new ContextMenu(); menu.Items.Add(new MenuItem { Header 新建 }); menu.Items.Add(new MenuItem { Header 编辑 }); var button new ContextMenuButton { Content 动态菜单, Menu menu };四、仓库内部的实际应用TabControl 溢出按钮这两个控件并非为演示而生的玩具控件——在 HandyControl 自身的控件库中ContextMenuToggleButton就被用作TabControl的溢出按钮PART_OverflowButton。在 TabControlBaseStyle.xaml 中可以看到hc:ContextMenuToggleButton x:NamePART_OverflowButton VisibilityCollapsed Padding0 hc:IconElement.Width14 HeightAuto BorderThickness0 Background{DynamicResource SecondaryRegionBrush} Style{StaticResource ToggleButtonIconTransparent} hc:IconSwitchElement.Geometry{StaticResource DownGeometry} hc:IconSwitchElement.GeometrySelected{StaticResource UpGeometry} /该按钮与同一个样式文件中的TabItemMenu关闭当前页 / 关闭全部 / 关闭其他页配合构成了 TabControl 标签溢出时的下拉菜单体验。这也印证了ContextMenuToggleButton的几个实用设计点可以无 Content 使用作为图标按钮Content留空通过hc:IconElement/hc:IconSwitchElement附加属性设置图标DownGeometry与UpGeometry在选中/未选中态间切换可与 HC 样式体系无缝融合直接套用ToggleButtonIconTransparent样式与SecondaryRegionBrush等主题画刷外观与其他 HC 控件保持一致以x:Name命名约定暴露为模板部件TabControl的模板代码TabControl.cs可通过该名称定位溢出按钮并注入菜单。如果你需要实现类似的标题栏下拉分组操作等需求完全可以照搬这种ContextMenuToggleButton 菜单资源 图标附加属性的组合方式。五、配合 HC 菜单样式从 Default 到 Small弹出的菜单本身会套用 HandyControl 的ContextMenu主题样式。仓库在 ContextMenu.xaml 中提供了两种开箱即用的菜单外观Style BasedOn{StaticResource ContextMenuBaseStyle} TargetTypeContextMenu/ Style x:KeyContextMenu.Small BasedOn{StaticResource ContextMenuBaseStyle} TargetTypeContextMenu Setter Propertyhc:MenuAttach.ItemPadding Value6,0 / Setter Propertyhc:MenuAttach.ItemMinHeight Value20 / Setter Propertyhc:MenuAttach.PopupVerticalOffset Value-3 / Setter Propertyhc:MenuAttach.PopupHorizontalOffset Value6 / /Style未指定x:Key的默认样式所有ContextMenu自动获得 HC 的圆角、阴影、主题画刷等统一外观ContextMenu.Small通过hc:MenuAttach附加属性将菜单项内边距压缩为6,0、最小高度降为20并微调弹出偏移量适合工具栏、右键快捷菜单等紧凑场景。给ContextMenuButton.Menu挂载的菜单同样可以指定该样式hc:ContextMenuButton Content紧凑菜单 hc:ContextMenuButton.Menu ContextMenu Style{StaticResource ContextMenu.Small} MenuItem Header项一 / MenuItem Header项二 / /ContextMenu /hc:ContextMenuButton.Menu /hc:ContextMenuButtonDemo 工程中 MenuDemo.xaml 对 Default 与 Small 两种菜单样式做了并排对比展示可供查看实际渲染效果。六、适用场景与注意事项适用场景工具栏下拉菜单用ContextMenuToggleButton实现选中即展开、再点即收起的筛选/排序面板列表/卡片行内操作用ContextMenuButton替代⋯省略号按钮点击后弹出编辑、删除等操作项标签页溢出管理仿照 HCTabControl的PART_OverflowButton为可折叠区域提供展开菜单MVVM 菜单分发菜单项绑定Command与CommandParameter保持视图与逻辑分离。注意事项Menu是普通 CLR 属性不支持直接Binding如需动态内容请改用ContextMenu.ItemsSource绑定或代码赋值ContextMenuToggleButton的菜单开合与IsChecked强绑定若在外部代码直接设置IsChecked不会触发OnClick需显式打开/关闭Menu左键点击弹出的是Menu属性指定的菜单若同时需要右键菜单可另设原生ContextMenu属性两者互不冲突Menu弹出位置以按钮自身为PlacementTarget自动计算一般无需手动设置Placement。结语ContextMenuButton与ContextMenuToggleButton是 HandyControl 中小而美的实用控件以几乎为零的学习成本为普通按钮叠加了点击弹出上下文菜单的能力。从源码看其实现只有一次OnClick重写与PlacementTarget/IsOpen的赋值却覆盖了普通弹出与开关联动两种交互模型而它被TabControl用作溢出按钮这一事实也说明了这类控件在真实控件库中的可靠性。结合本文的 XAML 示例与样式说明你可以在自己的 WPF 项目中快速落地同样的交互体验。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐Aspire VS Code 扩展签名与 Marketplace 发布流程从 PKCS7 签名文件到 vsce publish 的完整实践Aspire VS Code 扩展签名与 Marketplace 发布流程从 PKCS 7 签名文件到 vsce publish 的完整实践 本文基于 AspUI组件桌面应用ant-design 按钮分组兼容用法实战基于 Button.Group 的调试示例与源码解析ant design 按钮分组兼容用法实战基于 Button.Group 的调试示例与源码解析 本篇技术指南聚焦 ant design 组件库中 Button前端UI组件设计系统Ant Design Dropdown.Button 组合按钮实战左侧主按钮与右侧功能菜单的完整用法解析Ant Design Dropdown.Button 组合按钮实战左侧主按钮与右侧功能菜单的完整用法解析 Ant Design 的 Dropdown.Butt前端UI组件设计系统上一篇猫抓让视频资源捕获技术走向民主化的开源方案下一篇Hyperledger Fabric权限管理实战加密服务提供者(BCCSP)的密码学实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考