探索C# WPF MVVM大屏看板3D立体可视化大屏监控源码

C#_WPF_MVVM大屏看板3D立体可视化大屏监控源码 1WPF编程设计 2自定义工业控件设计 3数据库设计 4最原始的MVVM架构设计利于基础学习 5典型三层架构设计BLL - DLL - Model 6数据库链接可配置化 7带数据库脚本 注意 此项目主要是展示设计框架 只有第一个页签的大屏可视化 后面页签暂时没有相应的采集功能在当今数字化时代大屏看板可视化对于数据的直观展示至关重要。今天就来聊聊这个基于C# WPF MVVM的大屏看板项目它不仅有3D立体可视化效果还包含了不少值得学习的技术点。WPF编程设计WPFWindows Presentation Foundation以其强大的图形渲染能力和灵活的布局系统为大屏看板的界面设计提供了绝佳支持。例如在XAML文件中定义界面元素就十分便捷Window x:ClassYourNamespace.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml Title大屏看板 Height600 Width800 Grid !-- 这里添加各种可视化控件比如图表、文本显示区域等 -- TextBlock Text欢迎来到大屏监控 FontSize24 HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid /Window这里通过定义了主窗口作为布局容器用于显示文本。这种声明式的语法使得界面设计与逻辑代码分离便于维护和扩展。自定义工业控件设计对于工业领域的大屏看板常常需要一些独特的自定义控件。比如模拟仪表、进度条等具有工业风格的控件。在WPF中可以通过继承Control类并重写相关方法来创建自定义控件。public class CustomIndustrialMeter : Control { static CustomIndustrialMeter() { DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomIndustrialMeter), new FrameworkPropertyMetadata(typeof(CustomIndustrialMeter))); } // 定义依赖属性用于绑定数据来控制仪表显示 public double MeterValue { get { return (double)GetValue(MeterValueProperty); } set { SetValue(MeterValueProperty, value); } } public static readonly DependencyProperty MeterValueProperty DependencyProperty.Register(MeterValue, typeof(double), typeof(CustomIndustrialMeter), new PropertyMetadata(0.0)); }上述代码创建了一个简单的自定义工业仪表控件通过依赖属性MeterValue来绑定数据实现动态显示仪表数值。数据库设计数据库在大屏看板项目中扮演着存储数据的关键角色。合理的数据库设计能确保数据的高效存储和查询。例如设计一个用于存储监控数据的数据库表CREATE TABLE MonitorData ( Id INT PRIMARY KEY IDENTITY(1,1), SensorName NVARCHAR(50), SensorValue DECIMAL(18,2), RecordTime DATETIME );这个表结构记录了传感器名称、传感器数值以及记录时间简单清晰便于后续的数据处理和展示。最原始的MVVM架构设计利于基础学习MVVMModel - View - ViewModel架构使得代码的可测试性和可维护性大大提高。在这个项目中最原始的MVVM架构可以这样理解Model代表数据模型例如上述数据库中的MonitorData表对应的实体类public class MonitorDataModel { public int Id { get; set; } public string SensorName { get; set; } public decimal SensorValue { get; set; } public DateTime RecordTime { get; set; } }View就是XAML编写的界面。ViewModel作为桥梁连接View和Model。比如public class MainViewModel : INotifyPropertyChanged { private MonitorDataModel _currentData; public MonitorDataModel CurrentData { get { return _currentData; } set { _currentData value; OnPropertyChanged(nameof(CurrentData)); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }这里MainViewModel通过实现INotifyPropertyChanged接口当CurrentData属性变化时通知View更新显示。典型三层架构设计BLL - DLL - Model三层架构将应用程序分为表示层UI、业务逻辑层BLL和数据访问层DAL这里用DLL表示数据访问库以及数据模型层Model。BLL处理业务逻辑例如计算传感器数据的平均值等。public class MonitorDataBLL { private readonly MonitorDataDLL _dataDLL; public MonitorDataBLL() { _dataDLL new MonitorDataDLL(); } public ListMonitorDataModel GetLastHourData() { var currentTime DateTime.Now; var oneHourAgo currentTime.AddHours(-1); return _dataDLL.GetDataByTimeRange(oneHourAgo, currentTime); } }DLL负责与数据库交互执行SQL查询等操作。public class MonitorDataDLL { private readonly string _connectionString; public MonitorDataDLL() { // 这里从配置文件获取连接字符串后面会讲配置化 _connectionString ConfigurationManager.ConnectionStrings[MonitorDB].ConnectionString; } public ListMonitorDataModel GetDataByTimeRange(DateTime start, DateTime end) { var result new ListMonitorDataModel(); using (var connection new SqlConnection(_connectionString)) { var query SELECT Id, SensorName, SensorValue, RecordTime FROM MonitorData WHERE RecordTime BETWEEN Start AND End; using (var command new SqlCommand(query, connection)) { command.Parameters.AddWithValue(Start, start); command.Parameters.AddWithValue(End, end); connection.Open(); using (var reader command.ExecuteReader()) { while (reader.Read()) { var data new MonitorDataModel { Id reader.GetInt32(0), SensorName reader.GetString(1), SensorValue reader.GetDecimal(2), RecordTime reader.GetDateTime(3) }; result.Add(data); } } } } return result; } }Model前面已经介绍过是数据的实体表现。数据库链接可配置化为了方便部署和适应不同环境数据库连接字符串的可配置化很重要。在项目的App.config文件中可以这样配置configuration connectionStrings add nameMonitorDB connectionStringData SourceYOUR_SERVER_NAME;Initial CatalogYOUR_DATABASE_NAME;User IDYOUR_USERNAME;PasswordYOUR_PASSWORD providerNameSystem.Data.SqlClient/ /connectionStrings /configuration在代码中通过ConfigurationManager.ConnectionStrings[MonitorDB].ConnectionString获取连接字符串这样在不同环境下只需修改配置文件而无需修改代码。带数据库脚本项目提供数据库脚本方便快速搭建数据库环境。除了前面创建表的脚本还可能包含插入初始数据等脚本。例如INSERT INTO MonitorData (SensorName, SensorValue, RecordTime) VALUES (温度传感器, 25.5, GETDATE());这个脚本向MonitorData表插入了一条温度传感器的数据。C#_WPF_MVVM大屏看板3D立体可视化大屏监控源码 1WPF编程设计 2自定义工业控件设计 3数据库设计 4最原始的MVVM架构设计利于基础学习 5典型三层架构设计BLL - DLL - Model 6数据库链接可配置化 7带数据库脚本 注意 此项目主要是展示设计框架 只有第一个页签的大屏可视化 后面页签暂时没有相应的采集功能需要注意的是此项目主要是展示设计框架目前只有第一个页签的大屏可视化功能后面页签暂时没有相应的采集功能。不过基于这样完善的设计框架后续添加采集功能也会相对轻松。希望大家通过这个项目对C# WPF MVVM大屏看板开发有更深入的理解和掌握。