博客

MVVM简单应用实践（一）

  • Post author:
  • Post category:其他




0. MVVM介绍及前置知识

在这里插入图片描述

上图来自

维基

。组成要素：

  • Model：表示具体数据内容（represents real state content）
  • View：界面展示
  • View Model：View的抽象，提供公共属性和命令（an abstraction of the view exposing public properties and commands），业务代码
  • Binder：（a view directly binds to properties on the view model to send and receive updates.）

界面交互方式：

  • 通过 RoutedEvents 响应
  • 通过命令Command（Commands provides glue between View and ViewModel for interactivity）



1. 初始工作

首先建立三个文件夹，用以存放Command、ViewModel和View

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsUfnxGh-1598865469396)(C8A854E7B6DC49898282E64AE92BC2DE)]



2. 创建view

在这里插入图片描述

在MainWindow.xaml中添加如下代码

在这里插入图片描述



3. 实现Commands

以加法命令为例（命名为：PlusCommand）：

  1. 继承接口ICommand
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDEwx3VB-1598865469403)(527795DABD77400C943B4754E9CA85A5)]

在ICommand接口中包含三个成员（两个方法、一个事件）：

成员 含义
public bool CanExecute(object parameter) 如果返回true，则关联的Command命令将被执行。此方法接受一个object参数，通常传递

委托

，比如Action、Predicate 、Func。
public void Execute(object parameter) 当方法CanExecute返回true时，此方法开始执行相应的Command命令。同样，此方法接受一个object参数，通常传递

委托

。
event EventHandler CanExecuteChanged 当命令可执行状态发生改变时，被激发（This is used to notify the UI controls associated with Command if Command can be executed. Based on notification of this event, UI controls change its status as enabled or disabled. Basically, while “CanExecute” method executes and if there is a change in method’s output (true/false) then this event is fired.）

为简单起见，在方法CanExecute直接返回true，而在方法Execute中执行具体命令。 

public bool CanExecute(object parameter)
{
    return true;
}

public void Execute(object parameter)
{
    calculatorVM.Add();
}



4. 创建View Model

  • 添加成员变量及其属性

    在这里插入图片描述

  • 实现AddCommand 

public ICommand AddCommand
{
    get
    {
        return plusCommand;
    }
}
  • 继承INotifyPropertyChanged

    这样当对应成员变量值改变时，可以通知到与之绑定的UI元素。

    在这里插入图片描述



5. 为View设置上下文

  • 法一：在view对应的.cs文件中添加如下代码 
public partial class CalculatorView : UserControl
{
    public CalculatorView()
    {
        InitializeComponent();
        this.DataContext = new CalculatorVM();
    }
}
  • 法二：在view对应的.xaml添加如下代码

将SimpleMVVMDemo.ViewModels名称空间映射成XALM中的vm名称空间。 

xmlns:vm="clr-namespace:SimpleMVVMDemo.ViewModels"

加入到

资源

字典 

<UserControl.Resources>
        <vm:CalculatorVM x:Key="calculatorVM" />
</UserControl.Resources>

tips：通过“key-value”的形式便于资源检索。

为DataContext赋值 

<Grid DataContext="{Binding Source={StaticResource ResourceKey=calculatorVM}}">

此时，运行程序，输入数字，点击“+”，即可显示出结果。

在这里插入图片描述

同理，对“-”、“*”、“/”做相同步骤。



5. 参考


wikipedia



ICommand Interface in WPF


版权声明：本文为zxt_1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。