hqwest的专栏

送人玫瑰，留有余香，能量满格，冲上天梯。

此实战以WPF为基础UI框架，展示了《换热站监控系统》上位机应用的全套实现过程，从界面功能布局、模拟组态业务到控件模板、图表、自定义控件，再到设备通信、页面数据实时更新、多线程相关操作等，众多实用功能完整落地。

本项目主要通过各种图形，如柱状图，环状图，异型曲线等，加上用户控件等实现的，最后做出如下效果。

项目后端采用.NET多层框架，并且采用了权限系统来实现不同角色拥有不同操作菜单，前端采用WPF技术，可以说是用到了wpf的很多技能知识点，数据库采用SQLSERVER2012，可以让你的WPF开发技术杠杠的上个级别。

到现在为止，真入门系列教程已完成了29刺由浅入深地讲解，当然不可能讲到了WPF的所有技能点，但读者看到了wpf的内部各种功能及之间的联系，在此基础上，提供一个完整有效的综合项目，以此为实战，并作为本教程的结束。

在WPF中，有几个常用的MVVM（Model-View-ViewModel）开源框架，这些框架提供了方便的工具和模式来帮助开发人员实现MVVM架构。以下是几个常用的MVVM开源框架：1. Prism：Prism是一个由微软模式和实践团队开发的开源框架，它提供了一套用于开发可扩展、可测试和可维护的WPF应用程序的工具和指南。Prism提供了解耦视图、模型和视图模型的机制，以及用于导航、命令、事件聚合等常用功能。

这个案例还是布局加视图模型，样式应用，业务逻辑，该项目是一个mqtt服务器和客户端的通信工具，这里不去分析mqtt的通信原理，关注在于wpf技能的应用，能够掌握这个例子，离项目开发也差不多了，只是没有跟db打交道，本项目重点在于理解mvvm模式，开发环境依然是vs2022，.netframework 4.8，wpf应用程序。默认启动的效果最大化的效果，控件没有变形没有走样，说明wpf的技术还是不错的，界面没有变形，不象winform，控件会走样。

今天要做的一个案例是这样的效果，它能实时监测车间设备有关数据，并以表格和图形显示在界面上，这个比上个案例要复杂些，颜值也高些，通过这个来巩固wpf的技能，用到了命令绑定，样式资源，表格数据，图形控件livechart。将前面25的内容熟悉起来，就可以自己动手做这个案例了。

通过这个案例，将前面25讲内容贯通起来了，能够掌握这个例子就说明入门了，真入门，真入门，难的地方是mvvm模型的意义，命令如何绑定实现的，最后精武英雄装B起来。

WPF的Binding机制给程序的开发带来极大方便，但有时源数据和绑定对象之间需要进行一定的逻辑转换，直接的简单绑定不能满足使用要求，WPF当然考虑了这一点，在Binding中我们可以添加自定义的转换逻辑，即转换器Converter。WPF中的转换器是一个非常好的数据类型转换解决方案，实用和强大， 它的作用是将源数据转换为WPF自身需要的类型，对数据实体没有侵略性，会在项目工程中频繁使用。拖动横向值滑动条，当超过纵向值时，填充的是红色，效果是。拖动纵向值，这时纵向值比横向值大，所以填充绿色，

当创建自己的命令时，不能直接实现ICommand接口，而是要使用System.Windows.Input.RouteCommand类，该类已经实现了ICommand接口，所有WPF命令都是RouteCommand类的实例。MVVM的目的是为了最大限度地降低了Xaml文件和CS文件的耦合度，分离界面和业务逻辑，所以我们要通过命令(Command)的来将Button的事件分离出来。在 WPF 中定义这样一个接口的目的是为了实现 MVVM 的框架设计，换一种的说法就是为了解耦。比如，在假期中使用滴滴打车。

在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。在响应用户操作上，WinForm是通过控件的事件来处理，而WPF可以使用命令绑定的方式来处理，耦合度将降低，WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。

战鼓阵阵高，看我更上一层楼1、什么是样式WPF相较于以前学的WinForm，WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离，为获得更好的界面，也使得我们不得不分出一半的时间花在前端代码的编写上 ，而样式（Style）又是前端代码中非常重要的元素 ，样式可以自定义控件的属性，比如修改button的字体、前景色、背景色、边框厚度颜色等。如果您来自使用和。

与传统WEB应用中CSS样式表类似目的为了实现对象的重复使用有助于XAML代码重用，有助于应用维护的一致性定义资源的语法格式：

