news 2026/3/27 22:26:18

WPF + HandyControl 的高颜值上位机框架,让工业软件好看又好用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
WPF + HandyControl 的高颜值上位机框架,让工业软件好看又好用

前言

工业软件开发中,上位机界面不仅是操作入口,更是人机交互的核心载体。一个结构清晰、响应流畅且视觉统一的 UI 框架,能显著提升系统可用性与开发效率。

本文介绍的 WPF 上位机框架,围绕这一目标开发——它不追求大而全,而是聚焦于实用、可维护与可扩展,为后续功能模块的快速集成打下坚实基础。

项目介绍

项目是一个基于 WPF 的上位机 UI 基础框架,主要用于工业监控、设备管理等场景的桌面应用开发。界面采用无边框窗口设计,支持自定义标题栏拖动、最小化、最大化和关闭操作,整体风格简洁现代。左侧为可折叠的导航菜单,右侧为动态内容区域,通过数据绑定实现视图切换。

整个框架以"配置驱动"和"命令响应"为核心思想,避免硬编码逻辑,便于后期功能迭代。

项目功能

1、支持多级菜单项的动态加载与展示,菜单结构由 ViewModel 定义,前端通过 MenuItemControl 用户控件渲染;

2、菜单可一键折叠/展开,折叠状态下保留图标式快捷入口(如电源管理、目标管理、手动测试、自动化管理等);

3、窗口控制完全自定义,包括拖动、最小化、最大化和关闭,适配无边框窗口体验;

4、内容区域通过 ContentPresenter 绑定 CurrentView,实现页面的动态切换;

5、底部提供 Settings 入口,支持系统配置页面的快速接入。

项目特点

该框架"干净"、轻量"与"规范"。

一方面,它没有引入复杂的第三方 UI 库堆砌,而是基于 HandyControl 提供的基础控件进行合理定制;

另一方面,严格遵循 MVVM 模式,使用 CommunityToolkit.Mvvm 实现命令绑定、属性通知与依赖注入,使业务逻辑与界面彻底解耦。另外,菜单的显示与隐藏通过 IsMenuCollapsed 属性控制,并配合 BooleanToGridLengthConverter 实现平滑布局变化,兼顾性能与用户体验。

项目技术

1、界面层采用 WPF 开发,结合 HandyControl 提供的 SimplePanel、现代化样式组件,快速搭建高颜值界面;

2、状态管理与命令处理则依托 CommunityToolkit.Mvvm,通过 ObservableObject、RelayCommand 等工具类简化 ViewModel 编写。

3、菜单数据结构以树形模型组织,支持递归渲染;窗口行为(如拖动)通过代码后台事件处理,保持 XAML 的干净。

4、整个架构未使用 Prism 等重型框架,更适合中小型项目或作为模块化系统的 UI 壳层。

项目代码

