WPF真入门教程27--项目案例--设备数据实时监测

1、上图看效果

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

2、创建wpf项目

 

3、 UI布局分析

整个界面是一个表格,表格分二行,第一行是标题栏,第二行是数据栏,

第二行分2列,第1列放表格控件,第2列放图形控件

第一行分7列,放7个控件

 

1、 第一行

2、第二行

 

 

WPF中的布局是表格布局风格,通过一个个的细化组合形成UI,完整代码如下,大家可以仔细看看,注释都有,仔细体会下,不算难:

<Window x:Class="OmRonMesWPFApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:OmRonMesWPFApp.ViewModel"xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" FontSize="12" FontFamily="Microsoft YaHei" FontWeight="ExtraLight" Title="煅烧车间运行监测" Height="740" Width="1300" WindowStartupLocation="CenterScreen" Name="loginWin"   ><Window.DataContext><local:MainViewModel/></Window.DataContext><Grid Background="Honeydew" ShowGridLines="true"><Grid.RowDefinitions><RowDefinition Height="40"/><RowDefinition/></Grid.RowDefinitions><!--第一行标题--><Grid Grid.Row="0" Margin="0" Background="CornflowerBlue" ><Grid.ColumnDefinitions><ColumnDefinition  /><ColumnDefinition  /><ColumnDefinition  /><ColumnDefinition  /><ColumnDefinition  /><ColumnDefinition  /><ColumnDefinition  /></Grid.ColumnDefinitions><TextBlock Grid.Column="0" Text="PLC地址" Style="{StaticResource  txtTextBlockStyle}" HorizontalAlignment="Center"/><TextBox  Grid.Column="1"   VerticalContentAlignment="Center"  Text="{Binding HostName}" Style="{StaticResource  txtTextBoxStyle}"   /><TextBlock Grid.Column="2" Text="端口号" Style="{StaticResource  txtTextBlockStyle}" HorizontalAlignment="Center"/><TextBox Grid.Column="3"   VerticalContentAlignment="Center"  Text="{Binding HostPort}"   Style="{StaticResource  txtTextBoxStyle}" /><Button Grid.Column="4" Content="连 接"  Style="{StaticResource btnBaseStyle}"     Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=loginWin}" /><Button Grid.Column="5" Content="断 开"   Style="{StaticResource btnBaseStyle}"  /><TextBlock Grid.Column="6" FontSize="19" Text="{Binding ConnectWords,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" Style="{StaticResource  txtTextBlockStyle}"   Foreground="White"/></Grid><!--第二行信息--><Grid Grid.Row="1" Margin="0 10 0 0"><Grid.ColumnDefinitions><!--所占百分比50%--><ColumnDefinition Width="45*"  /><ColumnDefinition Width="55*"   /></Grid.ColumnDefinitions><!--第1列布局:数据列表--><DataGrid Name="gridCustomers" Margin="10 5 5 5"  Grid.Column="0" ItemsSource="{Binding HouseList}"  SelectedItem="{Binding CurrentItem}"   Style="{StaticResource dgStyle}"><DataGrid.Columns><!--绑定视图模型中的CustInfo对象各个属性--><DataGridTextColumn Binding="{Binding Id}" Header="序号"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}" Width="70" /><DataGridTextColumn Binding="{Binding Name}" Header="名称"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}" Width="110" /><DataGridTextColumn Binding="{Binding Temperature}" Header="温度"  IsReadOnly="True"   ElementStyle="{StaticResource textColStyleLeft}"  Width="110"/><DataGridTextColumn Binding="{Binding Waterlevel}" Header="水位"   IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110" /><DataGridTextColumn Binding="{Binding Speed}" Header="转速"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}"  Width="110"/><DataGridTextColumn Binding="{Binding Corner}" Header="转角"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}"  Width="110" /><DataGridTextColumn Binding="{Binding Inserttime,StringFormat='yyyy年MM月dd日HH时mm分'}" Header="创建时间"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}" Width="*" /></DataGrid.Columns></DataGrid><!--第2列布局:图形列表--><Grid Grid.Column="1" ><Grid.ColumnDefinitions><ColumnDefinition Width="641*"/><ColumnDefinition Width="74*"/></Grid.ColumnDefinitions><!--柱状图--><!--LegendLocation图例位置,Series序列绑定vm中的HouseSeriesList属性 --><lvc:CartesianChart Series="{Binding HouseSeriesList}" LegendLocation="Top" Margin="10,10,10,10" Grid.ColumnSpan="2"><!--X坐标--><lvc:CartesianChart.AxisX><lvc:Axis Labels="{Binding Labels}" FontSize="14" Position="LeftBottom" Foreground="Black" ><!--分隔线--><lvc:Axis.Separator><lvc:Separator Stroke="LightBlue" StrokeThickness="2"/></lvc:Axis.Separator></lvc:Axis></lvc:CartesianChart.AxisX><!--Y坐标--><lvc:CartesianChart.AxisY><lvc:Axis Title="最新运行数据"  FontSize="14" Position="LeftBottom" Foreground="DarkSlateBlue" ShowLabels="True"><lvc:Axis.Separator><lvc:Separator Step="4" Stroke="LightBlue" StrokeThickness="1"/></lvc:Axis.Separator></lvc:Axis></lvc:CartesianChart.AxisY></lvc:CartesianChart></Grid></Grid></Grid>
</Window>

