WPF真入门教程26--项目案例--欧姆龙PLC通讯工具

1、案例介绍

前面已经完成了25篇的文章介绍,概括起来就是从0开始,一步步熟悉了wpf的概念,UI布局控件,资源样式文件的使用,MVVM模式介绍,命令Command等内容,这节来完成一个实际的项目开发,虽然小案例,但是可以把前面的知识融合起来,比如控件的布局,命令的绑定,视图模型的应用,数据交互驱动等方面,巩固检验具体的实际应用,我们要完成的项目是这样的成品:

2、布局分析

在wpf的布局中,最外围的必须是grid,也就是表格的意思,然后里通过不同的细化划分成不同的格子,大格里放小格子,一点点细化下来,格子里面可以放格子,也可以直接各类控件,这些控件在前面已经介绍过,在这个项目中,用到的布局就是这样划分出来的,仔细想想不难,但需要动手实践,

<TextBlock Grid.Row="0" Text="C#利用Fins协议实现欧姆龙PLC的数据读写" FontSize="22" VerticalAlignment="Center" Margin="20,0" FontWeight="Bold" />,这里面的Grid.Row="0"表示它占第1行,其他的FontSize等是它的属性,分别是Text文本内容,FontSize字体大小,VerticalAlignment垂直对齐,Margin外边距,FontWeight字体加粗,这些都是在css中的样式属性名称,因此需要有CSS基础,对盒子模型要熟悉,所以有web前端开发的人能很好理解这些,特别注意Margin是表示外边距,Padding表示内边距,两者是不同的意思。

1、先看左边

看一下左侧的布局,用的StackPanel,它能将子元素排列成水平或垂直的一行,属于布局控件,通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线,当移除一个元素后,后面的元素会自动向前填充空缺。

 2、再看右边

右边的分5行2列,每行放一个控件,控件里放不同的具体控件,通过 Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"来确定控件放哪行哪列,ColumnSpan表示跨2列,也就是指这列占2列的宽度,这跟表格的跨行跨列的意思是一样的。

第一行的stackpanel和第二行的stackpanel是不一样的对齐方式,第一行是水平对齐,第二是垂直对齐,两者虽然都是stackpanel,但不一样,通过Orientation来改变,默认当然是水平对齐,控件的command,style是指命令绑定和样式,后面会讲。

StackPanel 的几个常用的属性介绍

  •     Background:Brush对象,背景。
  •     FlowDirection:获取或设置文本和其他用户界面 (UI) 元素在控制其布局的任何父元素内流动的方向,默认是从左往右显示的;RightToLeft:从右到左;LeftToRight:从左到右。
  •     Height/Width:高度/宽度;MaxHeight/MaxWidth:最大高度/最大宽度;MinHeight/MinWidth:最小高度/最小宽度;
  •     HorizontalAlignment/VerticalAlignment:设置内部元素水平对齐/垂直对齐;
  •     IsEnabled:使能,是否可用;
  •     IsHitTestVisible:声明是否可以返回此元素作为其呈现内容的某些部分的点击测试结果;
  •     IsVisible/Visibility:此元素在界面中是否可见;
  •     Margin:获取或设置元素的外边距;顺序为:上下左右;
  •     Name:获取和设置此元素的标识名称;
  •     Opacity:透明度;
  •     Orientation:获取或设置一个值,该值指示子元素的堆叠维度。Horizontal:水平排布;Vertical:垂直排布; 

 这里是使用了资源样式文件来修饰效果的,如果不使用,效果是很不好看的

3、资源样式

样式(Style)是前端代码中非常重要的元素 ,样式可以自定义控件的属性,比如修改button的字体、前景色、背景色、边框厚度颜色等,在WPF中资源样式文件的引入使得代码的编写能够前后端分离,而样式是通过资源文件来编写的,可以将资源引用为静态资源或动态资源。这可以通过使用StaticResource标记扩展或DynamicResource标记扩展来实现。 具体可以看前面的文章,

WPF真入门教程22--样式应用,WPF真入门教程21--WPF资源系统

写样式文件,需要各位大神对css熟悉才行,正因为有这个样式文件,所以界面UI才可以美化漂亮起来,然后将样式合并在配置文件中,必须这样做

 

写好后,前面UI如何使用了,这样搞

 

4、视图模型

前面文章介绍过mvvm模型,WPF真入门教程23--MVVM简单介绍,这个可以说是WPF中的一个难点,也是灰尝重要的一点,如果你有开发VUE,微信小程序之类的水平,就应该清楚什么叫MVVM,它是指数据模型驱动页面UI,所以前台的UI控件需要通过BIND这样的写法来指定模型中的属性,视图模型通常里通过是属性和命令,先看这个类

再看这个类,这个类继承基类,必须这么搞,以体现出OOP的思想 。

 再看这个属性,写法又不一样

 视图模型如何与界面布局关联起来了?看这样写,这就是说这个xaml页面用到的视图模型类对象是mainviewmodel.cs这个类,这样页面就与视图模型关联起来了。