public partialclassMenuItem : ObservableObject { [ObservableProperty] privatestring name = string.Empty; [ObservableProperty] privatestring icon = string.Empty; [ObservableProperty] privatebool isExpanded; [ObservableProperty] privatebool isSelected; [ObservableProperty] privateint level = 0; public Type ViewType { get; set; } public ObservableCollection<MenuItem> Children { get; set; } publicbool HasChildren => Children?.Count > 0; publicbool IsExpanded { get=>isExpanded; set=>SetProperty(ref isExpanded,value); } publicstring Name { get; set; } publicstring Icon { get; set; } publicbool IsSelected { get => isSelected; set => SetProperty(ref isSelected,value); } public MenuItem Parent { get; set; } publicint Level { get => level; set => SetProperty(ref level, value); } // 设置子项的父级引用和层级 public void SetChildrenParent() { if (Children != null) { foreach (var child in Children) { child.Parent = this; child.Level = this.Level + 1; child.SetChildrenParent(); } } } // 获取缩进边距 public System.Windows.Thickness GetIndentMargin() { returnnew System.Windows.Thickness(Level * 15, 0, 0, 0); } }

项目效果

顶部为深灰色标题栏,左侧菜单默认展开,包含完整文字菜单项;点击左上角"≡"按钮可折叠菜单,此时仅显示图标快捷入口,节省横向空间。所有按钮均有悬停反馈,滚动条经过美化,整体视觉协调。

内容区域随菜单选择动态更新,过渡自然,无闪烁或卡顿。这种设计既满足工程师对功能密度的需求,又兼顾操作舒适性。

系统主页

菜单展示

菜单折叠

项目源码

项目核心XAML 中通过 hc:SimplePanel 布局,利用 DataBinding 将菜单数据、当前视图、窗口命令等与 ViewModel 关联。菜单项由 MenuItemControl 用户控件递归呈现,支持任意层级。

命令如 ToggleMenuCommand、CloseWindowCommand 等均在 ViewModel 中定义,通过 RelayCommand 实现。

后期计划包括:

1、引入页面缓存机制,避免重复创建视图;

2、集成飞机相关仪表控件(如姿态仪、高度表),用于特定行业场景的可视化展示。

为了防止丢失,可以在评论区留言关键字「上位机框架」,即可获取完整源码地址。

总结

这个 WPF 上位机框架虽小,却体现了现代桌面应用开发的关键理念:结构清晰、逻辑分离、界面友好。大家可在此基础上快速挂载业务模块,无论是工业监控、实验室设备管理,还是专用 HMI 场景,都能高效启动。也可以加入页面缓存和专业仪表控件,其适用范围将进一步拓宽。对于希望摆脱传统 WinForm 或混乱 WPF 代码的团队来说,这是一个值得参考的项目。

关键词

#WPF、#HandyControl、#CommunityToolkit.Mvvm、#上位机、#MVVM、#菜单管理、#UI框架、#工业软件、#无边框窗口、#动态视图

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/20 9:42:48

5分钟搞定B站缓存转换:零技术门槛的完整解决方案

还在为B站缓存视频无法播放而烦恼吗&#xff1f;m4s-converter工具采用先进的GPAC MP4Box技术&#xff0c;让转换过程变得前所未有的简单。作为一款专为普通用户设计的B站缓存转换工具&#xff0c;它能够将复杂的m4s文件转换为通用的MP4格式&#xff0c;支持全平台设备播放。 【…

作者头像 李华
网站建设 2026/3/27 17:16:23

番茄小说本地化保存解决方案深度剖析

番茄小说本地化保存解决方案深度剖析 【免费下载链接】fanqienovel-downloader 下载番茄小说 项目地址: https://gitcode.com/gh_mirrors/fa/fanqienovel-downloader 在数字化阅读日益普及的今天&#xff0c;如何确保心仪的小说内容能够长久保存并随时随地阅读&#xff…

作者头像 李华
网站建设 2026/3/27 12:10:53

Calibre-Web图书元数据插件完整配置教程:解决新版API缺失问题

Calibre-Web图书元数据插件完整配置教程&#xff1a;解决新版API缺失问题 【免费下载链接】calibre-web-douban-api 新版calibre-web已经移除douban-api了&#xff0c;添加一个豆瓣api实现 项目地址: https://gitcode.com/gh_mirrors/ca/calibre-web-douban-api 随着Cal…

作者头像 李华
网站建设 2026/3/27 16:54:02

驾驶证换证提醒:到期前自动拨打语音通知

驾驶证换证提醒&#xff1a;到期前自动拨打语音通知 在城市交通管理的日常运作中&#xff0c;一个看似微小却影响深远的问题正悄然浮现——每年有数千万驾驶人面临驾驶证到期未及时更换的情况。这不仅可能导致个人出行受阻&#xff0c;还可能因“无证驾驶”触碰法律红线。尽管各…

作者头像 李华
网站建设 2026/3/26 9:06:11

抖音下载工具终极指南:无水印高清视频与直播一键获取

抖音下载工具终极指南&#xff1a;无水印高清视频与直播一键获取 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 还在为错过精彩抖音内容而懊恼吗&#xff1f;&#x1f914; 那些转瞬即逝的优质视频、无法重…

作者头像 李华
网站建设 2026/3/27 15:54:03

搭建AI Agent开发环境:必要工具与框架

搭建AI Agent开发环境:必要工具与框架 关键词:AI Agent、开发环境、必要工具、框架、搭建 摘要:本文旨在详细介绍搭建AI Agent开发环境所需的必要工具与框架。通过深入剖析每个环节,从背景知识的铺垫,到核心概念、算法原理的讲解,再到实际的项目实战案例分析,为开发者提…

作者头像 李华