WPF MVVM 初识

这个案例是实现把两个TextBox的值连起来放入第三个TextBox中。

第一步：窗体设计代码我就不贴出来了。

第二步：新建NotificationObject继承INotifyPropertyChanged接口，WPF中类要实现这个接口，其属性成员才具备通知UI的能力

 class NotificationObject: INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged(string PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }
    }

第三步：新建DelegateCommand继承ICommand接口，WPF中实现了ICommand接口的类，才能作为命令绑定到UI

 class DelegateCommand : ICommand
    {
        public Action<object> ExecuteCommand = null;

        public Func<object, bool> CanExecuteCommand = null;

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            if (CanExecuteCommand != null)
            {
                return this.CanExecuteCommand(parameter);
            }
            else
            {
                return true;
            }
        }

        public void Execute(object parameter)
        {
            if (this.ExecuteCommand != null) this.ExecuteCommand(parameter);
        }

        public void RaiseCanExecuteChanged()
        {
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, EventArgs.Empty);
            }
        }
    }

第四步：新建Model继承NotificationObject

 class Model : NotificationObject
    {
        private string input1;
        private string input2;
        private string output;

        public string Input1
        {
            get { return input1; }

            set
            {
                input1 = value;
                RaisePropertyChanged("Input1");
            }
        }
        public string Input2
        {
            get { return input2; }

            set
            {
                input2 = value;
                RaisePropertyChanged("Input2");
            }
        }
        public string Output
        {
            get { return output; }

            set
            {
                output = value;
                RaisePropertyChanged("Output");
            }
        }
    }

第五步：新建ViewModel，实现逻辑代码，绑定命令

class ViewModel
    {
        public Model Model { get; set; }

        public void Add(object parameter)
        {
            Model.Output = Model.Input1 + Model.Input2;
        }

        public DelegateCommand AddCmd { get; set; }
        public ViewModel()
        {
            Model = new Model();
             AddCmd = new DelegateCommand();
            AddCmd.ExecuteCommand = new Action<object>(Add); 
        } 
    }

第六步：给UI 控件绑定值和命令

 <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="47,111,0,0" TextWrapping="Wrap" Text="{Binding Model.Input1}" VerticalAlignment="Top" Width="66"/>
        <TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="23" Margin="153,111,0,0" TextWrapping="Wrap" Text="{Binding Model.Input2}" VerticalAlignment="Top" Width="82"/>
        <TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="23" Margin="367,111,0,0" TextWrapping="Wrap" Text="{Binding Model.Output}" VerticalAlignment="Top" Width="74"/>
        <Button x:Name="button" Content="Add" HorizontalAlignment="Left" Margin="262,111,0,0" VerticalAlignment="Top" Width="75" Command="{Binding AddCmd}"/>

第七步：给窗体绑定ViewModel

  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }

最后的效果图：