3、样式资源

样式文件就是WEB中的css属性设置,需要精细的考虑,软件的界面就是一个人的颜值,可以看看,用的时候改改。

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><!--定义通用的按钮样式--><Style TargetType="{x:Type Button}" x:Key="btnBaseStyle"><Setter Property="Height" Value="30"/><Setter Property="Width" Value="90"/><Setter Property="FontFamily" Value="微软雅黑"/><Setter Property="Margin" Value="3,0"/><Setter Property="FontSize" Value="16"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="Foreground"  Value="Blue"/><!--模板的样式--><Setter Property="Template"><Setter.Value><!--Button按钮样式--><ControlTemplate TargetType="Button"><Grid ><Border Background="{TemplateBinding Background}" CornerRadius="13" ><TextBlock Margin="10 5 10 5" Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock></Border></Grid><ControlTemplate.Triggers><!--鼠标放上去时的触发器--><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="White" ></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter> </Style><!--TextBox默认样式--><Style TargetType="{x:Type TextBox}" x:Key="txtTextBoxStyle"><Setter Property="Width" Value="150"/><Setter Property="Height" Value="20"/><Setter Property="BorderBrush" Value="#FF105190"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Margin" Value="2,0"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Background"><Setter.Value><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="White" Offset="0"/><GradientStop Color="#FFE4E4E4" Offset="1"/></LinearGradientBrush></Setter.Value></Setter></Style><!--TextBlock默认样式--><Style TargetType="{x:Type TextBlock}" x:Key="txtTextBlockStyle"><Setter Property="Margin" Value="1"/><Setter Property="Height" Value="24"/><Setter Property="Foreground" Value="White"/><Setter Property="FontSize" Value="20"></Setter></Style><!--页面下拉框样式--><LinearGradientBrush x:Key="ComboBox.Static.Background" EndPoint="0,1" StartPoint="0,0"><GradientStop Color="White" Offset="0"/><GradientStop Color="#FFE4E4E4" Offset="1"/></LinearGradientBrush><SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FF105190"/><!--combox默认样式--><Style x:Key="cboStyle" TargetType="{x:Type ComboBox}"><Setter Property="Background" Value="{StaticResource ComboBox.Static.Background}"/><Setter Property="BorderBrush" Value="{StaticResource ComboBox.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/><Setter Property="Width" Value="150"/><Setter Property="Height" Value="25"/><Setter Property="BorderThickness" Value="1"/><Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/><Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/><Setter Property="Padding" Value="6,3,5,3"/><Setter Property="ScrollViewer.CanContentScroll" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="Both"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/></Style>
</ResourceDictionary>

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><!--所有datagrid控件页面的样式--><Style TargetType="TextBlock" x:Key="textColStyleCenter"><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="TextAlignment" Value="Center"/></Style><Style TargetType="TextBlock" x:Key="textColStyleLeft"><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="TextAlignment" Value="Left"/><Setter Property="Padding" Value="5,0"/></Style><Style TargetType="CheckBox" x:Key="chkColStyle"><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="HorizontalAlignment" Value="Center"/></Style><!--dg表格行的样式--><Style TargetType="{x:Type DataGridRow}" x:Key="dgRowStyle"><Setter Property="Background" Value="Transparent"/><Setter Property="VerticalContentAlignment" Value="Center"/><Style.Triggers><Trigger Property="ItemsControl.AlternationIndex" Value="0"><Setter Property="Background" Value="#FFD5EFF7"/></Trigger><Trigger Property="ItemsControl.AlternationIndex" Value="1"><Setter Property="Background" Value="#FFFBFCF9"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background"><Setter.Value><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FF73BCE8" Offset="0.98"/><GradientStop Color="White" Offset="0"/></LinearGradientBrush></Setter.Value></Setter></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background"><Setter.Value><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FF5C8DE0" Offset="0.98"/><GradientStop Color="White" Offset="0"/></LinearGradientBrush></Setter.Value></Setter></Trigger></Style.Triggers></Style><!--dg表格列的样式--><Style x:Key="colStyle"  TargetType="DataGridColumnHeader"><Setter Property="FontWeight" Value="Bold"/><Setter Property="Foreground" Value="#FF7C6BE0"/></Style><!--dg表格样式--><Style TargetType="DataGrid" x:Key="dgStyle"><Setter Property="HorizontalAlignment" Value="Stretch"/><Setter Property="AutoGenerateColumns" Value="False"/><Setter Property="SelectionMode" Value="Extended"/><Setter Property="VerticalAlignment" Value="Stretch"/><Setter Property="CanUserAddRows" Value="False"/><Setter Property="RowHeaderWidth" Value="20"/><Setter Property="HeadersVisibility" Value="Column"/><!--隔行显示--><Setter Property="AlternationCount" Value="2"/><Setter Property="HorizontalScrollBarVisibility" Value="Auto"/><Setter Property="VerticalScrollBarVisibility" Value="Auto"/><Setter Property="SelectionUnit" Value="FullRow"/><Setter Property="ColumnHeaderHeight" Value="25"/><Setter Property="RowHeight" Value="25"/><Setter Property="HorizontalGridLinesBrush" Value="LightGray"/><Setter Property="VerticalGridLinesBrush" Value="LightGray"/><Setter Property="ColumnHeaderStyle" Value="{StaticResource colStyle}"/><Setter Property="Margin" Value="5,20,0,5"/><Setter Property="Background" Value="Transparent"/><Setter Property="BorderBrush" Value="LightGray"/><Setter Property="RowStyle" Value="{StaticResource dgRowStyle}"/></Style></ResourceDictionary>

4、视图模型

视图模型的意思是指UI界面与后台的哪个模型类绑定起来,业务逻辑由视图模型来决定,前台的UI界面只负责数据的渲染,这里都是命令绑定和属性绑定。

 

 1、命令绑定

2、属性绑定

 

这里是图形的参数绑定后台属性,意思是一样的。注意什么时候用双向,单向。当后台逻辑数据发生更改时,需要更新UI控件就使用双向绑定。

可以看下这些

WPF真入门教程19--对象数据绑定_wpf 查询绑定对象-CSDN博客

WPF真入门教程18--XML数据绑定_wpf xml-CSDN博客

WPF真入门教程17--双向数据绑定_wpf 双向绑定-CSDN博客

WPF真入门教程16--简单数据绑定_wpf中的textblock怎么绑定变量-CSDN博客

WPF真入门教程15--什么是数据绑定?_数据插入的时候提示绑定数值是什么-CSDN博客

5、运行起来

 这里面用到异步task,而不是winform中的定时器。

 希望帮到你,就是我最大的支柱,动动您的金手指,创作不易,整理不易,多多给矛点击支持,发财的小手指动起来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据库】视图索引执行计划多表查询笔试题

文章目录 一、视图1.1 概念1.2 视图与数据表的区别1.3 优点1.4 语法1.5 实例 二、索引2.1 什么是索引2.2.为什么要使用索引2.3 优缺点2.4 何时不使用索引2.5 索引何时失效2.6 索引分类2.6.1.普通索引2.6.2.唯一索引2.6.3.主键索引2.6.4.组合索引2.6.5.全文索引 三、执行计划3.1…

uniapp运行自定义底座到真机没反应

同步资源失败&#xff0c;未得到同步资源的授权&#xff0c;请停止运行后重新运行&#xff0c;并注意手机上的授权提示。 如果此时手机没有任何反应&#xff0c;请检查自定义基座是否正确;如果是离线制作的自定义基座包&#xff0c; 请检查离线包制作是否正确。 网上各种查找报…

C++力扣题目513找树左下角的值

给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 思路 本题要找出树的最后一行的最左边的值。此时大家应该想…

C#Stopwatch类高精度计时功能

Stopwatch 是 C# 中的一个类&#xff0c;用于测量时间间隔的工具。它提供了高精度的计时功能&#xff0c;可以用于性能测试、调试和其他需要测量时间的场景。 使用 Stopwatch 类&#xff0c;你可以执行以下操作&#xff1a; 启动计时器&#xff1a;使用 Start 方法启动计时器…

Verilog 状态机 示例

状态机设计&#xff1a;3 段式&#xff08;推荐&#xff09; 状态机设计如下&#xff1a; (0) 首先&#xff0c;根据状态机的个数确定状态机编码。利用编码给状态寄存器赋值&#xff0c;代码可读性更好。 (1) 状态机第一段&#xff0c;时序逻辑&#xff0c;非阻塞赋值&#xf…

okcc呼叫系统如何配置呼入?

配置OKCC的呼入需要进行以下步骤&#xff1a; 1. 登录OKCC管理界面&#xff1a;使用管理员账号和密码登录OKCC的管理界面。通常可以在浏览器中输入OKCC的IP地址或域名来访问管理界面。 2. 确认网关配置&#xff1a;在OKCC管理界面中&#xff0c;确认已正确配置了网关&#xf…

在windows11系统上利用docker搭建linux记录

我的windows11系统上&#xff0c;之前已经安装好了window版本的docker&#xff0c;没有安装的小伙伴需要去安装一下。 下面直接记录安装linux的步骤&#xff1a; 一、创建linux容器 1、拉取镜像 docker pull ubuntu 2、查看镜像 docker images 3、创建容器 docker run --…

rtm姿态跟踪

6年前&#xff1a; GitHub - YuliangXiu/PoseFlow: PoseFlow: Efficient Online Pose Tracking (BMVC18) 报错&#xff1a; Clarification on min_keypoints in tracking Issue #1411 open-mmlab/mmpose GitHub https://github.com/open-mmlab/mmpose/blob/c8e91ff456d82c…

根能抵达的节点(二分法、DFS)C++

给定一棵由 N个节点构成的带边权树。节点编号从 0到 N−1&#xff0c;其中 0 号点为根节点。最初&#xff0c;从根节点可以抵达所有节点&#xff08;包括自己&#xff09;。如果我们将所有边权小于 X 的边全部删掉&#xff0c;那么从根节点可以抵达的节点数目就可能发生改变。 …

全国首创:福建协和医院成功完成长期型人工心脏微创植入

导语 微创技术在心脏手术领域正逐渐发展&#xff0c;并取得了突破性进展。最近&#xff0c;福建协和医院成功进行了全球第二例微创EVAHEART左心室辅助装置手术&#xff0c;为心脏病患者带来新的希望和治疗选择。 2023年11 月&#xff0c;中华医学会胸心血管外科学分会第八届…

从零开始学Python:分支结构

应用场景 迄今为止&#xff0c;我们写的Python代码都是一条一条语句顺序执行&#xff0c;这种代码结构通常称之为顺序结构。然而仅有顺序结构并不能解决所有的问题&#xff0c;比如我们设计一个游戏&#xff0c;游戏第一关的通关条件是玩家获得1000分&#xff0c;那么在完成本…

电商建表常用前缀[ams/mms/pms/oms/cms/wms/crm]

ams&#xff1a;代表 "Admin Management System"&#xff0c;即管理后台系统。该模块通常用于管理用户、权限、订单等与后台管理相关的功能。 mms&#xff1a;代表 "Merchant Management System"&#xff0c;即商家管理系统。该模块通常用于管理商家账户、…

Duality

对偶 拉格朗日对偶函数 考虑优化问题 min ⁡ f 0 ( x ) s.t. f i ( x ) ≤ 0 , i 1 , … , m h i ( x ) 0 , i 1 , … , p \begin{array}{ll} \min & f_0\left(\mathbf{x}\right) \\ \text {s.t.} & f_i\left(\mathbf{x}\right) \leq 0, \quad i1, \ldots, m \\ …

基于人脸识别的智慧校园方案—校内区域智能管理(2)

实验室人脸识别 实验是教师、学生和科研人员进行教学和科学研究的重要场地,也是学校教务管理中的重要组成部分,高校实验室管理质量直接影响教学科研工作质量。 随着在校学生的日益增多,实验室资源如何分配利用、实验室设施安全如何保障也成为一大难题。运用智能管理系统开…

windows安装Elasticsearch后使用ik分词器报错解决办法

最近在学习Elasticsearch&#xff0c;安装完成后下载了ik分词器压缩到plugins目录下启动es报错如下&#xff1a; java.security.AccessControlException: access denied (“java.io.FilePermission” “D:…\plugins\ik-analyzer\config\IKAnalyzer.cfg.xml” “read”)咋一看…

外贸建站主机哪个好?海洋建站系统怎么样?

外贸建站主机的选择攻略&#xff1f;搭建电商网站用哪个主机好&#xff1f; 要在互联网上建立一个成功的外贸网站&#xff0c;选择一款稳定可靠的外贸建站主机是至关重要的一环。海洋建站将探讨在众多选择中&#xff0c;如何寻找一款适合自己业务需求的外贸建站主机。 外贸建…

PCF8563转STM32 RTC避坑指南

问题一&#xff0c;时间读取错误 原因&#xff0c;读写时间必须Time在前&#xff0c;Date在后 HAL_RTC_GetTime(&hrtc, &time, RTC_FORMAT_BCD); HAL_RTC_GetDate(&hrtc, &date, RTC_FORMAT_BCD); HAL_RTC_SetTime(&hrtc, &time, RTC_FORMAT_BCD); …

【AI视野·今日Sound 声学论文速览 第四十四期】Tue, 9 Jan 2024

AI视野今日CS.Sound 声学论文速览 Tue, 9 Jan 2024 Totally 27 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers DJCM: A Deep Joint Cascade Model for Singing Voice Separation and Vocal Pitch Estimation Authors Haojie Wei, Xueke Cao, Wenbo Xu…

【深度学习 | 风格迁移】神经网络风格迁移,原理详解附详细案例源码

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

【Linux】Linux 系统编程——相对路径和绝对路径

文章目录 概述绝对路径相对路径绝对路径的作用相对路径的作用系统是怎么通过相对路径定位文件的&#xff1f; 概述 相对路径和绝对路径是文件系统中定位文件和目录的两种主要方法。它们的主要区别在于如何引用文件的位置。 绝对路径 定义: 绝对路径是从文件系统的根目录&…