.NET漫游指南-019-MVVM

最新推荐文章于 2024-09-05 11:26:22 发布
最新推荐文章于 2024-09-05 11:26:22 发布
阅读量317 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/geshicuowu/article/details/80286103
本文介绍了MVVM模式在WPF开发中的应用，强调了该模式的低耦合和数据驱动特性。遵循四个核心原则：XAML后置文件不写业务代码，UI数据通过Binding绑定，ViewModel处理业务逻辑且不直接操作View，以及控件命令和事件通过Binding实现。通过详细阐述View、ViewModel和Model的职责，帮助开发者理解MVVM模式的高效实现。

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

之前的blog中讲了很多比较细化的知识点，但是在开发过程中如何保持一个比较好的开发模式是前期开发中比较困惑的地方。这里就讲解下MVVM开发模式，也是目前WPF开发中普遍采用的开发模式。

MVVM 模式就是 View ViewModel Model ：将前后端开发分离，保持了较好的低耦合，便于后期的维护，也比较好的表现了数据驱动的运行模式。

我在自己的开发过程中总结了MVVM模式开发要遵循的几个要求

1：在xaml的后置文件cs中不编写业务代码。

2：xmal中是数据都通过Binding来进行UI渲染。

3：ViewModel 中编写业务处理的代码，并且不能有操作对view直接操作的代码。

4：控件的命令和事件，属性也要通过binding的模式来进行编写。

遵循上面几个要求就能编写出简洁高效的代码并从中体会到数据驱动的美妙之处，但是MVVM并没有严格的限制，具体的开发实现还要根据具体的业务需求来进行调整。

 

下面就分三个部分View ViewModel Model来进行讲解。

View：

<UserControl
    x:Class="AlphaLog.UserControls.UserDelPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:local="clr-namespace:AlphaLog.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="250"
    Height="150">
    <!--  事件的绑定  -->
    <interactivity:Interaction.Triggers>
        <interactivity:EventTrigger EventName="Loaded">
            <interactivity:InvokeCommandAction Command="{Binding LoadedCommand}" />
        </interactivity:EventTrigger>
    </interactivity:Interaction.Triggers>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock
                Grid.Row="0"
                Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="User：" />
            <TextBox
                x:Name="txtUserName"
                Grid.Row="0"
                Grid.Column="1"
                Width="130"
                Height="25"
                HorizontalAlignment="Left"
                Metro:TextBoxHelper.ClearTextButton="True"
                Metro:TextBoxHelper.Watermark="用户名"
                Background="Transparent"
                IsEnabled="False"
                Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock
                Grid.Row="1"
                Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="Pass：" />
            <TextBox
                x:Name="txtUserPass"
                Grid.Row="1"
                Grid.Column="1"
                Width="130"
                Height="25"
                HorizontalAlignment="Left"
                Metro:TextBoxHelper.ClearTextButton="True"
                Metro:TextBoxHelper.Watermark="用户密码"
                Background="Transparent"
                IsEnabled="False"
                Text="{Binding UserPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock
                Grid.Row="2"
                Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="Addr：" />
            <TextBox
                x:Name="txtUserAddr"
                Grid.Row="2"
                Grid.Column="1"
                Width="130"
                Height="25"
                HorizontalAlignment="Left"
                Metro:TextBoxHelper.ClearTextButton="True"
                Metro:TextBoxHelper.Watermark="连接地址"
                Background="Transparent"
                IsEnabled="False"
                Text="{Binding ConnectIP, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        </Grid>
        <StackPanel
            Grid.Row="1"
            Margin="5"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            Orientation="Vertical">
            <TextBlock
                x:Name="txtDelResult"
                Foreground="#CD3333"
                Text="{Binding DelResult, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                Visibility="Visible" />
            <StackPanel Orientation="Horizontal">
                <ComboBox
                    x:Name="comBoxUserList"
                    Width="150"
                    Metro:TextBoxHelper.Watermark="请选择要删除的账户"
                    DisplayMemberPath="UserName"
                    ItemsSource="{Binding UserList, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                    SelectedItem="{Binding UserListSelectedItem}">
                    <interactivity:Interaction.Triggers>
                        <interactivity:EventTrigger EventName="SelectionChanged">
                            <interactivity:InvokeCommandAction Command="{Binding UserListSelectionChangedCommand}" />
                        </interactivity:EventTrigger>
                    </interactivity:Interaction.Triggers>
                </ComboBox>
                <Button
                    x:Name="btnDelUser"
                    Width="40"
                    Margin="5,0"
                    Command="{Binding DelUserCommand}"
                    Content="Del" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

