新建一个MVVM的Demo

于 2023-08-29 16:27:57 发布
阅读量113 收藏
点赞数
文章标签： c# wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MEABUG/article/details/132564311
版权

MVVM的基本流程：

  1. 在项目中分别新建Model，View，ViewModel，Command四个文件夹。
    1. Model：存放数据新建的类
    2. View:存放视图.xaml文件
    3. ViewModel 准备对应界面的数据与一些业务，主要包括数据，命令，此处的数据也需要能PropertyChanged通知。
    4. 自定义的一些命令
  2. 准备Model的数据，该自定义类需要继承自INotifyPropertyChanged
    1. 例如： 
      namespace eventDemo.Model

{

   public class Employee:INotifyPropertyChanged

    {

        int _employeeNumber;

        string _firstName;

        string _lastName;

        string _department;

        string _title;



        public Employee()

        {

            _employeeNumber = 0;

            _firstName =

            _lastName =

            _department =

            _title = null;

        }

        public int EmployeeNumber

        {

            get { return _employeeNumber; }

            set

            {

                _employeeNumber = value;

                OnPropertyChanged("EmployeeNumber");

            }

        }

        public string FirstName

        {

            get { return _firstName; }

            set

            {

                _firstName = value;

                OnPropertyChanged("FirstName");

            }

        }



        public string LastName

        {

            get { return _lastName; }

            set

            {

                _lastName = value;

                OnPropertyChanged("LastName");

            }

        }



        public string Department

        {

            get { return _department; }

            set

            {

                _department = value;

                OnPropertyChanged("Department");

            }

        }



        public string Title

        {

            get { return _title; }

            set

            {

                _title = value;

                OnPropertyChanged("Title");

            }

        }



        public override string ToString()

        {

            return String.Format("{0} {1} ({2})", FirstName, LastName, EmployeeNumber);

        }



        protected void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);

                this.PropertyChanged(this, args);

            }

        }



        #region INotifyPropertyChanged Members



        public event PropertyChangedEventHandler PropertyChanged;



        #endregion

    }

}

  3. 在Command中添加自定义Command类,该类需要继承自 ICommand，再应用以下模版之后，还需要在ViewModel中，定义ExecuteAction（要执行的方法）与CanExecuteAction（能否执行，一般直接返回True）
    1. 例如： 
      public class CustomCommand : ICommand

    {

        //当能不能做发生变化时会触发的事件（必须要实现）

        public event EventHandler CanExecuteChanged;



        public void Execute(object param)  //做什么（必须要实现）

        {

            ExecuteAction?.Invoke(param);

        }



        public bool CanExecute(object param)  //能做吗（必须要实现）

        {

            if (CanExecuteAction != null)

                return CanExecuteAction(param);

            return false;

        }

        //Action可以放一个函数进去，就是命令执行的动作

        public Action<object> ExecuteAction { get; set; }

        public Func<object, bool> CanExecuteAction { get; set; }

    }

在ViewModel中设置
例如：
//准备命令
public CustomCommand MyCommand { get; set; }

MyCommand = new CustomCommand();

 //完成命令动作的设置，两个都要设置
            MyCommand.ExecuteAction = new Action<object>(Excute);

            MyCommand.CanExecuteAction = new Func<object, bool>(this.CanExcute);

 public void Excute(object employee) //自定义的动作方法

        {

            SelectedEmployee = (Employee)employee;

        }

        public bool CanExcute(object param)

        {

            return true;  //判断能否做这个事情，大部分时候返回true就行了

        }

完成ViewModel文件中的 数据 命令 初始化，因为VeiwModel也要维护属性，需要自动通知，所以也要继承自继承自INotifyPropertyChanged
代码：
using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using eventDemo.Model;

using System.ComponentModel;

using eventDemo.Common;

namespace eventDemo.viewModel

{

    public class MainWindowViewModel:INotifyPropertyChanged

    {

        public List<Employee> empList { get; set; }



        //准备数据

        private Employee selectedEmployee;

        public Employee SelectedEmployee

        {

            get { return selectedEmployee; }

            set

            {

                selectedEmployee = value;

                //事件导致的对象数据变化

                NotifyPropertyChanged("SelectedEmployee");//这里填写改变的数据的名字string

            }

        }

