WPF-MVVM双向绑定

WPF-MVVM模式简介

刚开始学习WPF的MVVM模式，在这里记录一下踩的坑，留给自己以后使用，欢迎大佬们批评指正。

首先写一个Model，继承INotifyPropertyChanged接口。

using System.ComponentModel;

namespace MVVMTest.Model
{
    public class StudentModel : INotifyPropertyChanged
    {
        /// <summary>  
        /// 学号  
        /// </summary>  
        private int _studentId;
        public int studentId
        {
            get
            {
                return _studentId;
            }
            set
            {
                _studentId = value;
                NotifyPropertyChanged("studentId");
            }
        }

        /// <summary>  
        /// 姓名  
        /// </summary>  
        private string _studentName;
        public string studentName
        {
            get
            {
                return _studentName;
            }
            set
            {
                _studentName = value;
                NotifyPropertyChanged("studentName");
            }
        }

        /// <summary>  
        /// 年龄  
        /// </summary>  
        private int _studentAge;
        public int studentAge
        {
            get
            {
                return _studentAge;
            }
            set
            {
                _studentAge = value;
                NotifyPropertyChanged("StudentAge");
            }
        }

        /// <summary>  
        /// Email  
        /// </summary>  
        private string _studentEmail;
        public string studentEmail
        {
            get
            {
                return _studentEmail;
            }
            set
            {
                _studentEmail = value;
                NotifyPropertyChanged("studentEmail");
            }
        }

        /// <summary>  
        /// 性别  
        /// </summary>  
        private string _studentSex;
        public string studentSex
        {
            get
            {
                return _studentSex;
            }
            set
            {
                _studentSex = value;
                NotifyPropertyChanged("studentSex");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

再来实现ViewModel：

using MVVMTest.Model;
using System;
using System.Windows.Input;

namespace MVVMTest.ViewModel
{
    class StudentViewModel
    {
        public DelegateCommand ShowCommand { get; set; }
        public StudentModel Student { get; set; }
        public StudentViewModel()
        {
            Student = new StudentModel();
            ShowCommand = new DelegateCommand();
            ShowCommand.ExecuteCommand = new Action<object>(ShowStudentData);
        }
        private void ShowStudentData(object obj)
        {
            Student.studentId = 12345;
            Student.studentName = "test";
            Student.studentAge = 20;
            Student.studentEmail = "[email protected]";
            Student.studentSex = "Male";
        }
    }

    public class DelegateCommand : ICommand
    {
        public Action<object> ExecuteCommand = null;
        public Func<object, bool> CanExecuteCommand = null;
        public event EventHandler CanExecuteChanged;

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

        public void Execute(object parameter)
        {
            ExecuteCommand?.Invoke(parameter);
        }

        public void RaiseCanExecuteChanged()
        {
            CanExecuteChanged?.Invoke(this, EventArgs.Empty);
        }
    }
}

绑定数据只要添加this.DataContext = new StudentViewModel();就好了

前端调用方式：

<Window x:Class="MVVMTest.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:MVVMTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Label Content="学号" Height="28" HorizontalAlignment="Left" Margin="54,23,0,0" Name="labelStudentId" VerticalAlignment="Top" />
        <TextBox Text="{Binding Student.studentId}" IsReadOnly="True" Height="23" HorizontalAlignment="Right" Margin="0,27,289,0" Name="textBoxStudentId" VerticalAlignment="Top" Width="120" />
        <Label Content="姓名" Height="28" HorizontalAlignment="Left" Margin="54,61,0,0" Name="labelStudentName" VerticalAlignment="Top" />
        <TextBox Text="{Binding Student.studentName}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,65,0,0" Name="textBoxStudentName" VerticalAlignment="Top" Width="120" />
        <Label Content="年龄" Height="28" HorizontalAlignment="Left" Margin="54,94,0,0" Name="labelStudentAge" VerticalAlignment="Top" />
        <TextBox Text="{Binding Student.studentAge}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,99,0,0" Name="textBoxStudentAge" VerticalAlignment="Top" Width="120" />
        <Label Content="Email" Height="28" HorizontalAlignment="Left" Margin="50,138,0,0" Name="labelStudentEmail" VerticalAlignment="Top" />
        <TextBox Text="{Binding Student.studentEmail}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,141,0,0" Name="textBoxStudentEmail" VerticalAlignment="Top" Width="120" />
        <Label Content="性别" Height="28" HorizontalAlignment="Left" Margin="57,176,0,0" Name="labelStudentSex" VerticalAlignment="Top" />
        <TextBox Text="{Binding Student.studentSex}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,180,0,0" Name="textBoxStudentSex" VerticalAlignment="Top" Width="120" />
        <Button Command="{Binding ShowCommand}" Content="显示" Height="23" HorizontalAlignment="Left" Margin="345,27,0,0" Name="buttonShow" VerticalAlignment="Top" Width="75" />
    </Grid>

</Window>