使用MVVM构建一个简单的WPF应用

喜欢ヅ旅行 2021-09-10 19:20 511阅读 0赞

使用MVVM构建一个简单的WPF应用，本实例将使用MVVM、WPF构建一个简单计算器（如图1）。

![Center][]

图1 简单计算器

**1、构建解决方案**

首先VS中创建解决方案，并命名为：SimpleCalculator。

然后添加项目：

（1）View层：Simple.Calculator.WinForm

（2）ViewModel层：Simple.Calculator.ViewModel

（3）Model层：Simple.Calculator.Model

**2、实现Model层**

在Model层中创建CalculatorModel.cs（计算器实体类），并实现INotifyPropertyChanged接口。

using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace Simple.Calculator.Model
    {
        /// <summary>
        /// 计算器实体类
        /// </summary>
        public class CalculatorModel : INotifyPropertyChanged
        {
            private int _number1;
            /// <summary>
            /// 数字1
            /// </summary>
            public int Number1
            {
                get { return _number1; }
                set
                {
                    _number1 = value;
                    NotifyPropertyChanged("Number1");  
                }
            }
    
            private int _number2;
            /// <summary>
            /// 数字2
            /// </summary>
            public int Number2
            {
                get { return _number2; }
                set
                {
                    _number2 = value;
                    NotifyPropertyChanged("Number2");
                }
            }
    
            private int _result;
            /// <summary>
            /// 计算结果
            /// </summary>
            public int Result
            {
                get { return _result; }
                set
                {
                    _result = value;
                    NotifyPropertyChanged("Result");
                }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
            public void NotifyPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }  
        }
    }

**3、实现ViewModel层**

在ViewModel层中创建Common目录，并添加ViewModelBase .cs类。

using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace Simple.Calculator.ViewModel.Common
    {
        public abstract class ViewModelBase : INotifyPropertyChanged
        {
            //属性改变事件
            public event PropertyChangedEventHandler PropertyChanged;
    
            //当属性改变的时候，调用该方法来发起一个消息，通知View中绑定了propertyName的元素做出调整
            public void RaisePropertyChanged(string propertyName)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null)
                {
                    handler(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }
    }

在Commom目录中，添加RelayCommand.cs类。

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Input;
    
    namespace Simple.Calculator.ViewModel.Common
    {
        public class RelayCommand : ICommand
        {
    
            #region Declarations
    
            readonly Func<Boolean> _canExecute;
            readonly Action _execute;
    
            #endregion
    
            #region Constructors
    
            /// <summary>
            /// Initializes a new instance of the <see cref="RelayCommand<T>"/> class and the command can always be executed.
            /// </summary>
            /// <param name="execute">The execution logic.</param>
            public RelayCommand(Action execute)
                : this(execute, null)
            {
            }
    
            /// <summary>
            /// Initializes a new instance of the <see cref="RelayCommand<T>"/> class.
            /// </summary>
            /// <param name="execute">The execution logic.</param>
            /// <param name="canExecute">The execution status logic.</param>
            public RelayCommand(Action execute, Func<Boolean> canExecute)
            {
    
                if (execute == null)
                    throw new ArgumentNullException("execute");
                _execute = execute;
                _canExecute = canExecute;
            }
    
            #endregion
    
            #region ICommand Members
    
            public event EventHandler CanExecuteChanged
            {
                add
                {
                    if (_canExecute != null)
                        CommandManager.RequerySuggested += value;
                }
                remove
                {
    
                    if (_canExecute != null)
                        CommandManager.RequerySuggested -= value;
                }
            }
    
            public Boolean CanExecute(Object parameter)
            {
                return _canExecute == null ? true : _canExecute();
            }
    
            public void Execute(Object parameter)
            {
                _execute();
            }
    
            #endregion
        }
    }

在ViewModel层中，创建CalculatorViewModel.cs（计算器ViewModel类），并继承ViewModelBase类。

using Simple.Calculator.Model;
    using Simple.Calculator.ViewModel.Common;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace Simple.Calculator.ViewModel
    {
        /// <summary>
        /// 计算器ViewModel类
        /// </summary>
        public class CalculatorViewModel : ViewModelBase
        {
            public CalculatorModel calModel = new CalculatorModel();
            /// <summary>
            /// 计算器实体类
            /// </summary>
            public CalculatorModel CalModel
            {
                get
                {
                    return this.calModel;
                }
                set
                {
                    this.calModel = value;
                    this.RaisePropertyChanged("CalModel");
                }
            }
    
            /// <summary>
            /// 计算命令
            /// </summary>
            public RelayCommand ExecuteCommand { get; set; }
    
            /// <summary>
            /// 重置命令
            /// </summary>
            public RelayCommand ResetCommand { get; set; }
    
            /// <summary>
            /// 初始化
            /// </summary>
            public CalculatorViewModel()
            {
                ExecuteCommand = new RelayCommand(Execute);
                ResetCommand = new RelayCommand(Reset);
            }
    
            /// <summary>
            /// 计算
            /// </summary>
            private void Execute()
            {
                this.CalModel.Result = this.CalModel.Number1 + this.CalModel.Number2;
            }
    
            /// <summary>
            /// 重置
            /// </summary>
            private void Reset()
            {
                this.CalModel.Number1 = 0;
                this.CalModel.Number2 = 0;
                this.CalModel.Result = 0;
            }
        }
    }

**4、实现View层**

在View层中，创建Calculator.xaml（简单计算器窗体）。

在Calculator.xaml.cs后台代码中，将窗体的DataContext属性设置为相应的ViewModel类。

using Simple.Calculator.ViewModel;
    using System.Windows;
    
    namespace Simple.Calculator.WinForm
    {
        /// <summary>
        /// Calculator.xaml 的交互逻辑
        /// </summary>
        public partial class Calculator : Window
        {
            public Calculator()
            {
                InitializeComponent();
                this.DataContext = new CalculatorViewModel();
            }
        }
    }

最后就可以启动运行项目了。

[Center]: /images/20210724/4bd16398d7344832815f7069d8e3b15d.png