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

C#_WPF_MVVM大屏看板3D立体可视化大屏监控源码 1，WPF编程设计； 2，自定义工业控件设计； 3，数据库设计； 4，最原始的MVVM架构设计，利于基础学习； 5，典型三层架构设计，BLL - DLL - Model 6，数据库链接可配置化； 7，带数据库脚本； 注意： 此项目主要是展示设计框架； 只有第一个页签的大屏可视化； 后面页签暂时没有相应的采集功能；

在当今数字化时代，大屏看板可视化对于数据的直观展示至关重要。今天就来聊聊这个基于C# WPF MVVM的大屏看板项目，它不仅有3D立体可视化效果，还包含了不少值得学习的技术点。

WPF编程设计

WPF（Windows Presentation Foundation）以其强大的图形渲染能力和灵活的布局系统，为大屏看板的界面设计提供了绝佳支持。例如，在XAML文件中定义界面元素就十分便捷：

<Window x:Class="YourNamespace.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="大屏看板" Height="600" Width="800"> <Grid> <!-- 这里添加各种可视化控件，比如图表、文本显示区域等 --> <TextBlock Text="欢迎来到大屏监控" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/> </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架构设计，利于基础学习

MVVM（Model - 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 List<MonitorDataModel> 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 List<MonitorDataModel> GetDataByTimeRange(DateTime start, DateTime end) { var result = new List<MonitorDataModel>(); 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 name="MonitorDB" connectionString="Data Source=YOUR_SERVER_NAME;Initial Catalog=YOUR_DATABASE_NAME;User ID=YOUR_USERNAME;Password=YOUR_PASSWORD" providerName="System.Data.SqlClient"/> </connectionStrings> </configuration>

在代码中通过ConfigurationManager.ConnectionStrings["MonitorDB"].ConnectionString获取连接字符串，这样在不同环境下只需修改配置文件，而无需修改代码。

带数据库脚本

项目提供数据库脚本，方便快速搭建数据库环境。除了前面创建表的脚本，还可能包含插入初始数据等脚本。例如：

INSERT INTO MonitorData (SensorName, SensorValue, RecordTime) VALUES ('温度传感器', 25.5, GETDATE());

这个脚本向MonitorData表插入了一条温度传感器的数据。

C#_WPF_MVVM大屏看板3D立体可视化大屏监控源码 1，WPF编程设计； 2，自定义工业控件设计； 3，数据库设计； 4，最原始的MVVM架构设计，利于基础学习； 5，典型三层架构设计，BLL - DLL - Model 6，数据库链接可配置化； 7，带数据库脚本； 注意： 此项目主要是展示设计框架； 只有第一个页签的大屏可视化； 后面页签暂时没有相应的采集功能；

需要注意的是，此项目主要是展示设计框架，目前只有第一个页签的大屏可视化功能，后面页签暂时没有相应的采集功能。不过，基于这样完善的设计框架，后续添加采集功能也会相对轻松。希望大家通过这个项目，对C# WPF MVVM大屏看板开发有更深入的理解和掌握。