这在很多情况下都是一个很好的选择，其中您希望将窗口划分为特定的区域，尤其是因为默认情况下，DockPanel内的最后一个元素（除非该特性被特别禁用）将自动填充剩余的空间（中心）。如果将 LastChildFill 属性设置为 true(默认设置)，那么无论对 DockPanel 的最后一个子元素设置的其他任何停靠值如何，该子元素都将始终填满剩余的空间。控件布局这块还有很多，每个又有很多设置效果，经过8次指导演练，已经真入门了，在实际应用中，可以上手做出效果了，只是一个细心的过程。Opacity：透明度。

Canvas是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小，它仅支持用显式坐标定位控件，它也允许指定相对任何角的坐标，而不仅仅是左上角。通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。该属性用于获取或设置用户界面中为此元素显示的工具提示对象 (UI，Object) ，比如一个简单的提示字符串或一个复杂的提示布局，Child：获取或设置一个ViewBox元素的单一子元素。

在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。

3、带标题内容控件：相当于一个内容控件，但是可以加一个标题（Header），标题部分亦可容纳一个控件或者布局，GroupBox、TabItem等是这类控件的典型代表。Window、Button等控件属于此类，因为只能容纳一个控件作为其内容，所以经常借助布局控件来规划其内容。1、布局控件：是可以容纳多个控件或者嵌套其他布局的控件，用于在UI上组织和排列控件。这节操作下WrapPanel控件，它将内容进行水平或垂直排列元素，当元素个数过多时，会自动换行或换列来进行排列，来看看下面的示意，应该能明白吧。

这一节来学习使用StackPanel控件，意为堆叠面板，堆叠面板,可以将元素排列成一行或者一列，其特点是：每个元素各占一行或者一列，Orientation属性指定排列方式：Vertical(垂直)【默认】、Horizontal(水平)，默认情况下，水平排列时，每个元素都与面板一样高；如果包含的元素超过了面板空间，它只会截断多出的内容。第2个StackPanel控件包含在Border边框控件中，这是可以的，如果不需要，可以直接去掉，看实际情况，另外，每个控件的属性不一定要手写，可以直接在属性窗口设置，如图，

微软在WPF引入了Dispatcher，那么这个Dispatcher的主要作用是什么呢？不管是WinForm应用程序还是WPF应用程序，实际上都是一个进程，一个进程可以包含多个线程，其中有一个是主线程，其余的是子线程。在WPF或WinForm应用程序中，主线程负责接收输入、处理事件、绘制屏幕等工作，为了使主线程及时响应，防止假死，在开发过程中对一些耗时的操作、消耗资源比较多的操作，都会去创建一个或多个子线程去完成操作，比如大数据量的循环操作、后台下载。

这一节，来学习下ComboBox下拉框，Border边框控件，Image图片控件，CheckBox复选框， 这些发挥着不同的作用，是布局基础组成部分

2、Grid设置了名称， Name="mygrid"，Button设置了背景，RadioButton设置了分组，控件都设置了Content表示显示内容，Name表示控件名称，这在后台代码可能需要用到，所以设置了名称，HorizontalAlignment表示水平对齐，Foreground表示前景色，Margin表示左上中下边距，跟CSS的盒子模型意思一样，Click表示事件名称，这些属性名称很多，不一一说明，这些东西跟CSS里的东西含义一样，所以证明了这个xaml文件是布局文件。第三步，运行程序，效果是。

对于WPF应用程序,在VisualStudio和ExpressionBlend中，自定义的窗体均继承System.Windows.Window类。用户通过窗口与WindowsPresentationFoundation(WPF)独立应用程序进行交互。窗口的主要用途是承载可视化数据并使用户可以与数据进行交互的内容。独立WPF应用程序使用Window类来提供它们自己的窗口。在WPF中，可以使用代码或XAML标记来实现窗口的外观和行为

默认的是MainWindow.xaml文件，它负责界面的ui设计布局，在这里面通常全部写UI的东西，包括窗口的外观，控件等，MainWindow.xaml.cs是处理界面相关的操作，也就是界面的后台逻辑文件，App.xaml.是系统应用相关的初始化，其中有启动窗口文件。工程建好之后，WPF应用程序”会在“引用”里面自动添加下图中所示的 PresentationCore、PresentationFramework、WindowsBase三大核心程序集，就是下面这个样子。好了，现在开始入门了，飞起来吧。

