当前位置：首页 > news >正文

WPF-MVVM的简单入门（第一个MVVM程序）

news 2025/10/24 8:45:38

来自群友毕方的投稿，给大家做一个MVVM的体验demo

1.MVVM 是什么？

MVVM是一种设计模式，核心思想是实现将界面（View）与逻辑（ViewModel）彻底分开，实现前后端分离

2.MVVM的三大元素

一、Model （模型）数据类，例如一个 User类有Name、Age属性

二、View （视图，窗口，页面）用户能看到的界面 UI

三、ViewModel （视图模型）处理View上用户的操作，如点击按钮，输入数字，实现Mode与View的双向更新

3.下面带大家实现一个最简单的MVVM项目

1.打开Vs2022 创建一个WPF项目

a、把原来的MainWindow.xaml删掉

b、然后添加分别三个文件夹（Models、ViewModels、Views）

c、在Views文件夹中添加窗口（WPF），命名MainWindow，如下图

在App.xaml中修改StartupUri为

StartupUri="Views/MainWindow.xaml"，如图

2.设计界面

实现效果：按下按钮后，展示姓名和年龄到输入框

界面代码如下

<Window x:Class="第一个MVVM程序.Views.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:第一个MVVM程序.Views"mc:Ignorable="d"Title="MainWindow" Height="220" Width="350"><Grid><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="auto" /><RowDefinition Height="auto" /></Grid.RowDefinitions><StackPanel Orientation="Horizontal"><Label  Width="50"  Height="30"  Content=" 姓名" /><TextBox  x:Name="TexBoxName" Width="100"  Height="20"  Text="{Binding User.Name}" /></StackPanel><StackPanel Grid.Row="1" Orientation="Horizontal"><Label Width="50" Height="30" Content=" 年龄" /><TextBox  x:Name="TexBoxAge"   Width="100"  Height="20" Text="{Binding User.Age}" /></StackPanel><StackPanel Grid.Row="2" Orientation="Horizontal"><Button Width="100"  Height="20"  Margin="20,0"  Click="Button_Click" Content="显示" /></StackPanel></Grid>
</Window>

3.View设计完毕，添加Model与ViewModel类

Model（User.cs）

ViewModel（MainWindowModels,cs）

using System.ComponentModel;
using 第一个MVVM程序.Models;namespace 第一个MVVM程序.ViewModels
{public class MainWindowModel : INotifyPropertyChanged{private User _user = new User();public User User{get => _user;set{_user = value;OnPropertyChanged(nameof(User));}}public event PropertyChangedEventHandler PropertyChanged;protected virtual void OnPropertyChanged(string propertyName){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}
}

4.将View与ViewMode进行绑定

进入MainWindow.xaml.cs

using System.Windows;
using 第一个MVVM程序.Models;
using 第一个MVVM程序.ViewModels;namespace 第一个MVVM程序.Views
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindowModel mainWindowModel = new MainWindowModel();  //实例化ViewModepublic MainWindow(){InitializeComponent();this.DataContext = mainWindowModel; //将View 数据上下文绑定到ViewMode}private void Button_Click(object sender, RoutedEventArgs e){mainWindowModel.User = new User { Name = "张三", Age = "18" };//直接操作UI//TexBoxName.Text = "张三";// TexBoxAge.Text = "18";}}
}

5.将UI组件与ViewModel中的属性进行绑定