MPF之MVVM模型初探，做一个简单的计算器

今天在B站看朝夕教育的视频，学到MVVM模型，觉得很有必要掌握一下，就跟着做了一个小项目，同时也增加了一些自己的想法。

一、项目下创建三个文件夹，分别为Models\View\ViewModels

1.Models：用来管理模型对象

2.View:用来管理UI视图画面

3.ViewModels：用来管理实现业务逻辑

二、首先心中有画，将UI效果图做出来

完整代码直接粘上

<Window x:Class="MVVM_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MVVM_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="200">
    <Border Background="Beige" BorderBrush="Black" BorderThickness="3">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2*"/>                
            </Grid.RowDefinitions>
            <Border Background="Gray" BorderBrush="Aqua" BorderThickness="3" Grid.Row="0"  CornerRadius="10">
                <Grid Background="#FFB5D3A5" >
                    <Grid.RowDefinitions >
                        <RowDefinition Height="1.5*" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Label Content="算式:" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Label Content="结果:" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Border Margin="0 5 5 5" CornerRadius="10" Grid.Row="0" Grid.Column="1" Background="WhiteSmoke">
                        <TextBlock Grid.Column="1" Grid.Row="1"  Background="Black" Foreground="White" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Model.Value1}" />
                    </Border>
                    <Border Margin="0 5 5 5" CornerRadius="10" Grid.Row="1" Grid.Column="1" Background="WhiteSmoke">
                        <TextBlock Grid.Column="1" Grid.Row="1"  Background="Black" Foreground="White" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Model.Value4}" />
                    </Border>

                </Grid>                
            </Border>
            <Border Background="Gray" BorderBrush="AntiqueWhite" BorderThickness="2" Grid.Row="1" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Label  Grid.Column="0" Content="数字1：" VerticalAlignment="Center" />
                    <TextBox Grid.Column="1" Margin="0 0 10 0" Background="White" Foreground="Black" FontSize="18"  VerticalAlignment="Center"  Text="{Binding Model.Value2}"/>
                </Grid>               
            </Border>
            <Border Background="Gray" BorderBrush="AntiqueWhite" BorderThickness="2" Grid.Row="2" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Label  Grid.Column="0" Content="数字2：" VerticalAlignment="Center" />
                    <TextBox Grid.Column="1" Margin="0 0 10 0" Background="White" Foreground="Black" FontSize="18"  VerticalAlignment="Center"  Text="{Binding Model.Value3}"/>
                </Grid>
            </Border>
            <Border Background="Gray" BorderBrush="AntiqueWhite" BorderThickness="2" Grid.Row="3" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Button Content="加法（+）"  Grid.Row="0" Grid.Column="0" Command="{Binding Model.BthCommandJia}"/>
                    <Button Content="减法（-）"  Grid.Row="0" Grid.Column="1" Command="{Binding Model.BthCommandJian}"/>
                    <Button Content="乘法（*）"  Grid.Row="1" Grid.Column="0" Command="{Binding Model.BthCommandChen}"/>
                    <Button Content="除法（/）"  Grid.Row="1" Grid.Column="1" Command="{Binding Model.BthCommandChu}"/>
                </Grid>
            </Border>
        </Grid>
    </Border> 
</Window>

效果如下

 三、根据下图分别创建Model.cs/ExampleViewModel.cs/Command.cs这三个类

Model.cs代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVM_Test.Models
{
   public class Model:INotifyPropertyChanged //继承这个接口来实现程序端修改数据后能够实时刷新UI界面的值
    {
        private string value1 { get; set; }
        public double Value2 { get; set; } = 20;
        public double Value3 { get; set; } = 30;
        private double value4;

        public double Value4
        {
            get { return value4; }
            set
            {
                value4 = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Value4")); 
            }
        }
        public string Value1
        {
            get { return value1; }
            set
            {
                value1 = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Value1"));
            }
        }

        public Command BthCommandJia { get; set; }
        public Command BthCommandJian { get; set; }
        public Command BthCommandChen{ get; set; }
        public Command BthCommandChu{ get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

ExampleViewModel.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MVVM_Test.Models;

namespace MVVM_Test.ViewModels
{
   public  class ExampleViewModel
    {
        public Model Model { get; set; } = new Model();

        

        public ExampleViewModel()
        {
            Model.BthCommandJia = new Command();
            Model.BthCommandJia.DoExecute = new Action(Jia);

            Model.BthCommandJian = new Command();
            Model.BthCommandJian.DoExecute = new Action(Jian);

            Model.BthCommandChen = new Command();
            Model.BthCommandChen.DoExecute = new Action(Chen);

            Model.BthCommandChu = new Command();
            Model.BthCommandChu.DoExecute = new Action(Chu);
        }

        public void Jia()
        {
            Model.Value4 = Model.Value2 + Model.Value3;
            Model.Value1 = Model.Value2 +"+"+ Model.Value3;
        }

        public void Jian()
        {
            Model.Value4 = Model.Value2 - Model.Value3;
            Model.Value1 = Model.Value2 + "-" + Model.Value3;
        }

        public void Chen()
        {
            Model.Value4 = Model.Value2 * Model.Value3;
            Model.Value1 = Model.Value2 + "*" + Model.Value3;
        }

        public void Chu()
        {
            Model.Value4 = Model.Value2 / Model.Value3;
            Model.Value1 = Model.Value2 + "/" + Model.Value3;
        }
    }
}

Command.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MVVM_Test
{
    public class Command : ICommand
    {
        public event EventHandler CanExecuteChanged;

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

        public void Execute(object parameter)
        {
            DoExecute?.Invoke();//如果委托不为空就执行
        }

        public Action DoExecute { get; set; } //定义一个委托
    }
}

四、代码介绍

1.Command这一个类继承ICommand，主要是为了实现控件绑定执行代码。

2.ExampleViewModel这个类里面全是实现业务逻辑的方法。同时也在这里面会实例化2个对象，一个是模型对象，另一个是执行命令的对象（委托绑定一个方法）。

3.Model这个类里面是针对界面控件而生，有多少个控件对象要绑定，就创建多少个属性。如果有数据要回写画面，就必须继承INotifyPropertyChanged接口，并修改对应属性的set方法。

4.MaiWindow主程序中要为数据资源做一个绑定。即this.DataContext=new ExampleViewModel();

namespace MVVM_Test
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext =new ExampleViewModel();
        }
    }
}

最后，祝大家越学越开心，代码有不明白的地方请留言。