C# WPF上位机开发（MVVM模式开发）

news2025/1/21 1:05:43

学习过vue的同学都知道mvvm这个名词。从字面上理解，可能有点拗口，但是我们可以去理解一下它的优点是什么。mvc相信大家都明白，m就是model，v就是view，c就是control。model的话，一般就是数据，目前大多数就是数据库里面的data；v就是view，可以是网页，可以是前端；c的话，就是control，简单的看就是控件的各个回调函数。

当然，这是mvc。现在又出了一个mvvm。本质上，mvvm相当于提供了一种双向绑定的模式。即界面中的显示和实际的数据bind在一起。这样数据发生任何的改变，用户不需要重新渲染界面了。这对开发的同学来说，是十分方便的。为了说明双向绑定是怎么使用的，我们可以写一个简单的demo说明一下。

1、设计MainWindow.xaml文件

<Window x:Class="WpfApp.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"
        mc:Ignorable="d"
        xmlns:local="clr-namespace:WpfApp"
        Title="MVVMDemo" Height="300" Width="300">

    <Window.DataContext>
        <local:PersonViewModel/>
    </Window.DataContext>

    <Grid>
        <StackPanel Margin="10">
            <TextBlock Text="First Name:"/>
            <TextBox   Text="{Binding FirstName, Mode=TwoWay}" Margin="0,0,0,10"/>
            <TextBlock Text="Last Name:"/>
            <TextBox   Text="{Binding LastName, Mode=TwoWay}" Margin="0,0,0,10"/>

            <!-- New Labels to Display FirstName and LastName -->
            <TextBlock Text="First Name Displayed:"/>
            <Label Content="{Binding FirstName}" Margin="0,0,0,10"/>
            <TextBlock Text="Last Name Displayed:"/>
            <Label Content="{Binding LastName}" Margin="0,0,0,10"/>
            <Button Content="Button" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

整个界面和之前相比较，最大的不同就是多了一个DataContext。里面有一个类，就是后面要实现的PersonViewModel。另外，在Grid里面，我们看到有四个Binding，其实是两组。每一组都有一个FirstName，一个LastName。除此之外呢，还有一个Button，它主要是演示怎么从外面给界面发数据。而里面的输入呢，相当于从界面发给数据。

出来的效果应该是这样的，

2、设计MainWindow.xaml.cs文件

主窗口中有一个按钮，需要设计一个回调函数。它的主要目的就是利用DataContext给FirstName和LastName传值。按钮按下去之后呢，不管是txt中的内容，还是label中的内容，都会发生改变。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var model = this.DataContext as PersonViewModel;
            model.FirstName = "Tom";
            model.LastName = "Cruise";
        }
    }
}

3、设计PersonViewModel.cs

整个代码中，最重要的部分就是INotifyPropertyChanged的实现。xaml中我们看到了PersonViewModel这个类，到时候系统会创建一个实例。数据发生改变的时候，就会调用对应的set函数。在set函数中，我们会进一步调用子函数OnPropertyChanged，通知所有关注这个property的函数。假设没有这个函数，前面窗口中txt中数据更新之后，label中的数据是不会更新的。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp
{
    public class PersonViewModel : INotifyPropertyChanged
    {
        public static 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)); // invoke here
                }
            }
        }

        public string LastName
        {
            get { return _person.LastName; }
            set
            {
                if (_person.LastName != value)
                {
                    _person.LastName = value;
                    OnPropertyChanged(nameof(LastName)); // invoke here
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        // invoke after value was set
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class PersonModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

}

总结一下，前面我们说过双向绑定，它的意思就界面的修改和传递给变量，那么变量的修改也可以传递给界面。MainWindows中实现的是变量传给界面，而PersonViewModel实现的相当于界面传给变量。