WPF相对于Windows客户端的开发来说，向前跨出了巨大的一步，它提供了超丰富的.NET UI 框架，集成了矢量图形，丰富的流动文字支持(flow text support)，3D视觉效果和强大无比的控件模型框架。基于DirectX 9/10技术的WPF不仅带来了前所未有的3D界面，而且其图形向量渲染引擎也大大改进了传统的2D界面，比如Vista中的半透明效果的。一句话，WPF做到了界⾯设计与后端开发分离，就象BS开发中的前后端分离，WPF是CS开发中的前后端分离，只不过WPF是应用于桌面窗体程序。

ListView 控件在Windows应用程序中常用，用于表示数据列表。如果您以前使用过 WinForms，那么您对ListView的实用性有一个很好的了解，但您应该意识到 WPF中的ListView 不像WinForms版本那样使用。再一次的主要区别在于，虽然WinForms ListView只是调用Windows API 函数来呈现常见的Windows ListView 控件，但WPF ListView是一个独立的控件，不依赖于 Windows API，WPF ListView以完全不同的方式处理项目图

这个示例中，我们使用DataGrid连接MySQL数据库显示数据表1、在mysql管理中创建数据库wpfdb，创建表goods和category，添加记录 2，在项目中添加对mysql程序集的引用 3、在上节的DataGridWin.xaml中，添加StackPanel控件及datagrid控件，最终代码如下：

在WPF中，主要使用DataGrid控件进行表格化数据的展示，控件提供一个用户界面，可用于显示单个表或显示一组表之间的分层关系，提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用。DataGrid列的类型在创建DataGrid 时可以通过AutoGenerateColumns 属性设置列是否自动生成，从而加入自定义列，我们来做一个示例，学习如何使用DataGrid。首先在项目中创建2个文件夹，一个control，添加DataGridWin窗口，一个model，两

如果想以特定的方式对数据进行排序，可以绑定到 CollectionViewSource，而不是直接绑定到 ObjectDataProvider。CollectionViewSource 则会成为数据源，并充当截取 ObjectDataProvider 中的数据的媒介，并提供排序、分组和筛选功能，然后将它传送到目标。 这个示例是使用 CollectionViewSource做为排序的数据源，首先将CollectionViewSource的Source 属性设置为 ObjectDataProvider的资源名称

这一节试水对象绑定，虽然 XmlDataProvider 对 XML 非常有用，但是当您想绑定到对象或对象列表时，可以创建 ObjectDataProvider 作为资源。ObjectDataProvider 的 ObjectType 指定将提供数据绑定源的对象，而 MethodName 则指示为获得数据而调用的方法。在项目中添加一个类StudentService，该类通过GetStudentList的方法来返回Student列表 然后添加布局控件等，具体代码如下（接上一节代码）：

XML数据绑定就是指控件的数据源来自一个XML文件，项目中有一个Colors.xml文件

在这里的示例，要学习一下双向绑定的模式TwoWay，和更新触发模式UpdateSourceTrigger的使用效果。这个示例是根据ListBox中的选中项，去改变TextBlock的背景色和TextBox的显示内容及背景色，也可以输入颜色类型，（注意不能输入中文，中文不认识）。代码如下(代码是接上一节的代码继续添加的)。

该示例演示如何通过绑定的方式把ListBox中选中的值显示到 TextBlock中，首先，给ListBox添加了多个 ListBoxItem，做为ListBox的选项 。 其次，把第二个 TextBlock 的 Text通过 Binding 与 ListBox 选择项进行绑定。Binding 语法中的 ElementName 属性指示 TextBlock 的 Text 属性要与其绑定的控件的名称。Path 属性指示我们将绑定到Text属性上ListBox元素的属性。具体代码如下：

数据绑定是在应用 UI 与其显示的数据之间建立连接的过程。 如果绑定具有正确的设置，并且数据提供适当的通知，则在数据更改其值时，绑定到该数据的元素会自动反映更改。 数据绑定还意味着，如果元素中数据的外部表示形式发生更改，则基础数据可以自动进行更新以反映更改。 例如，如果用户编辑 元素中的值，则基础数据值会自动更新以反映该更改。 WPF中的数据绑定，必须要有绑定目标和绑定数据源。绑定目标可以是任何可访问的属性或控件，例如 TextBox 控件的Text 属性。数据源可以是其他控件的属性，可以是对象