在上面的代码中所有的数据，command和事件都是通过Binding来实现的，保证了后置cs文件中不错在业务相关代码。

Binding中button的command绑定最为直接，处理也相对简洁。

CombBox中的selectionChange事件需要通过interactivity来进行操作。

下面是View中的后置cs代码，在控件初始完成之后添加语句DataContext = ViewModel即可。

using AlphaLog.Model;
using System;
using System.Windows.Controls;

namespace AlphaLog.UserControls
{
    /// <summary>
    /// UserDelPanel.xaml 的交互逻辑
    /// </summary>
    public partial class UserDelPanel : UserControl
    {
        public UserDelPanel()
        {
            InitializeComponent();
            DataContext = new UserDelViewModel();
        }
    }
}

ViewModel中只需要添加好业务相关的代码，没有直接对View的操作，也就是说View视图中所有数据的变化和响应都是通过“数据驱动”来完成的。

using AlphaLog.DataCore;
using AlphaLog.Model;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;

namespace AlphaLog
{
    public class UserDelViewModel:INotifyPropertyChanged
    {

        public UserDelViewModel()
        {
            //注册删除命令委托
            _delUserCommand = new CustomCommand
            {
                ExecuteDelegate = del =>
                {
                    UserDelFunc();
                }
            };

            _loadedCommand = new CustomCommand
            {
                ExecuteDelegate = loaded =>
                {
                    LoadedFunc();
                }
            };

            _userListSelectionChangedCommand = new CustomCommand
            {
                ExecuteDelegate = selectionChange =>
                {
                    SelectionChangeFunc();
                }
            };
        }
        #region command
        private readonly ICommand _delUserCommand;

        private readonly ICommand _loadedCommand;

        private readonly ICommand _userListSelectionChangedCommand;

        public ICommand DelUserCommand
        {
            get
            {
                return _delUserCommand;
            }
        }

        public ICommand LoadedCommand
        {
            get
            {
                return _loadedCommand;
            }
        }

        public ICommand UserListSelectionChangedCommand
        {
            get
            {
                return _userListSelectionChangedCommand;
            }
        }
        #endregion

        #region property
        private string _userName = "";
        public string UserName
        {
            set
            {
                _userName = value;
                OnPropertyChange();
            }
            get
            {
                return _userName;
            }
        }

        private string _userPassword = "";
        public string UserPassword
        {
            set
            {
                _userPassword = value;
                OnPropertyChange();
            }
            get
            {
                return _userPassword;
            }
        }

        private string _connectIP = "";
        public string ConnectIP
        {
            set
            {
                _connectIP = value;
                OnPropertyChange();
            }
            get
            {
                return _connectIP;
            }
        }

        private string _delResult = "";
        public string DelResult
        {
            set
            {
                _delResult = value;
                OnPropertyChange();
            }
            get
            {
                return _delResult;
            }
        }

        public ObservableCollection<UserModel> UserList { set; get; } = new ObservableCollection<UserModel>();