5、属性绑定

前面的视图模型类viewmodel非常关键,这是前台UI控件与后台逻辑通信的关键,数据上下文DataContext指定了这个页面由后台的哪个类来驱动页面控件。

 绑定属性这样写,绑定有单向,双向等,可以看这些,这个案例用到单向,双向绑定

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

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

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

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

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

另一个绑定方式 

对象绑定

 单向还是双向还是对象绑定还是不绑定都要看具体的需要。

6、命令绑定

 命令绑定必须先创建自己的基类,因为页面上有很多按钮动作,所以创建基类 

视图模型除了属性外,还必须的命令绑定,用来响应UI控件的命令动作,如点击动作,看这样写的

 命令与视图模型的关联 ,命令里具体的业务逻辑需要自己的项目来写。

 命令绑定还可以指定参数,因为在一些命令动作中,需要传递页面上的一些数据参数到后台,所以可以指定CommandParameter这个属性,但在这个项目例子中,暂时用不到,别的项目中需要用到,明白这个即可,可以带参数到后台的。

这就是MVVM模型,数据渲染,而不是winform中的事件驱动,对比下这个写法

整个WPF中事件都是这样的写法,用命令绑定来实现,而不是click这样的事件,虽然wpf也可以写单击,双击的,但不建议这样写,当然写点击click的话,语法逻辑上不会报错可以正确执行,但失去了mvvm的概念意义。总结起来就是视图模型里写页面需要的属性和命令绑定,实现了人机交互。 

运行起来就是这样的

 注意一点,整个项目编译正确后,生成的可执行文件 就是项目最后的代码,可以部署到服务器上就行,点击这个.exe文件就运行起来了,就脱离了vs开始环境,将debug目录下所有文件复制到别的电脑上,运行就是项目生成的最后代码文件。

 应用效果 

7、总结

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

 原创不易,代码不易,打字不易,截图不易,分享不易,思路不易,奉献不易,多多点赞收藏

原创不易,代码不易,打字不易,截图不易,分享不易,思路不易,奉献不易,多多点赞收藏!

最后提供完整代码:

链接:https://pan.baidu.com/s/1YunLxg7JjKS0SjN696k92g 
提取码:67p3 
--来自百度网盘超级会员V9的分享

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

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

相关文章

MIB 变更周期

MIB 始终以 80 ms 的周期在 BCH 上传输并在 80 ms 内重复&#xff0c;并且它包括从小区获取 SIB1 所需的参数&#xff1b;如果 SSB 的周期大于 80 ms&#xff0c;则 MIB 的发送周期与 SSB 的周期相同。 在UE初始搜索时&#xff0c;SSB在半帧内的周期是20ms&#xff1b;所以对于…

鸿蒙开发基础-UIAbility内页面间的跳转

基于Stage模型下的UIAbility开发&#xff0c;实现UIAbility内页面间的跳转和数据传递。 创建两个页面 启动DevEco Studio&#xff0c;创建一个新工程。在工程pages目录中&#xff0c;选中Index.ets&#xff0c;点击鼠标右键 > Refactor > Rename&#xff0c;改名为Inde…

如何配置 VS Code 实现 git 密码免输入

目录 问题描述尝试过的失败方法问题分析最终采用的解决方案&#xff1a;利用 ssh key 提供密码免输入功能安装 git windows 命令工具在windows本地生成 ssh key将公钥安装到 git 服务器第一种方法第二种方法调试方法 参考资料: 问题描述 在 Windows 上&#xff0c;使用 Visual…

Redis不同环境缓存同一条数据,数据内部值不同

背景 现实中&#xff0c;本地环境&#xff08;dev&#xff09;和开发环境&#xff08;feature&#xff09;会共同使用相同的中间件&#xff08;本篇拿Redis举例&#xff09;&#xff0c;对于不同环境中的&#xff0c;图片、视频、语音等资源类型的预览地址url&#xff0c;需要配…

Cesium笔记 初始化 使用Vue-Cesium 组件

参考 A Vue 3 based component library of CesiumJS for developers | Vue for CesiumVue for Cesium, a Vue 3.x based component library of CesiumJS for GISerhttps://zouyaoji.top/vue-cesium/#/zh-CN/component/quickstart

Spring boot 3 集成rocketmq-spring-boot-starter解决版本不一致问题

安装RocketMQ根据上篇文章使用Docker安装RocketMQ并启动之后&#xff0c;有个隐患详情见下文 Spring Boot集成 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2…

基于 SpringBoot + vue 的医院管理系统(含源码,数据库,文档)

基于 SpringBoot vue 的医院管理系统 †前后端分离思想&#xff0c;这个系统简直太棒了&#xff01;屯 光这个系统采用了 前后端分离思想&#xff0c;后端使用 SpringBoot和 SpringMVC框架&#xff0c;让代码更高效&#xff0c;更易于维护。前端则使用了 vue js 和ElementU…

