WPF + LiveCharts 实战开发工业设备监控看板

PLC技术网抖音群

前言

随着工业4.0和智能制造的推进，自动化设备监控系统在生产管理中扮演着越来越重要的角色。基于WPF开发的数字看板系统，凭借其强大的UI表现力和数据绑定能力，成为工业监控领域的理想选择。

本文将介绍如何使用WPF开发一个完整的自动化设备数字看板，涵盖XAML编程、数据绑定、自定义组件、MVVM架构以及第三方图表库的使用等关键技术点。

效果预览

一、核心技术1、XAML的UI编程

使用声明式语法构建UI界面

支持数据绑定、样式模板和动画效果

实现响应式布局和视觉效果定制

2、数据驱动开发模式

从事件驱动转向数据驱动的编程范式

使用INotifyPropertyChanged接口实现属性变更通知

通过Binding标记扩展实现UI与数据的自动同步

3、自定义组件开发

创建可重用的UserControl

使用DependencyProperty实现属性系统

支持样式、模板和动画的自定义

4、MVVM分层架构

Model：数据模型层

View：UI展示层

ViewModel：业务逻辑层

通过数据绑定实现三层的解耦

5、第三方图表集成

使用LiveCharts实现专业级数据可视化

支持折线图、饼图、仪表盘等多种图表类型

提供丰富的自定义选项和动画效果

二、组件实现1、仪表盘组件(Meter.xaml)

<UserControl x:Class="DashBoard.Components.Meter"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Canvas Name="canvas"/>
        <Path Name="path_back" StrokeThickness="5" Stroke="#32FFFFFF"/>
        <Path Name="path_value" StrokeThickness="5" Stroke="#1FDCF5"/>
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,10">
            <TextBlock Text="{Binding Value}" Foreground="#1FDCF5" FontSize="26"/>
            <TextBlock Text="{Binding Unit}" Foreground="#3FFF"/>
        
    

2、水波进度组件(WaterProgress.xaml)

<UserControl x:Class="DashBoard.Components.WaterProgress"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:4" From="0" To="-166" 
                                     Storyboard.TargetName="tt1" 
                                     Storyboard.TargetProperty="X" 
                                     RepeatBehavior="Forever"/>
                
            
        
    
    <Viewbox>
        <Grid>
            <Border Width="166" Height="166" CornerRadius="90">
                <Border.Clip>
                    <EllipseGeometry Center="83,83" RadiusX="83" RadiusY="83"/>
                
                <Canvas>
                    <Path Data="M0 10A80 80 0 0 1 83 10A80 80 0 0 0 166 10..." 
                          Fill="#4C0B3D90">
                        <Path.RenderTransform>
                            <TranslateTransform X="-10" x:Name="tt1"/>
                        
                    
                
            
        
    

三、主界面实现1、整体布局结构

<Window x:Class="DashBoard.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="自动化生产车间设备监测中心" Height="700" Width="1300">
    <Grid ClipToBounds="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="350"/>
            <RowDefinition/>
        
        
        
        <Grid Grid.Row="0">
            
        
        
        
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="700"/>
                <ColumnDefinition/>
            
            
            
            <Border Grid.Column="0">
                <Image Source="../Assets/Images/Devices/d_2.png"/>
            
            
            
            <Border Grid.Column="1">
                <ItemsControl ItemsSource="{Binding ItemList}">
                    
                
            
            
            
            <Grid Grid.Column="2">
                
            
        
        
        
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition Width="2*"/>
            
            
            
            <GroupBox Grid.Column="0" Header="异常报警">
                <ItemsControl ItemsSource="{Binding AlarmList}"/>
            
            
            
            <GroupBox Grid.Column="1" Header="能效数据">
                <lc:PieChart Series="{Binding EnergySeries}"/>
            
            
            
            <GroupBox Grid.Column="2" Header="生产效率">
                <Grid>
                    <c:Meter Value="45" Unit="件/分钟"/>
                
            
            
            
            <GroupBox Grid.Column="3" Header="产量统计">
                <lc:CartesianChart Series="{Binding ProductionSeries}"/>
            
        
    

