云栈社区»论坛 › 开源实战「 OpenSource 」 › WPF工业自动化UI开源框架：MVVM架构与HMI界面实战应用 ...

458 积分	0 好友	66 主题

发消息

[C#/.NET] WPF工业自动化UI开源框架：MVVM架构与HMI界面实战应用

发表于昨天 18:17 | 查看: 3| 回复: 0

工业自动化领域，人机交互界面（HMI）不仅是操作人员与设备之间的桥梁，更是提升生产效率、保障系统稳定运行的关键环节。随着智能制造的推进，传统按钮式或静态界面已难以满足现代工厂对可视化、实时性和美观性的需求。

WPF凭借其矢量图形渲染、灵活布局和强大的数据绑定能力，已成为开发新一代工业自动化软件界面的主流选择。本文将介绍一个面向该场景的开源WPF项目，它为解决工控UI设计难题提供了一个高效的参考方案，尤其适合需要构建稳定、美观上位机系统的云原生/IaaS场景。

项目介绍

该项目是一个专为工业自动化人机界面设计的WPF开源项目。其整体界面风格简洁专业，功能模块深度贴合产线测试、设备监控等典型工业场景，例如PLC控制、压力测试、激光扫描、内阻检测等。

界面采用全屏无边框设计，完美适配1920×1080分辨率的工业触控屏，可直接作为中控系统或测试工作站的前端原型使用。

项目功能

全屏无边框体验：启动即全屏最大化，隐藏系统标题栏，并提供自定义的窗口控制按钮（最小化/关闭）。
模块化导航：左侧导航菜单集成了“PLC控制”、“激光单元”、“内阻测试”、“站节拍延迟”、“瞬时力检测”等多个工业功能模块。
动态页面加载：点击菜单项后，右侧内容区域通过Frame动态加载对应的功能页面，实现了流畅的模块化切换。
实时状态栏：底部状态栏实时显示当前日期与时间，并动态匹配图标，便于操作记录与审计追溯。
多语言支持：支持界面语言切换，以适应多语种产线环境的需求。
主题切换：内置深色与浅色主题切换功能，满足不同光照环境下的可视性与操作舒适度。
安全规范布局：界面布局固定且信息层级清晰，有效避免误操作，符合工业安全规范。

项目特点

场景化设计：功能命名与界面布局均源于实际产线需求，具有高度的实用性。
现代化视觉：巧妙运用圆角、渐变、阴影等现代UI设计元素，在保持专业感的同时显著提升了视觉体验。
资源集中管理：所有文本、颜色、图标均通过DynamicResource进行管理，极大地方便了后期的维护与本地化工作。
操作逻辑严谨：导航菜单使用RadioButton实现单选逻辑，确保操作焦点唯一，有效降低了误触风险。

项目技术

技术栈：基于.NET框架的WPF进行开发，使用XAML编写声明式界面。
架构模式：采用经典的MVVM架构，主窗口通过绑定TimeViewModel实现时间的自动刷新，这种模式在构建复杂、可维护的前端框架/工程化应用中优势明显。
资源管理：通过ResourceDictionary集中管理样式、主题色、多语言资源及几何图标，实现关注点分离。
页面导航：利用Frame与Page实现无刷新的页面导航，提升了系统响应速度与用户体验。
控件定制：通过自定义控件模板（如ModernButtonTemplate、ToggleButtonStyle）统一了整套界面的交互风格。

项目代码示例

以下代码展示了如何根据当前主题初始化控件状态，以及实现平滑的菜单展开/收起动画：

private void InitializeTheme(){
    try
    {
        // 根据当前主题设置ToggleButton状态
        Themes.IsChecked = ThemesController.CurrentTheme == ThemesController.ThemeTypes.Light;
        System.Diagnostics.Debug.WriteLine($"Theme initialized: {ThemesController.CurrentTheme}");
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine($"Theme initialization error: {ex.Message}");
    }
}

private void MenuButton_Click(object sender, RoutedEventArgs e){
    var widthAnimation = new DoubleAnimation
    {
        From = menuBoard.Width,
        To = IsMenuExpanded ? 0 : 250,
        Duration = TimeSpan.FromMilliseconds(1000), // 增加动画持续时间
        EasingFunction = new SineEase { EasingMode = EasingMode.EaseOut } // 使用 SineEase 使动画更平滑
    };
    Storyboard.SetTarget(widthAnimation, menuBoard);
    Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(FrameworkElement.WidthProperty));
    var storyboard = new Storyboard();
    storyboard.Children.Add(widthAnimation);
    storyboard.Begin();
    IsMenuExpanded = !IsMenuExpanded; // 切换状态
}