竞赛保研 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

SUDA-计算机网路-期末复习提纲

写在前面 帮苏大的同学整理的计网复习材料&#xff0c;用的是他们老师划定的范围。 1.负责互联网协议开发、标准制定、地址分配的国际组织名称及其主要职责 (1) 地址支持组织&#xff08;ASO&#xff09;负责IP地址系统的管理。 (2) 域名支持组织&#xff08;DNSO&#xff09;…

实用Unity3D Log打印工具XDebug

特点 显示时间&#xff0c;精确到毫秒显示当前帧数&#xff08;在主线程中的打印才有意义&#xff0c;非主线程显示为-1&#xff09;有三种条件编译符(如下图) 注&#xff1a;要能显示线程中的当前帧数&#xff0c;要在app启动时&#xff0c;初始化mainThreadID字段条件编译符…

开源加解密库之GmSSL

一、简介 GmSSL是由北京大学自主开发的国产商用密码开源库&#xff0c;实现了对国密算法、标准和安全通信协议的全面功能覆盖&#xff0c;支持包括移动端在内的主流操作系统和处理器&#xff0c;支持密码钥匙、密码卡等典型国产密码硬件&#xff0c;提供功能丰富的命令行工具及…

在k8s集群中部署多nginx-ingress

关于ingress的介绍&#xff0c;前面已经详细讲过了&#xff0c;参考ingress-nginx详解和部署方案。本案例ingress的部署使用deploymentLB的方式。 参考链接&#xff1a; 多个ingress部署 文章目录 1. 下载ingress的文件2. 文件资源分析3. 部署ingress3.1 部署第一套ingress3.1…

日志系统一(elasticsearch+filebeat+logstash+kibana)

目录 一、es集群部署 安装java环境 部署es集群 安装IK分词器插件 二、filebeat安装&#xff08;docker方式&#xff09; 三、logstash部署 四、kibana部署 背景&#xff1a;因业务需求需要将nginx、java、ingress日志进行收集。 架构&#xff1a;filebeatlogstasheskib…

【数据库原理】期末突击(1)

有不会的题可以后台问我的哦&#xff0c;看见了就会回。 本文章主要是选择题、填空题&#xff0c;下章将更新综合题&#xff0c;祝大家期末心想事成。 一、选择题 下列关系运算中&#xff0c;&#xff08; C &#xff09;运算不属于专门的关系运算。 A&#xff0e;选择 …

Tensorflow2.0笔记 - 创建tensor

tensor创建可以基于numpy&#xff0c;list或者tensorflow本身的API。 笔记直接上代码&#xff1a; import tensorflow as tf import numpy as np import matplotlib.pyplot as plttf.__version__#通过numpy创建tensor tensor0 tf.convert_to_tensor(np.ones([2,3])) print(te…

Mysql 分割字符串,一行变多行,@rownum,mysql.help_topic

1 前言 朋友最近遇到一个比较棘手的 sql 问题&#xff0c;让我帮忙看看&#xff1a; 他有两张表 testa 和 testb &#xff0c;一个表存的日期&#xff0c;另一个表存字符串例如 2023-11-01,2023-11-02&#xff0c;如何将这两张表关联起来&#xff0c;只查 testa 表的数据&#…

<Python>PyQt5中UI界面和逻辑函数分开写的一种方式

前言 如果经常使用PyQt5这种模块来编写带UI界面的程序&#xff0c;那么很自然的就会涉及到&#xff0c;一旦程序比较大&#xff0c;UI控件多的时候&#xff0c;需要将UI和逻辑程序分离&#xff0c;这样方便管理&#xff0c;也方便维护。 配置&#xff1a; 平台&#xff1a;win…

三、yolov8训练结果查看和模型预测

训练结果查看 1、在模型训练结束后&#xff0c;如下图所示&#xff0c;找到该文件夹。 2、然后找到weights文件夹中的best.pt文件&#xff0c;这就是该数据训练后的模型。 模型预测 1、在assets文件夹下创建FPC-2文件夹&#xff0c;放入一些同类FPC预测结果。 2、和训练…

什么是活动的DWDM网络?

DWDM系统被认为是一个基于应答器的系统&#xff0c;可以帮助在数据中心互连设置中在站点之间传输大量数据。不同于无源DWDM网络&#xff0c; DWDM网络通常包括OEO、主动DWDM Mux Demux、EDFA、DCM和其他主动WDM组件&#xff0c;更适合远程传输。此外&#xff0c;主动DWDM网络还…

x-cmd pkg | pdfcpu - 强大的 PDF 处理工具

目录 简介首次用户多功能支持性能表现安全的加密处理进一步阅读 简介 pdfcpu 是一个用 Go 编写的 PDF 处理库。同时它也提供 API 和 CLI。pdfcpu 提供了丰富的 PDF 操作功能&#xff0c;用户还能自己编写配置文件&#xff0c;用来管理和使用各种自定义字体并存储有效的默认配置…