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 代码的团队来说，这是一个值得参考的项目。