企业备案的网站名称,中国机械加工信息网,小学电教检查网站建设资料,石家庄小程序平台开发1、案例介绍
前面已经完成了25篇的文章介绍#xff0c;概括起来就是从0开始#xff0c;一步步熟悉了wpf的概念#xff0c;UI布局控件#xff0c;资源样式文件的使用#xff0c;MVVM模式介绍#xff0c;命令Command等内容#xff0c;这节来完成一个实际的项目开发#…1、案例介绍
前面已经完成了25篇的文章介绍概括起来就是从0开始一步步熟悉了wpf的概念UI布局控件资源样式文件的使用MVVM模式介绍命令Command等内容这节来完成一个实际的项目开发虽然小案例但是可以把前面的知识融合起来比如控件的布局命令的绑定视图模型的应用数据交互驱动等方面巩固检验具体的实际应用我们要完成的项目是这样的成品 2、布局分析
在wpf的布局中最外围的必须是grid也就是表格的意思然后里通过不同的细化划分成不同的格子大格里放小格子一点点细化下来格子里面可以放格子也可以直接各类控件这些控件在前面已经介绍过在这个项目中用到的布局就是这样划分出来的仔细想想不难但需要动手实践 TextBlock Grid.Row0 TextC#利用Fins协议实现欧姆龙PLC的数据读写 FontSize22 VerticalAlignmentCenter Margin20,0 FontWeightBold /这里面的Grid.Row0表示它占第1行其他的FontSize等是它的属性分别是Text文本内容FontSize字体大小VerticalAlignment垂直对齐Margin外边距FontWeight字体加粗这些都是在css中的样式属性名称因此需要有CSS基础对盒子模型要熟悉所以有web前端开发的人能很好理解这些特别注意Margin是表示外边距Padding表示内边距两者是不同的意思。
1、先看左边
看一下左侧的布局用的StackPanel它能将子元素排列成水平或垂直的一行属于布局控件通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线当移除一个元素后后面的元素会自动向前填充空缺。 2、再看右边
右边的分5行2列每行放一个控件控件里放不同的具体控件通过 Grid.Row0 Grid.Column0 Grid.ColumnSpan2来确定控件放哪行哪列ColumnSpan表示跨2列也就是指这列占2列的宽度这跟表格的跨行跨列的意思是一样的。 第一行的stackpanel和第二行的stackpanel是不一样的对齐方式第一行是水平对齐第二是垂直对齐两者虽然都是stackpanel但不一样通过Orientation来改变默认当然是水平对齐控件的commandstyle是指命令绑定和样式后面会讲。
StackPanel 的几个常用的属性介绍 BackgroundBrush对象背景。 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的分享
