WPF新境界：MVVM設(shè)計(jì)模式解析與實(shí)戰(zhàn)，構(gòu)建清晰可維護(hù)的用戶界面
作者：架構(gòu)師老盧
MVVM設(shè)計(jì)模式通過將應(yīng)用程序分為模型、視圖和視圖模型，實(shí)現(xiàn)了解耦和分離關(guān)注點(diǎn)的目標(biāo)。上述實(shí)例演示了如何在WPF中應(yīng)用MVVM，通過數(shù)據(jù)綁定和命令使得界面邏輯更清晰、易于測試和維護(hù)。
概述：MVVM是一種在WPF開發(fā)中廣泛應(yīng)用的設(shè)計(jì)模式，通過將應(yīng)用程序分為模型、視圖、和視圖模型，實(shí)現(xiàn)了解耦、提高可維護(hù)性的目標(biāo)。典型應(yīng)用示例展示了如何通過XAML、ViewModel和數(shù)據(jù)綁定創(chuàng)建清晰、可測試的用戶界面。
什么是MVVM？
MVVM（Model-View-ViewModel）是一種用于構(gòu)建用戶界面的軟件設(shè)計(jì)模式，它將應(yīng)用程序分為三個(gè)核心組件：模型（Model）、視圖（View）和視圖模型（ViewModel）。MVVM的目標(biāo)是實(shí)現(xiàn)界面邏輯與用戶界面的分離，提高代碼的可維護(hù)性和可測試性。
為什么要用MVVM？
MVVM帶來了以下優(yōu)點(diǎn)：
- 松散耦合： 模型、視圖、和視圖模型相互獨(dú)立，降低了各個(gè)組件之間的耦合度。
- 可維護(hù)性： 分離關(guān)注點(diǎn)使得代碼更易于理解和維護(hù)。
- 可測試性： 視圖模型可以方便地進(jìn)行單元測試，無需依賴具體的UI元素。
MVVM應(yīng)用實(shí)例：
1.創(chuàng)建模型（Model）：定義數(shù)據(jù)模型。
public class PersonModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}2.創(chuàng)建視圖模型（ViewModel）：實(shí)現(xiàn)業(yè)務(wù)邏輯和與視圖相關(guān)的命令。
public class PersonViewModel : INotifyPropertyChanged
{
private PersonModel _person;
public PersonViewModel()
{
_person = new PersonModel();
}
public string FirstName
{
get { return _person.FirstName; }
set
{
if (_person.FirstName != value)
{
_person.FirstName = value;
OnPropertyChanged(nameof(FirstName));
}
}
}
public string LastName
{
get { return _person.LastName; }
set
{
if (_person.LastName != value)
{
_person.LastName = value;
OnPropertyChanged(nameof(LastName));
}
}
}
// INotifyPropertyChanged實(shí)現(xiàn)省略...
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}3.創(chuàng)建視圖（View）：利用XAML定義用戶界面。
<Window x:Class="MVVMSample.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:MVVMSample"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="300">
<Grid>
<StackPanel Margin="10">
<TextBox Text="{Binding FirstName}" Margin="0 0 0 5"/>
<TextBox Text="{Binding LastName}" Margin="0 0 0 5"/>
<Button Content="Submit" Command="{Binding SubmitCommand}"/>
</StackPanel>
</Grid>
</Window>4.將視圖與視圖模型關(guān)聯(lián)：在視圖的代碼-behind或XAML中，將DataContext設(shè)置為視圖模型的實(shí)例。
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 關(guān)聯(lián)視圖模型
DataContext = new PersonViewModel();
}
}5.實(shí)現(xiàn)提交命令（Command）：在視圖模型中定義和實(shí)現(xiàn)命令。
public class PersonViewModel : INotifyPropertyChanged
{
// 其他代碼省略...
public ICommand SubmitCommand => new RelayCommand(Submit);
private void Submit()
{
MessageBox.Show($"Submitted: {FirstName} {LastName}");
}
}MVVM設(shè)計(jì)模式通過將應(yīng)用程序分為模型、視圖和視圖模型，實(shí)現(xiàn)了解耦和分離關(guān)注點(diǎn)的目標(biāo)。上述實(shí)例演示了如何在WPF中應(yīng)用MVVM，通過數(shù)據(jù)綁定和命令使得界面邏輯更清晰、易于測試和維護(hù)。
責(zé)任編輯：姜華
來源：
今日頭條