2、MVVM架构实现

// ViewModel基类
publicclassViewModelBase : INotifyPropertyChanged
{
    publicevent PropertyChangedEventHandler PropertyChanged;
    
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
// 主界面ViewModel
publicclassMainViewModel : ViewModelBase
{
    public ObservableCollection ItemList { get; } = new();
    public ObservableCollection AlarmList { get; } = new();
    
    public SeriesCollection EnergySeries { get; } = new();
    public SeriesCollection ProductionSeries { get; } = new();
    
    public MainViewModel()
    {
        // 初始化数据
        InitializeData();
    }
    
    private void InitializeData()
    {
        // 添加示例设备数据
        ItemList.Add(new DeviceItem { Index = 1, Status = "运行中" });
        
        // 添加示例报警数据
        AlarmList.Add(new AlarmItem { 
            Index = 1, 
            Time = DateTime.Now.ToString(), 
            Message = "设备温度过高", 
            Status = "警告"
        });
        
        // 初始化图表数据
        EnergySeries.Add(new PieSeries { Values = new ChartValues<double> { 30, 40, 20, 10 } });
    }
}

四、实现细节1、数据绑定机制

使用

{Binding Path=PropertyName}

实现简单绑定

通过

RelativeSource

实现祖先元素属性绑定

使用

ValueConverter

实现数据格式转换

2、自定义组件开发要点

实现

DependencyProperty

以支持属性系统

处理

SizeChanged

事件实现自适应布局

使用

Path

和

Geometry

绘制复杂图形

3、LiveCharts集成技巧

配置CartesianChart和PieChart基础属性

自定义Series的Fill和Stroke属性

实现动态数据更新和动画效果

4、MVVM最佳实践

使用

Command

模式处理用户交互

通过

ICommand

接口实现按钮命令绑定

使用

RelayCommand

简化命令实现

总结

本文通过一个完整的自动化设备数字看板项目，详细介绍了WPF开发工业监控系统的关键技术。从基础的XAML界面设计到高级的MVVM架构实现，涵盖了数据绑定、自定义组件、动画效果和第三方图表集成等多个方面。

通过实践证明，WPF凭借其强大的UI表现力和数据驱动能力，非常适合开发复杂的企业级监控系统。开发者可以根据实际需求，灵活运用本文介绍的技术要点，构建出功能完善、性能优越的数字看板系统。

关键词

#WPF、#数字看板、#XAML、#数据绑定、#MVVM、#自定义组件、#LiveCharts、#工业监控、#仪表盘、#水波进度

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。也可以加入微信公众号[DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

作者：张德长

出处：cnblogs.com/zhangdezhang/p/17879392.html

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！

END

方便大家交流、资源共享和共同成长

纯技术交流群，需要加入的小伙伴请扫码，并备注【加群】

推荐阅读

C# 实现三种方式的模拟按键

WinForm 跨线程操作 UI 控件封装实践

WPF + Halcon 开发的机器视觉算法平台

WinForm 开发的智能停车场管理系统（岗亭端）

WinForm + SQLite 实现轻量级库存管理系统

C# 自定义特性实现 DataGridView 全自动列生成

C# 工业开发必备：精选 4 个最强 Modbus 通信库

WPF 工业大数据采集维保平台：工业4.0时代的智能运维中枢

.NET 7.0 + Vue 3 开源跨平台图形化工作流引擎，适配多终端

告别重复造轮子！WPF 通用上位机开发框架，快速搭建工业监控系统

.NET 9 可视化工作流引擎！纯血开源，支持数十种数据库，开箱即用

基于 WinForm 的智能温控系统，运用 Modbus协议实现高效上位机控制

惊艳！这个开源框架用 HTML5/CSS3/JavaScript 轻松开发 WinForm 炫酷界面

觉得有收获？不妨分享让更多人受益

关注「DotNet技术匠」，共同提升技术实力

收藏

点赞

分享

在看

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！