wpf入门第二篇 MVVM与binding

最新推荐文章于 2025-03-26 20:18:36 发布

Fanstorm丶

最新推荐文章于 2025-03-26 20:18:36 发布

阅读量4.2k

点赞数 3

分类专栏： C# WPF 文章标签： WPF 入门

本文链接：https://blog.csdn.net/wf824284257/article/details/88758707

版权

本文是wpf入门系列的第二篇，介绍了MVVM开发模式和binding的使用。通过创建wpf项目，定义Model、View和ViewModel，展示如何在View中通过binding与ViewModel交互。文中提供详细步骤，帮助有C#基础的读者理解和应用MVVM及binding。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文是wpf入门系列第二篇，面向有winform或者web前端基础的、并且也有C#基础的同学。

本文通过简单的例子，介绍了wpf的MVVM开发模式与binding的使用方法。

本文使用了 Visual Studio 2017 进行演示讲解。

wpf入门系列导航页面： https://blog.csdn.net/wf824284257/article/details/88757497

上一步： wpf入门第一篇基础布局与简单样
https://blog.csdn.net/wf824284257/article/details/88757467

开始

MVVM，即Model-View-ViewModel的首字母缩写，在这种开发模式下常用binding来对View和ViewModel进行绑定。下面我们通过一个简单的例子来，一步一步的来进行说明。

打开VS2017,菜单栏点击【文件】->【新建】->【项目】，选择wpf项目，取名为 WpfTest2 ，选好路径后点击确认。

添加三个文件夹，分别命名为Models，Views，ViewModels。

在Models文件夹中，添加Student类，并将Student.cs代码替换为如下代码：

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

namespace WpfTest2.Models
{
    public class Student
    {
        public string id { get; set; }
        public string name { get; set; }
    }
}

在Models文件夹中，添加Score类，并将Score.cs代码替换为如下代码：

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

namespace WpfTest2.Models
{
    public class Score
    {
        public string stuId { get; set; }
        public string subject { get; set; }
        public int score { get; set; }

    }
}

在ViewModels文件夹中，添加CardViewModel类，并将代码替换为如下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WpfTest2.Models;

namespace WpfTest2.ViewModels
{
    public class CardViewModel
    {
        public Student student { get; set; }
        public Score score { get; set; }
    }
}

从上面的步骤可以看出，我们有了两个Model，一个ViewModel。实际开发中，Model一般是数据库表映射的实体，而ViewModel是我们自定义的与一个View完全绑定的数据模型。下面我们在Views文件夹中，添加一个用户控件，命名为Card. 并将Card.xaml代码替换为：