C# WPF入门学习主线篇（三十二）—— 创建Model、View和ViewModel

Ice bear4332024-06-16 13:24

C# WPF入门学习主线篇（三十二）------ 创建Model、View和ViewModel

在前一篇文章中，我们介绍了MVVM（Model-View-ViewModel）模式的基本概念。本篇将深入探讨如何在实际开发中创建Model、View和ViewModel，并通过一个具体示例来演示它们的交互和实现。

一、创建Model

Model表示应用程序的核心数据和业务逻辑。在MVVM模式中，Model应尽量保持独立，不依赖于UI。以下是一个简单的Model示例：

csharp 复制代码 
public class Employee
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Position { get; set; }
}

二、创建View

View表示用户界面，通过XAML定义。View与ViewModel通过数据绑定进行交互，而不直接访问Model。以下是一个简单的View示例：

xml 复制代码 
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp"
        Title="MVVM Demo" Height="200" Width="300">
    <Grid>
        <StackPanel>
            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <TextBox Text="{Binding Position, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <Button Content="Update" Command="{Binding UpdateCommand}" FontSize="16" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

三、创建ViewModel

ViewModel负责从Model获取数据，并将这些数据提供给View，同时处理用户在View上的交互。ViewModel通常实现INotifyPropertyChanged接口，以便在数据变化时通知View更新UI。

1. 实现INotifyPropertyChanged接口

首先，我们需要一个辅助类来实现命令绑定。以下是一个简单的RelayCommand类：

csharp 复制代码 
using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Func<object, bool> _canExecute;

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter) => _execute(parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

2. 创建EmployeeViewModel

然后，我们创建一个EmployeeViewModel类来封装Employee数据，并实现数据绑定和命令绑定：

csharp 复制代码 
using System.ComponentModel;
using System.Windows.Input;

public class EmployeeViewModel : INotifyPropertyChanged
{
    private Employee _employee;

    public EmployeeViewModel()
    {
        _employee = new Employee { Name = "John Doe", Age = 30, Position = "Software Developer" };
        UpdateCommand = new RelayCommand(UpdateEmployee);
    }

    public string Name
    {
        get => _employee.Name;
        set
        {
            if (_employee.Name != value)
            {
                _employee.Name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public int Age
    {
        get => _employee.Age;
        set
        {
            if (_employee.Age != value)
            {
                _employee.Age = value;
                OnPropertyChanged(nameof(Age));
            }
        }
    }

    public string Position
    {
        get => _employee.Position;
        set
        {
            if (_employee.Position != value)
            {
                _employee.Position = value;
                OnPropertyChanged(nameof(Position));
            }
        }
    }

    public ICommand UpdateCommand { get; }

    private void UpdateEmployee(object parameter)
    {
        Name = "Updated Name";
        Age = 35;
        Position = "Updated Position";
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. 绑定ViewModel到View

在View的代码隐藏文件中，我们将ViewModel实例绑定到View的DataContext。

csharp 复制代码 
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new EmployeeViewModel();
        }
    }
}

四、完整代码示例

MainWindow.xaml

xml 复制代码 
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp"
        Title="MVVM Demo" Height="200" Width="300">
    <Grid>
        <StackPanel>
            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <TextBox Text="{Binding Position, UpdateSourceTrigger=PropertyChanged}" FontSize="16" Margin="10"/>
            <Button Content="Update" Command="{Binding UpdateCommand}" FontSize="16" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs

csharp 复制代码 
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new EmployeeViewModel();
        }
    }
}

Employee.cs

csharp 复制代码 
public class Employee
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Position { get; set; }
}

EmployeeViewModel.cs

csharp 复制代码 
using System.ComponentModel;
using System.Windows.Input;

public class EmployeeViewModel : INotifyPropertyChanged
{
    private Employee _employee;

    public EmployeeViewModel()
    {
        _employee = new Employee { Name = "John Doe", Age = 30, Position = "Software Developer" };
        UpdateCommand = new RelayCommand(UpdateEmployee);
    }

    public string Name
    {
        get => _employee.Name;
        set
        {
            if (_employee.Name != value)
            {
                _employee.Name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public int Age
    {
        get => _employee.Age;
        set
        {
            if (_employee.Age != value)
            {
                _employee.Age = value;
                OnPropertyChanged(nameof(Age));
            }
        }
    }

    public string Position
    {
        get => _employee.Position;
        set
        {
            if (_employee.Position != value)
            {
                _employee.Position = value;
                OnPropertyChanged(nameof(Position));
            }
        }
    }

    public ICommand UpdateCommand { get; }

    private void UpdateEmployee(object parameter)
    {
        Name = "Updated Name";
        Age = 35;
        Position = "Updated Position";
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

RelayCommand.cs

csharp 复制代码 
using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Func<object, bool> _canExecute;

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter) => _execute(parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

五、总结

通过本文，我们详细介绍了如何在WPF中创建Model、View和ViewModel，并通过一个具体示例演示了它们的交互和实现。MVVM模式通过将UI和业务逻辑分离，提高了代码的可维护性和可测试性，是WPF开发中的一种重要架构模式。希望本文能帮助你更好地理解和应用MVVM模式，提高WPF开发的水平。

相关推荐
oioihoii44 分钟前
从零到多页复用：我的WPF MVVM国际化实践
开发语言·c#·wpf
云上艺旅1 小时前
K8S学习之基础二十：k8s的coredns
学习·容器·kubernetes
mercyT2 小时前
Kotlin学习笔记之类与对象
笔记·学习·kotlin
四夕白告木贞2 小时前
stm32week6
stm32·单片机·嵌入式硬件·学习
慕容魏2 小时前
入门到入土，Java学习 day16（算法1）
java·学习·算法
charlie1145141912 小时前
从0开始的操作系统手搓教程27：下一步，实现我们的用户进程
学习·架构·系统架构·操作系统·教程·手搓教程·用户线程
瑶光守护者3 小时前
并行计算编程模型的发展方向与RISC-V的机遇
人工智能·笔记·学习·架构·risc-v
半夏知半秋4 小时前
linux下的网络抓包(tcpdump)介绍
linux·运维·服务器·网络·笔记·学习·tcpdump
Cools06134 小时前
[从零开始学习JAVA] 新版本idea的数据库图形化界面
学习
hhw1991124 小时前
C#面试题整理11
c#
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05如何本地部署AI智能体平台，带你手搓一个AI Agent06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07DeepSeek RAGFlow构建本地知识库系统08Windows 11 安装 Dify 完整指南 非docker环境09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10KGG转MP3工具|非KGM文件|解密音频