WPF进阶之MVVM教程(六)：终极版（附源码）

剑指工控 星期四, 04/13/2023 - 09:21 发表

自写了WPF入门系列（点击学习）文章，收到很多大学生的私信，经常会问一些MVVM的问题，由于自己对MVVM也并不了解，遇到问题也是经常请朋友帮忙看看，趁着业余时间，经过一段时间得学习、开始写MVVM系列的文章，主要写一下自己对MVVM的理解，希望这不仅是对自己成长的记录，也能对同学们有所帮助。

来吧，让我们再次起航，WPF从入门到放弃，再到进阶之路！

欢迎大家在剑指工控技术群里继续讨论、共同学习！

来吧！一起学起来！

  1. WPF进阶之MVVM教程(一)

  2. WPF进阶之MVVM教程(二)（附源码下载）

  3. WPF进阶之MVVM教程(三)-点餐系统实操

  4. WPF进阶之MVVM教程(四)：读取xml文件

  5. WPF进阶之MVVM教程(五)：ViewModel

第6讲

MVVM教程(六)-终极版

基本工作已经完成了，接下来开始View的编写。

首先将Title的内容改成动态变化的，设置Title="{Binding Restaurant.Name, StringFormat=\{0\}-在线订餐}" 这里使用反斜杠字符来转义花括号。

以及设置窗口大小以及启动位置。 

图片

图片

设置边框(Border) BorderBrush="Orange"：设置边框的颜色为橙色、BorderThickness="3"：设置边框的粗细为3个单位、CornerRadius="6"：设置边框的圆角半径为6个单位、 Background="Yellow"：设置边框的背景色为黄色。 

图片

首先建一个grid，建三行分别显示餐厅信息、菜单信息、下单按钮。

三行的高度分别为Auto、*、Auto，这样使得窗口在调整大小时能够保持餐厅信息显示在窗口的顶部，下单按钮显示在窗口的底部，而菜单则占据窗口的中间部分，并随着窗口的大小调整而自适应。

第一行显示内容：显示餐厅名称、地址和电话。使用多个StackPanel来组织元素。第一个StackPanel包含两个TextBlock元素，它们呈水平排列，使用DropShadowEffect来达到阴影效果。第二个和第三个StackPanel都包含两个TextBlock元素，它们分别表示餐厅地址和电话。 

图片

第二行显示内容：

AutoGenerateColumns="False"表示关闭自动生成列的功能，这里用到手动创建列GridLinesVisibility="None"表示不显示网格线

CanUserAddRows="False"表示不允许用户添加行

CanUserDeleteRows="False"分别表示不允许用户删除行

Margin="4"表示控件与周围元素的距离为4个像素

Grid.Row="1"表示放置在Grid控件的第二行

数据源绑定DishMenu，将会自动显示所有菜品信息。

DataGrid.Columns中定义了每列

DataGridTextColumn分别定义了菜品、种类、点评、推荐分数四列，分别绑定Dish.Name、Dish.Category、Dish.Comment、Dish.Score

DataGridTemplateColumn绑定了IsSelected的属性，用于表示该菜品是否被选中

SortMemberPath="IsSelected" 定义绑定到列的属性名，用户单击该列的列头时进行排序

CellTemplate定义了一个CheckBox控件

IsChecked属性绑定了IsSelected属性，控制是否选中

UpdateSourceTrigger=PropertyChanged表示在CheckBox被选中或取消选中时，立即更新数据源。

Command属性绑定了DataContext中的SelectMenuItemCommand，表示当CheckBox被选中时，执行SelectMenuItemCommand命令。通过RelativeSource属性，找到DataGrid控件，然后绑定SelectMenuItemCommand。这样就可以在CheckBox被选中时执行ViewModel中的SelectMenuItemCommand命令。 

图片

第三行显示内容：用于展示共计、订单总数、“下单”按钮。

TextBlock控件用于显示“共计”这个文字

TextBox控件用于显示订单总数，Text属性绑定到Count属性，用于显示订单总数

Button控件用于提交订单，Content="Order"表示按钮上的文字为“Order”，Command属性绑定到PlaceOrderCommand命令，用于处理提交订单的逻辑。 

图片

最终的成品效果如下： 

图片

最后可以自定义餐馆信息。 

图片

MVVM进阶教程暂时分享到这里。

源码下载链接：

https://share.weiyun.com/9nALRfyu

如果需要下载，入剑指工控技术群后，联系各群群管理员。
（需入群请联系如下美女管理员图片）

图片

最后祝大家都能学有所成。

就这么简单！

作者简介：

曹言林：加入工控八余载，从事过单片机编程、控制柜接线、设备维修，PLC编程、上位机编程、MES实施。对各方面虽不是专家级别，也愿为工控圈添砖加瓦，贡献自己的一份力量。

WPF从入门到放弃-回顾

  1. WPF入门到放弃（一） | 安装与创建

  2. WPF入门到放弃（二） | 初识XAML

  3. WPF入门到放弃（三）| 制作串口调试助手

  4. WPF入门到放弃（四）| 给串口调试助手列表赋值（附调试软件）

  5. WPF入门到放弃（五）| 串口的读取与写入（程序&附串口调试精灵）

  6. WPF入门到放弃（六）| 画面优化与发布（附源程序）

  7. WPF入门到放弃（七）| 常用布局控件的用法

  8. WPF入门到放弃（八）| 常用的控件（二）

  9. WPF入门到放弃（九）|  读取excel数据并写入sqlite数据库中（附免安装连接数据库工具）

  10. WPF入门到放弃（完结篇）| sqlite以及数据复用（附总源码分享）

欢迎大家在剑指工控技术群里继续讨论、共同学习！来吧！一起学起来！

 

Tags: 
WPF