        private UserModel _userListSelectedItem = null; 
        public UserModel UserListSelectedItem
        {
            set
            {
                _userListSelectedItem = value;
                OnPropertyChange();
            }
            get
            {
                return _userListSelectedItem;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChange(string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion

        public void UserDelFunc()
        {
            if (DataCenter.DelUser(UserListSelectedItem))
            {
                DelResult = "删除成功";
                UserList.Remove(UserListSelectedItem);
                UserName = "";
                UserPassword = "";
                ConnectIP = "";
            }
            else
            {
                DelResult = "删除失败";
            }
        }

        public void LoadedFunc()
        {
            DelResult = "";
            UserList.Clear();
            foreach (var item in DataCenter._userList)
            {
                UserList.Add(item);
            }
        }

        public void SelectionChangeFunc()
        {
            if (UserListSelectedItem == null)
            {
                UserName = "";
                UserPassword = "";
                ConnectIP = "";
            }
            else
            {
                UserName = UserListSelectedItem.UserName;
                UserPassword = UserListSelectedItem.Password;
                ConnectIP = UserListSelectedItem.Address;
            }
        }
    }
}

上面的代码基本上可以分为三个部分：1.命令的注册。2.属性的定义。3.业务逻辑的处理。其中业务逻辑的处理简洁明了，只用考虑业务数据的变化，不用再考虑界面该如何调控和刷新，极大的增强了代码的健壮性，降低了代码的耦合。

下面代码是Model的代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace AlphaLog.Model
{
     public class UserModel: INotifyPropertyChanged
    {
        private string _userName = "";
        private string _password = "";
        private string _address = "";

        public string UserName
        {
            set
            {
                _userName = value;
                OnPropertyChange();
            }
            get
            {
                return _userName;
            }
        }

        public string Password
        {
            set
            {
                _password = value;
                OnPropertyChange();
            }
            get
            {
                return _password;
            }
        }

        public string Address
        {
            set
            {
                _address = value;
                OnPropertyChange();
            }
            get
            {
                return _address;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChange([CallerMemberName]string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

model中是对View中用到的数据集的定义，model对象中基本都是属性，可能会有少量的处理方法。不建议在model中添加方法，因为当model生成的集合数目过大时，会消耗很多内存，同时也会导致View视图刷新变慢。

 

总结：以上就是一个MVVM简单的实现，其中可以根据业务的不同来进行适当的调整。

在MVVM开发中需要遵循的几个规则。

 

1：在xaml的后置文件中不写业务处理代码。

2：在xaml文件中需要的数据都通过Binding的形式实现。

3：在ViewModel 文件中编写业务处理的代码，ViewModel 中不能有对View操作的代码。

4：控件的命令，事件和属性也通过binding来实现。

 

 

 

 

MVVM双向绑定的实现和示例（.NET）
XwyMysql的博客
09-23 148
在现代软件开发中，MVVM（Model-View-ViewModel）是一种常用的架构模式，它将应用程序的用户界面（View）与业务逻辑和数据（ViewModel）分离开来。在这个示例中，我们定义了一个ViewModelBase类，它实现了INotifyPropertyChanged接口并提供了一个帮助方法OnPropertyChanged。通过以上步骤，我们成功地实现了MVVM双向绑定。在这个示例中，我们定义了一个Name属性，并在属性的setter中调用了OnPropertyChanged方法。
.NET的MVVM框架
weixin_34137799的博客
12-17 309
Model-View-ViewModel是 一种架构模式，主要在WPF、Silverlight和WP7开发里使用，它的目标是从视图层移除几乎所有代码隐藏（code-behind）。交互设计 师可以专注于使用XAML表达用户体验需求，然后创建和视图模型的绑定，而视图模型则是由应用程序开发者开发和维护的。 MVVM是更加通用的Presentation模式的一个具体实现。MVVM视图模型包含概念模型而不...
.net中创建一个简单的MVVM项目(1)
weixin_30312557的博客
09-20 283
使用WPF开发应用程序，MVVM也许是个绕不过去的东西了，做一个小程序，做个参考。 MVVM是Model-View-ViewModel的简写，代码分离真是做的相当到位，通过界面和控制类中的数据绑定，来实现数据的展示。 第一步，建立view和viewmodel的联系。 1.新建WPF应用程序。 2.添加viewmodel文件夹，新建一个viewmodel的类，初始化的时候，实例化主窗口。 ...
.NET MVVM设计模式
系统运维
10-22 226
MVVM 模式能够帮你把你程序的业务与展现逻辑从用户界面干净地分离开。保持程序逻辑与界面分离能够帮助解决很多开发以及设计问题，能够使你的程序能更容易的测试，维护与升级。它也能很大程度的增加代码重用性，并让开发者与界面设计者更容易地相互合作。 AD：51CTO云计算架构师峰会 抢票进行中！ 英文原文：Intro to the Model-View-Vi...
【工作笔记二】ASP.NET MVC框架下使用MVVM模式
dianying7959的博客
12-09 325
ASP.NET MVC框架下使用MVVM模式 原文：http://www.cnblogs.com/n-pei/archive/2011/07/21/2113022.html 对于asp.net mvc开发人员或爱好者来说，MVVM模式可能你不是很了解。本来这个模式就是针对WPF和Silverlight开发提出的开发模式。 大概一年前，我当时迷恋Silverlight时，学习了...
.Net四个MVVM框架
赫的BLOG
05-06 9262
Prism https://github.com/PrismLibrary MVVM Light http://mvvmlight.codeplex.com/ http://www.mvvmlight.net/doc http://blog.galasoft.ch/posts/category/mvvm/
学习笔记（2):.net core快速开发框架-MVVM模式（三）
u012546310的博客
10-23 532
WTM是基于.netcore的开源快速开发框架，github标星2400. 本教程详细的介绍了WTM的功能和使用方法，以及asp.net core和entityframework相关知识的讲解，另外还有一些我个人对于编程的理解。 为了避免大家感觉枯燥，我会模拟一个疫情防控上报系统的具体开发过程，贯穿整个教程。 为回报大家的厚爱，本教程会一直更新，主要围绕.netcore相关知识，最近更新的是在.n...
.NET-ReactiveUI一个Net的MVVM的框架它集成了ReactiveExtensionsRx框架
08-14
ReactiveUI - 一个.Net的MVVM的框架它集成了Reactive Extensions (Rx)框架。使开发人员可以构建优雅,可测试的应用程序使用 WPF, Windows Store Apps, WP8 or Xamarin。
.Net Core开发学习(四) ——Blazor(MVVM)应用
自云—自在之心，无缚于体
06-13 4099
.Net Core开发学习(四) ——Blazor(MVVM)应用 MVVM(Model-View-ViewModel) MVVM，双向数据绑定。既 模型数据 与 页面显示的数据 双向绑定，改变视图数据 也会 改变模型数据。 使用Blazor框架可以减少很多Js脚本代码甚至可以无Js脚本实现快速开发。当然，想要做到这点，必须浏览器与服务器保持实时连接，所以Blazor的底层是基于WebSocket的。 现在比较出名的mvvm架构的框架有vue.js，angular.js等。 创建Blazor应用 创
基于.NET6的WPF总结之MVVM
最新发布
xll的博客
09-05 1383
命令是要执行的操作。命令源是调用命令的对象。命令目标是在其上执行命令的对象。命令绑定是将命令逻辑映射到命令的对象。如上所述，命令其实就是ICommand接口的实现，命令源是调用命令的对象，这些对象一定会继承ICommandSource接口，而命令绑定就像是一座桥梁，它将命令与逻辑代码建立一种映射，这座桥梁就是CommandBinding。最后使用Binding对象将命令与命令源建立绑定。
(04).NET MAUI实战 MVVM
zls365365的博客
07-05 767
1.概要本章将讲解如何在MAUI中使用简单的MVVM模式开发“ListView”内容的增删功能，MVVM在MAUI中也同样适用。Microsoft.Toolkit.Mvvm在学习之前我们先了解一个nuget包，它可以帮助我们省去一些代码的开发时间。包Microsoft.Toolkit.Mvvm (aka MVVM Toolkit) 是一个现代、快速、模块化的 MVVM 库...
如何理解.NET开发中的MVVM模式
lordwish的专栏
02-11 3179
虽然网上有很多文章讲解MVVM模式原理及实现，但是毕竟拾人牙慧，学习消化后用自己的语言表达出来才会更深刻的理解。 1.MVVM模式的由来 1.1.关联知识 在谈起MVVM模式时，总会有相关的话题被提起，那就是MVC模式和MVP模式。 正如图中和字面意思表示的，MVC、MVP、MVVM这三种设计模式相互联系又有所区分。 相同的是，三者都具有M(Model)和V(View)两部分。其中： Vie...
一款现代化的.NET WPF UI框架，让你轻松实现MVVM
weixin_68436326的博客
02-26 2623
概述WPF开源的UI框架有很多,如HandyControl、MahApps.Metro、Xceed Extended WPF Toolkit™、Modern UI for WPF (MUI)、Layui-WPF、MaterialDesignInXamlToolkit、等等，今天小编带大家认识一款比较常用的kaiyuanUI---WPFUI，这款ui框架美观现代化，用起来也超级方便，下面是g...
浏览器box模型分析
百川异源，终归于海
03-01 2806
<!-- alimama_pid="mm_11307516_1146824_2589042"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="0080
Wpf在.Net 6 下该用哪个Mvvm框架-Microsoft.Toolkit.Mvvm
热门推荐
chenlinhsfl的博客
12-30 1万+
前言 在Wpf下最常使用的就是Mvvm模式了，有自己造轮子构建Mvvm框架的，也有使用现成的开源项目，我之前一直使用的是轻量级的MvvmLight了，这个框架还是非常不错的，使用也简单，不占用太大空间，其中最喜欢的莫过于全局Messenger了，可谓是神器。最近有个项目使用.Net6开发，在NuGet发现MvvmLight已经很久不更新了，上一次还是2018年9月12日，偶然发现微软官方出的Microsoft.Toolkit.Mvvm 完全继承了Messenger的优良传统，这是一个官方社区套件(Windo
.NET平台下利用CommunityToolkit-mvvm简化MVVM开发
在介绍如何基于.NET使用CommunityToolkit MVVM库实现MVVM架构的基础知识之前，先解释一下MVVM模式及其重要性。MVVM（Model-View-ViewModel）是一种软件架构设计模式，它是专门为那些使用图形用户界面（GUI）的应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值