        //准备命令

        public CustomCommand MyCommand { get; set; }



        //ViewModel文件初始化

        public MainWindowViewModel()

        {

            //初始化数据

            List<Employee> elist = new List<Employee>();



            elist.Add(new Employee() { EmployeeNumber = 1, FirstName = "John", LastName = "Dow", Title = "Accountant", Department = "Payroll" });

            elist.Add(new Employee() { EmployeeNumber = 2, FirstName = "Jane", LastName = "Austin", Title = "Account Executive", Department = "Employee Management" });

            elist.Add(new Employee() { EmployeeNumber = 3, FirstName = "Ralph", LastName = "Emmerson", Title = "QA Manager", Department = "Product Development" });

            elist.Add(new Employee() { EmployeeNumber = 4, FirstName = "Patrick", LastName = "Fitzgerald", Title = "QA Manager", Department = "Product Development" });

            elist.Add(new Employee() { EmployeeNumber = 5, FirstName = "Charles", LastName = "Dickens", Title = "QA Manager", Department = "Product Development" });

            empList = elist;

            //初始化命令

            MyCommand = new CustomCommand();

            //完成命令动作的设置

            MyCommand.ExecuteAction = new Action<object>(Excute);

            MyCommand.CanExecuteAction = new Func<object, bool>(this.CanExcute);

        }



        public void Excute(object employee)

        {

            SelectedEmployee = (Employee)employee;

        }

        public bool CanExcute(object param)

        {

            return true;  //判断能否做这个事情，大部分时候返回true就行了

        }



        protected void NotifyPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);

                this.PropertyChanged(this, args);

            }

        }

        //准备事件管理器

        public event PropertyChangedEventHandler PropertyChanged;



    }

}

  4. 完成后端业务与View的连接，ViewModel中有数据，命令，可以理解为规定了数据与动作，但是实际需要操作View的业务，所以需要将View与ViewModel建立联系。
    1. 在xaml文件中设置binding实现业务，在这里需要学习bingding,Trigger,DataTemplate,自定义控件(Style ControlTemplate等WPF Ui相关的知识)
      1. 代码（注意其中的binding） 
        <Window x:Class="eventDemo.MainWindow"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

                xmlns:vm="clr-namespace:eventDemo.viewModel"   

        Title="MainWindow" Height="250" Width="300" MinHeight="200">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="110px" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <ListBox Name="employeeListBox" ItemsSource="{Binding empList}" Grid.Row="0" SelectedItem="{Binding SelectedEmployee, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">

            <i:Interaction.Triggers>

                <i:EventTrigger EventName="SelectionChanged">

                    <i:InvokeCommandAction Command="{Binding MyCommand}" CommandParameter="{Binding ElementName=employeeListBox, Path=SelectedItem}"/>

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </ListBox>

        <Grid Grid.Row="1" DataContext="{Binding SelectedEmployee}">

            <Grid.RowDefinitions>

                <RowDefinition Height="*" />

                <RowDefinition Height="*" />

                <RowDefinition Height="*" />

                <RowDefinition Height="*" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="80" />

                <ColumnDefinition Width="*" />

            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0">First Name</Label>

            <Label Grid.Row="1" Grid.Column="0">Last Name</Label>

            <Label Grid.Row="2" Grid.Column="0">Title</Label>

            <Label Grid.Row="3" Grid.Column="0">Department</Label>



            <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName, Mode=TwoWay}" />

            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName, Mode=TwoWay}" />

            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Title, Mode=TwoWay}" />

            <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=Department, Mode=TwoWay}" />

        </Grid>

    </Grid>

</Window>

  5. xaml中已经绑定完了，还需要将ViewModel对象，设定到该xaml文件的DataContext上，就完成了Source的设定。
    1. 代码： 
      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.Shapes;

using eventDemo.viewModel;

namespace eventDemo

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

       

        public MainWindow()

        {

            InitializeComponent();

            this.DataContext = new MainWindowViewModel();

        }

       

    }

}

至此就完成了一个基础的MVVM的Demo

