当前位置: 首页 > article >正文

WPF入门教学十三 MVVM模式简介

MVVM(Model-View-ViewModel)是一种软件架构设计模式,特别适用于WPF和UWP等UI框架。MVVM模式的主要目标是将UI逻辑与业务逻辑分离,从而提高代码的可测试性、可维护性和可重用性。以下是MVVM模式的简介和示例。

MVVM模式简介

Model(模型)
  • 定义:模型代表应用程序的数据和业务逻辑。
  • 职责:处理数据的获取、存储和处理,以及业务规则的实现。
View(视图)
  • 定义:视图是用户界面,负责显示数据和接收用户输入。
  • 职责:通过数据绑定显示模型的数据,并将用户的操作传递给视图模型。
ViewModel(视图模型)
  • 定义:视图模型是模型和视图之间的桥梁,负责处理视图的业务逻辑。
  • 职责
    • 提供数据绑定所需的属性和命令。
    • 处理视图的交互逻辑。
    • 实现INotifyPropertyChanged接口以通知视图数据的变化。

MVVM模式的优势

  • 分离关注点:将UI逻辑与业务逻辑分离,使代码更易于理解和维护。
  • 可测试性:视图模型可以独立于视图进行单元测试。
  • 可重用性:视图模型可以在不同的视图中重用。

示例

Model(模型)

假设我们有一个简单的Person类:

 
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}
ViewModel(视图模型)

接下来,我们创建一个PersonViewModel,它包含一个Person对象和一些命令:

 
public class PersonViewModel : INotifyPropertyChanged
{
    private Person _person;
    public Person Person
    {
        get { return _person; }
        set
        {
            if (_person != value)
            {
                _person = value;
                OnPropertyChanged(nameof(Person));
            }
        }
    }

    public ICommand SaveCommand { get; }

    public PersonViewModel()
    {
        Person = new Person();
        SaveCommand = new RelayCommand(Save);
    }

    private void Save()
    {
        // Save logic here
        MessageBox.Show("Person saved!");
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

注意:这里使用了RelayCommand,它是MVVM中常用的命令实现方式。你可以自己实现一个简单的RelayCommand,或者使用第三方库如MVVMLight或Prism。

View(视图)

最后,我们在XAML中创建一个视图来显示Person的信息,并绑定命令:

 
<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 Example" Height="350" Width="525">
    <Window.DataContext>
        <local:PersonViewModel/>
    </Window.DataContext>
    <Grid>
        <StackPanel>
            <TextBox Text="{Binding Person.Name, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBox Text="{Binding Person.Age, UpdateSourceTrigger=PropertyChanged}"/>
            <Button Content="Save" Command="{Binding SaveCommand}"/>
        </StackPanel>
    </Grid>
</Window>

总结

通过上述示例,我们可以看到MVVM模式如何将UI逻辑与业务逻辑分离。视图模型负责处理业务逻辑,并通过数据绑定与视图进行交互。这种设计模式使得代码更加模块化,易于测试和维护。


http://www.kler.cn/a/324744.html

相关文章:

  • Python 打包教程:从零开始构建可分发的Python包
  • mysql数据迁移PolarDB
  • 【机器学习】机器学习中用到的高等数学知识-1.线性代数 (Linear Algebra)
  • Docker+Django项目部署-从Linux+Windows实战
  • 【大数据测试 Hive数据库--保姆级教程】
  • LogViewer NLog, Log4Net, Log4j 文本日志可视化
  • 极狐GitLab 17.4 重点功能解读【二】
  • Git 工作区、暂存区和版本库
  • 从事人工智能学习Python还是学习C++?
  • 巴鲁夫rfid读头国产平替版——高频RFID读写器
  • element的描述列表<el-descriptions>添加字典翻译功能
  • Lodash库
  • 24年Novartis诺华制药社招入职SHL测评:综合能力、性格问卷、动机问卷高分攻略
  • count(1),count(*)与 count(‘列名‘) 的区别
  • Docker部署MongoDB教程
  • 3. 轴指令(omron 机器自动化控制器)——>MC_MoveZeroPosition
  • Linux内核启动之根文件系统挂载
  • 串、数组和广义表
  • 一键式商品信息获取:京东API返回值深度挖掘
  • iOS 使用使用渐变色生成图片
  • 第九届蓝桥杯嵌入式省赛程序设计题解析(基于HAL库)
  • 可视化服务编排:jvs-logic API出参加密实战教程
  • 基于springboot vue 大学生竞赛管理系统设计与实现
  • LoRA - 大模型的低秩适应方法
  • springboot第74集:设计模式
  • 在二维平面中,利用时差定位(TDOA)技术,结合N个锚点,通过三边法进行精确定位,采用MATLAB实现