1 Create a new WPF application WPFMVVMExample
The program structure is shown in the figure below.
2 Model implementation
Create a new business class StudentModel (class file StudentModel.cs) under the Model folder. The detailed code of the class is as follows.
using System.ComponentModel;
namespace WPFMVVMExample.Model
{
public class StudentModel : INotifyPropertyChanged
{
/// <summary>
/// student ID
/// </summary>
private int studentId;
public int StudentId
{
get
{
return studentId;
}
set
{
studentId = value;
NotifyPropertyChanged("StudentId");
}
}
/// <summary>
/// Name
/// </summary>
private string studentName;
public string StudentName
{
get
{
return studentName;
}
set
{
studentName = value;
NotifyPropertyChanged("StudentName");
}
}
/// <summary>
/// age
/// </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>
/// gender
/// </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));
}
}
}
}
The StudentModel class implements the interface INotifyPropertyChanged. When a class implements this interface, it can notify the client performing the binding that a property value has changed.
3 ViewModel implementation
Create a new class file StudentViewModel.cs in the ViewModel folder. The detailed code of the class file is as follows.
using System;
using System.Windows.Input;
using WPFMVVMExample.Model;
namespace WPFMVVMExample.ViewModel
{
public 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 = 1;
Student.StudentName = "tiana";
Student.StudentAge = 20;
Student.StudentEmail = "[email protected]";
Student.StudentSex = "Big handsome guy";
}
}
public 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);
}
}
}
}
In the code, in addition to defining the StudentViewModel class, the DelegateCommand class is also defined, which implements the ICommand interface.
The Execute() method in the ICommand interface is used for command execution, and the CanExecute() method is used to indicate whether the current command is available on the target element. When this availability changes, the CanExecuteChanged event in the interface is triggered.
We can assign the command DelegateCommand that implements the ICommand interface to the Command property of the Button (command source) (only elements that implement the ICommandSource interface have this property), so that the Button is bound to the command.
4 MainWindow.xaml implementation
The interface of MainWindow.xaml is shown in the figure below.
The xaml code of the MainWindow.xaml interface is as follows.
<Window x:Class="WPFMVVMExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Label Content="Student ID" 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="Name" 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="Age" 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="Gender" 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="Show" Height="23" HorizontalAlignment="Left" Margin="345,27,0,0" Name=" buttonShow" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
The backend code for MainWindow.xaml is as follows.
using System.Windows;
using WPFMVVMExample.ViewModel;
namespace WPFMVVMExample
{
/// <summary>
///Interaction logic of MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new StudentViewModel();
}
}
}
5 Run the program
Run the program and click the “Display” button to bind the data to the interface display.
6 instructions
The use of MVVM in WPF can reduce the coupling between UI display and back-end logic code. That is, when changing the interface, only a small amount of logic code needs to be modified, or even no modification is required.
In WinForm development, we usually directly operate the elements of the interface (such as: TextBox1.Text=”aaa”). In this way, after the interface changes, the back-end logic code also needs to be changed accordingly.
Using the data binding mechanism in WPF, when the data changes, the data will notify the interface of the change, without the need to modify the value by accessing the interface elements. In this way, there is no need to operate or rarely operate the interface in the back-end logic code. element.
Using MVVM can work well with WPF’s data binding mechanism to achieve the separation of UI and logic code. View in MVVM represents the interface and is responsible for page display. ViewModel is responsible for logic processing, including data and commands to be bound. ViewModel passes The DataContext property of View is bound to View, and Model is the business model for use by ViewModel.
Original address: https://blog.csdn.net/yl2isoft/article/details/20838149