高力士等十万人
关注
Android入门第59天-进入MVVM
lifetragedy的专栏
01-22 1769
MVVM并不存在，只是xml里找控件找了太多了，自然而然就“找”出了一套共性。从今天开始我们Android教程经历了一次里程碑，你其实已经可以开发东西了，自己照着微博留言做一个小论坛、小商城，前面我们学习到的这些知识足够用了。但是，如果你想去正规化团队、好点的团队、公司工作肯定不能这么“作坊”，那么后面我们就会集中火力讲在jetpack即MVVM模式下的各种开发了
基于谷歌最新AAC架构打造的Android MVVM开发框架，使用该框架可以快速开发一个高质量、易维护的Android应用
十年代码写十年
05-21 556
AACHulk是以Google的ViewModel+DataBinding+LiveData+Lifecycles框架为基础， 结合Okhttp+Retrofit+BaseRecyclerViewAdapterHelper+SmartRefreshLayout+ARouter打造的一款快速开发框架， 开发语言是Kotlin，再结合AACHulkTemplate模版开发进行开发， 避免一些繁琐的操作，提供开发效率 功能介绍 1.支持多服务器地址、多成功码、各种超时时间、各种拦截器、Arouter等的配.
[WPF]MVVM Demo
12-07
Demo本身没有什么功能，只是包括一些UI上的逻辑，意在展示MVVM的开发方式和MVVMDemo.SysFramwork.MVVM下核心代码。
MVVM框架的demo
10-27
MVVM框架的demo,
MvvmDemoApp
08-21
MvvmDemoAppMvvmDemoApp.rarMvvmDemoApp.rar
最简单的MVVM示例TheSimplestDemoForMVVM
09-18
这是网上的资源，名字就是这个，这里包含原版源码以及适用于VS2010的源码。 原文：http://blog.chenxu.me/post/detail?id=773989fc-9404-4186-a627-5dec1d989e43 强烈推荐观看配套视频： http://v.youku.com/v_show/id_XNTkyNTI2Njgw/v.swf.html
MVVM和MVP模式demo
01-27
ios架构之MVVM模式和MVP模式演示demo。
一个基于ES6 的Mvvm Demo
少东的博客
08-15 360
很多次面试都被问到双向绑定的原理，从一开始的啥都不知道到后来知道使用Object.defineProperty 劫持属性，使用发布订阅进行消息传递，再后来看了很多篇相关的文章和代码，依然应付不了面试官的追问。还是对其中的原理和实现了解的不透彻，所以最终决定自己亲手写一个。网上写mvvm 的博客有很多，都挺详细的也都贴了大段的代码，想了解的可以直接走下面的传送门，这篇文章的代码实现很大一部分都是参考...
UWPDemo(二)创建一个简单MVVM模式的UWP应用——SQLite在UWP中的使用
define_LIN的博客
05-29 665
前言： 接着前篇文章UWPDemo(一)写啊！ 上次我们实现的是采用MVVM模式的UWP应用的创建和实现简单的页面跳转， 今天主要写SQLite数据库在UWP应用中的使用。 SQLite SQLite，是一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的，而且目前已经在很多嵌入...
Kotlin协程Coroutines入门到实战：（三）Coroutines+Retrofit+ViewModel+LiveData实现MVVM客户端架构
NJP_NJP的博客
12-13 6148
Kotlin协程Coroutines入门到实战：（三）Coroutines+Retrofit+ViewModel+LiveData实现MVVM客户端架构 我们在前两篇文章中讲解了Kotlin协程的基本用法和所解决的关键性问题，接下来让我们来看看在实际项目中该怎么使用Kotlin协程这一利器呢。接下来一起来将Kotlin协程与Jetpack中的架构组件结合起来搭建个简单的项目吧。以下是此Demo的效...
MVVMLight-三层结构
qq_23018459的博客
03-05 837
上一篇我们已经介绍了如何使用NuGet把MVVMLight应用到我们的WPF项目中。这篇我们来了解下一个基本的MVVMLight框架所必须的结构。 MVVMLight安装之后，我们可以看到简易的框架布局，如上篇，生成了一个ViewModel文件夹，ViewModel层的内容都放在这边，除了Main对象的ViewModel之外，还包含一个ViewModelLocator文件， 用来注入当前的V...
android mvvm官方demo,Android MVVM实战Demo完全解析
weixin_26901145的博客
05-26 2531
最新【重大更新说明】感谢各位读者的阅读，这篇文章由于年代久远，存在一些错误的观点，再次向大家道歉，也做一个技术上的解释说明。受限于当时的技术水平和网络论调，在那个时代，网上绝大多数人都认为加了databinding就是mvvm了，实际上不是这样的，MVVM是一种架构模式，而DataBinding是一个实现数据和UI绑定的框架，是构建MVVM模式的一个工具。mvvm和MVP有一个比较大的区别是：vm...
MVVM框架的搭建（三）——网络请求
weixin_38168139的博客
10-10 568
mvvm的网络框架的搭建 MVVM框架的搭建（一）——背景 MVVM框架的搭建（二）——项目搭建 MVVM框架的搭建（三）——网络请求 之前，我们简单的介绍了一下MVVM的框架的构成以及搭建的基本的demo 但是网络请求是我们日常开发当中，非常基本也是必须的一部分，下面 我们一起来梳理一下带有网络请求的MVVM。 首先我们先在项目里集成相关的依赖 /** * config.gradle用于配置项...
MVVM开发模式实例解析
dangercheng的专栏
01-14 1万+
此实例为本人依托网上原有资料，加以个人理解整合，在MVVM模式下写的一个基于MySQL数据库的小Demo,实现对数据库中内容的搜索显示功能。文档下载 源码下载 本实例基于VS2012+MySQL+SilverLight5实现。 MVVM开发模式 概述 MVVM（Model-View-ViewModel）是在WPF/Silverlight一种很常见的开发模式，是MVC模式的一种变
WPF-MVVM-Demo
一蓑烟雨任平生 也无风雨也无晴
08-21 3085
MVVM The model-view-viewmodel is a typically WPF pattern. It consists of a view that gets all the user input and forwards it to the viewmodel, typically by using commands. The view actively pulls the
android mvvm双向绑定,Android MVVM实战Demo完全解析
weixin_29541695的博客
05-26 907
原标题：Android MVVM实战Demo完全解析前言在之前的文章中介绍了部分mvvm模式的理论，那今天就通过一个Demo来讲解一下mvvm在实战中的结构是怎么样的，以及它的具体使用，下面一起来看，关于mvvm，还是先贴一下学习地址。Android 对比MVC、MVP来聊聊MVVM模式的理解在之前DataBinding的学习中，当然也包括网上大部分关于mvvm和databinding的教程中，都...
Google MVVM架构demo
Dijkstra的专栏
08-06 5775
google官方地址：https://developer.android.com/jetpack/docs/guide#addendum 应用程序架构指南 本指南适用于过去构建应用程序基础知识的开发人员，现在希望了解构建强大的，生产质量的应用程序的最佳实践和建议的体系结构。 本页假定您熟悉Android Framework。如果您不熟悉应用程序开发，请查看入门培训系列，其中包含本指南的先决条...
Android MVVM实战Demo完全解析
热门推荐
陪你唠嗑的博客
10-19 4万+
在之前的文章中介绍了部分DataBinding框架的使用以及mvvm模式的理论，那今天就通过一个Demo来讲解一下mvvm在实战中的结构是怎么样的，以及它的具体使用，下面一起来看，关于DataBinding和mvvm，还是先贴一下学习地址。DataBinding系列（一）：DataBinding初认识 Android MVVM模式的理解在之前DataBinding的学习中，当然也包括网上大部分关于
我理解的MVVM架构及实战Demo
自由奔跑的风
09-06 3266
我理解的MVVM架构及实战Demo 简介 MVVM架构模式，即Model-View-ViewModel三个层级，MVVM模式出来的时间已经很长了，网上关于MVVM模式的解析也有很多，我这里只说一下我自己的理解，基本上是和MVP模式相比较的一个差异。 先说一下MVVM中，我理解的各层的作用： Model： 数据处理层，用来存储数据和处理数据，这一层的作用和MVP中的Model层类似； Vie...
写一个mvvm demo
最新发布
04-25
好的，下面是一个简单的MVVM Demo示例，主要实现了数据绑定和视图模型。 首先，我们需要创建一个模型类和视图模型类。 模型类： ``` class User { String name; int age; User(this.name, this.age); } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值