WPF MVVM从入门到精通1:MVVM模式简介

WPF MVVM从入门到精通1:MVVM模式简介

WPF MVVM从入门到精通2:实现一个登录窗口

WPF MVVM从入门到精通3:数据绑定

WPF MVVM从入门到精通4:命令和事件

WPF MVVM从入门到精通5:PasswordBox的绑定

WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定

WPF MVVM从入门到精通7:关闭窗口和打开新窗口

WPF MVVM从入门到精通8:数据验证

完整示例代码下载LoginDemo

刚开始接触和使用MVVM模式的时候,就有一种感觉:哇,实现这么一丁点的功能,竟然要写这么多代码,太麻烦了吧!但是后来当我熟悉了这种模式之后,感觉就变成了:哇,还是这么麻烦。

没错,使用MVVM模式的确要在项目中增加很多代码。不过MVVM设计模式是有它的优点的,不然就不会存在。把界面和业务逻辑分离,这是MVVM的根本目的。WPF的依赖属性、数据绑定等机制,很好地帮助我们实现MVVM模式,基本可以做到在界面层不出现业务逻辑代码。

我们先来看一下MVVM模式的基本结构:

View就是界面,可以理解为XAML文件创作的内容。

Model是数据,是界面需要的数据。有人会在Model这一层里加入少量的逻辑代码,但我认为,这样破坏了Model的纯净性。

最复杂的内容都放在ViewModel里面。很多时候,逻辑代码也是可以分层、分块的,可以把这些代码放在一个辅助类库里面,然后ViewModel去调用它。

一般情况下,一个View对应一个ViewModel和一个Model。但在某些场合可以适当调整。例如,界面中某些数据是需要保存到文件的,某些只是辅助界面的显示而已,这时候,我们可以使用多个Model去存放。

最理想的情况下,实现MVVM模式后,跟View关联的CS文件会是如下面的代码所示:

using LoginDemo.ViewModel.Login;
using System.Windows;

namespace LoginDemo
{
    /// <summary>
    /// LoginWindow.xaml 的交互逻辑
    /// </summary>
    public partial class LoginWindow : Window
    {
        public LoginWindow()
        {
            InitializeComponent();

            this.DataContext = new LoginViewModel();
        }
    }
}

对,其实就是在自动生成的代码里面加入了this.DataContext = new LoginViewModel();这一行。除此之外,这个文件再没有其他代码了。而实际上(带有个人想法),在一般的项目中,后台代码都没必要这么简洁。有些界面操作,是非常固定的,没必须写一大堆代码来实现。例如点击一个按钮就关闭窗口,这个功能没必要关联命令、关联事件去实现了。

我们同时从上面的代码看出,View和ViewModel的交互是通过DataContext这一对象来完成的。先上图:

在View里面,存在着大量的绑定语句。例如,用户名输入框绑定了名称为UserName的属性,性别男单选框绑定了属性Gender,当它的值为1时显示为选中。当然,我们也希望动作可以反过来。也就是在用户名输入框改变文字时,UserName也相应地改变,点击性别男时,Gender被设为1。在View里面,不需要写任何后台代码,只通过绑定就能完成前面所说的功能。有趣的是,UserName和Gender这两个属性究竟在哪里定义(甚至不一定存在),View是不关心的。它一直在等待着消息,当有人告诉它,UserName已经改成XXX了,它马上把输入框的内容改成XXX。当用户在输入框里输入OOO时,它就像广播一样,大声地喊:UserName要改成OOO了。究竟有没有人听到并做出处理呢?它并不关心。

ViewModel里面定义了大量的依赖属性。当这些属性改变时,它们会触发一个属性更改的通知事件。例如UserName="XXX";这个语句执行后,ViewModel就像广播一样大声地喊:UserName改成XXX了!同样的,有没有人听到,如何处理,它都不关心。

如此我们可以看到,在开始一个项目之前,只要我们把界面草图画好,功能大致确定好,程序员和美工就可以分头行事,各干各的了。这就是MVVM模式要做到的事情。

在后面的登录界面例子中,我们将一步步实现一个比较理想的MVVM模式程序。

 

### WPF MVVM 模式的实现 #### 1. 理解MVVM架构的核心组件 在WPF应用程序中,MVVM(Model-View-ViewModel)模式是一种设计模式,用于分离关注点并提高代码的可维护性和测试性。该模式由三个主要部分组成: - **Model**:表示业务逻辑和数据模型。 - **View**:负责UI展示,通过XAML定义界面布局。 - **ViewModel**:作为视图与模型之间的桥梁,封装了视图的状态和行为,并实现了`INotifyPropertyChanged`接口来通知视图更新[^2]。 #### 2. 创建一个简单的登录窗口示例 为了更好地理解如何在实际项目中应用MVVM模式,在此提供一个基于WPF的简单登录窗体实例说明。这个例子来源于一个开源仓库,其中包含了详细的源码文件供开发者参考学习[^1]。 #### 3. 实现ViewModel中的属性变更通知 为了让视图能够响应于ViewModel的变化而动态刷新显示内容,需要确保所有的公共属性都触发相应的更改事件。这里给出了一种常见的做法——利用`SetAndNotify()`方法简化属性设置过程的同时完成变更通知功能[^3]。 ```csharp using System.ComponentModel; public class LoginViewModel : INotifyPropertyChanged { private string _username; /// <summary> /// 用户名属性 /// </summary> public string Username { get => _username; set => SetAndNotify(ref _username, value); } // ... 其他成员 ... protected bool SetAndNotify<T>(ref T field, T newValue, [CallerMemberName]string propertyName = null) { if (EqualityComparer<T>.Default.Equals(field, newValue)) return false; field = newValue; OnPropertyChanged(propertyName); return true; } } ``` 上述代码片段展示了如何创建一个遵循MVVM原则的ViewModel类,并且使用泛型辅助函数`SetAndNotify()`处理属性赋值及其变化后的通知工作。 #### 4. 绑定控件到ViewModel的数据上下文中 最后一步是在XAML标记里声明各个UI元素与其对应的ViewModel属性之间建立双向绑定关系。下面是一个典型的登录表单片段,它将文本框的内容链接到了上面提到的`Username`字段上。 ```xml <Window x:Class="LoginApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="Login Window"> <!-- 设置整个窗口的数据上下文 --> <Window.DataContext> <local:LoginViewModel /> </Window.DataContext> <Grid Margin="8"> <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top"> <!-- 输入用户名 --> <TextBox Width="200" Height="30" Margin="0,5" Text="{Binding Path=Username, Mode=TwoWay}"/> <!-- 更多控件... --> </StackPanel> </Grid> </Window> ``` 以上就是关于如何在一个具体的场景下运用WPF配合MVVM模式构建交互式用户界面的一个基本介绍。希望这些信息能帮助读者建立起对该主题更深入的认识。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值