MVVMLight项目Model View结构及全局视图模型注入器
上一篇我们已经介绍了如何使用NuGet把MVVMLight应用到我们的WPF项目中。这篇我们来了解下一个基本的MVVMLight框架所必须的结构和运行模式。
MVVMLight安装之后，我们可以看到简易的框架布局，如上篇，生成了一个ViewModel文件夹，ViewModel层的内容都放在这边，除了Main对象的ViewModel之外，还包含一个ViewModelLocator文件，
用来注入当前的ViewModel全局实例。
一、先来说说分层结构：
如图：
1、View负责前端展示，与ViewModel进行数据和命令的交互。
2、ViewModel，负责前端视图业务级别的逻辑结构组织，并将其反馈给前端。
3、Model，主要负责数据实体的结构处理，与ViewModel进行交互。
根据上述的分层，我们来进行编码。
先建立一个完整三层结构的目录，如图，包含Model、View、ViewModel三层文件夹：
1、写一个Model，代码如下：
using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVMLightDemo.Model
{
public class WelcomeModel : ObservableObject
{
private String introduction;
/// <summary>
/// 欢迎词
/// </summary>
public String Introduction
{
get { return introduction; }
set { introduction = value; RaisePropertyChanged(()=>Introduction); }
}
}
很简单，仅仅是包含一个实体对象，这边注意的的是那他继承了一个父类：ObservableObject，这个父类的作用就是保证能够检测属性是否被改变。
它实现了INotifyPropertyChanged接口，通过触发PropertyChanged事件达到通知UI更改的目的；
所以我们在定义实体对象的时候，只需要调用RaisePropertyChanged(PropertyName)就可以进行属性更改通知了。
所以实体里面定义的每个属性都加上RaisePropertyChanged(PropertyName)的调用，就可以实现对UI的交互更新了。
2、写一个VideModel，来负责跟View的交互。
using GalaSoft.MvvmLight;
using MVVMLightDemo.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVVMLightDemo.ViewModel
{
public class WelcomeViewModel:ViewModelBase
{
/// <summary>
/// 构造函数
/// </summary>
public WelcomeViewModel()
{
Welcome = new WelcomeModel() { Introduction = "Hello World！" };
}
#region 属性
private WelcomeModel welcome;
/// <summary>
/// 欢迎词属性
/// </summary>
public WelcomeModel Welcome
{
get { return welcome; }
set { welcome = value; RaisePropertyChanged(()=>Welcome); }
}
#endregion
}
}也很简单，包含了一个命名为Welcome的WelcomeModel属性，继承了ViewBaseModel父类，
ViewBaseModel同时继承 ObservableObject类和ICleanup接口。所以他同样有INotifyPropertyChanged接口的能力，
能够通过触发PropertyChanged事件达到通知View的目的；
构造函数中对 Welcome 属性进行了实例化。
3、写一个View，来显示和交互ViewModel。
<Window x:Class="MVVMLightDemo.View.WelcomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WelcomeView" Height="300" Width="300">
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
<TextBlock Text="{Binding Welcome.Introduction}" FontSize="30" ></TextBlock>
</StackPanel>
</Grid>
</Window>TextBlock 绑定了 Welcome.Introduction，所以应该显示Welcome对象下的Introduction属性。
这时候的ViewModel和View是没有任何关系的，所以我们在code-Behind的构造函数中写上如下代码：
using MVVMLightDemo.ViewModel;
using System.Windows;
namespace MVVMLightDemo.View
{
/// <summary>
/// Interaction logic for WelcomeView.xaml
/// </summary>
public partial class WelcomeView : Window
{
public WelcomeView()
{
InitializeComponent();
this.DataContext = new WelcomeViewModel();
}
}
把 WelcomeViewModel 赋值给当前视图的数据上下文。所以可以在当前视图中使用ViewModel中所有的公开属性和命令。
执行效果如下：
二、再来说说构造器：
如果使用NuGet安装的是完整的一个是MVVM Light 框架，而非 MVVM Light libraries only的时候，总是会带上ViewModelLocator类，并且生成资源字典并加入到了全局资源中。
<Application x:Class="MVVMLightDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="View/WelcomeView.xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d1p1:Ignorable="d"
xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:MVVMLightDemo.ViewModel" >
<Application.Resources>
<ResourceDictionary>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
</ResourceDictionary>
</Application.Resources>
</Application>所以每次App初始化的时候，就会去初始化ViewModelLocator类。
实际上他就是一个很基本的视图模型注入器。在构造器中把使用到的ViewModel统一注册，并生成单一实例。
然后使用属性把它暴露出来，每当我们访问属性的时候，就会返回相应的ViewModel实例。
/*
In App.xaml:
<Application.Resources>
<vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
x:Key="Locator" />
</Application.Resources>
In the View:
DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
You can also use Blend to do all this with the tool's support.
See http://www.galasoft.ch/mvvm
*/
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
namespace MVVMLightDemo.ViewModel
{
/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
{
/// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
#region Code Example
////if (ViewModelBase.IsInDesignModeStatic)
////{
//// // Create design time view services and models
//// SimpleIoc.Default.Register<IDataService, DesignDataService>();
////}
////else
////{
//// // Create run time view services and models
//// SimpleIoc.Default.Register<IDataService, DataService>();
////}
#endregion
SimpleIoc.Default.Register<MainViewModel>();
}
#region 实例化
public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
#endregion
public static void Cleanup()
{
// TODO Clear the ViewModels
}
}
注意的是，这边把MVVMLight 自带的SimpleIoc作为默认的服务提供者,它是个简易的注入框架。
为了统一化，并且在设计的时候可以看到看到ViewModel的数据，这边用ServiceLocator 又将SimpleIoc包裹了一层。
上面我们写了一个Hello World，这时候就可以用这种方式改装了。
/*
In App.xaml:
<Application.Resources>
<vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
x:Key="Locator" />
</Application.Resources>
In the View:
DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
You can also use Blend to do all this with the tool's support.
See http://www.galasoft.ch/mvvm
*/
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
namespace MVVMLightDemo.ViewModel
{
/// <summary>
/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
/// </summary>
public class ViewModelLocator
{
/// <summary>
/// Initializes a new instance of the ViewModelLocator class.
/// </summary>
public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
#region Code Example
////if (ViewModelBase.IsInDesignModeStatic)
////{
//// // Create design time view services and models
//// SimpleIoc.Default.Register<IDataService, DesignDataService>();
////}
////else
////{
//// // Create run time view services and models
//// SimpleIoc.Default.Register<IDataService, DataService>();
////}
#endregion
SimpleIoc.Default.Register<MainViewModel>();
SimpleIoc.Default.Register<WelcomeViewModel>();
}
#region 实例化
public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
public WelcomeViewModel Welcome
{
get
{
return ServiceLocator.Current.GetInstance<WelcomeViewModel>();
}
}
#endregion
public static void Cleanup()
{
// TODO Clear the ViewModels
}
}
注册完WelcomeViewModel实例之后，我们就可以在相应的View中使用了 ，原本的
public WelcomeView()
{
InitializeComponent();
this.DataContext = new WelcomeViewModel();
}中的 this.DataContext = new WelcomeViewModel();
可以去掉了，直接在WelcomeView中这样写：
DataContext="{Binding Source={StaticResource Locator},Path=Welcome}"
如下图：
这样做的好处，一个是绑定化相对于简单粗暴的赋值方式，更合理。一个是在可视化窗口可以看到所绑定的数据，达到所见即所得的友好效果。
如下：
当我们改掉绑定到的数据，编译之后就会立马呈现：
服务端开发人员可以专心写ViewModel的业务逻辑代码，UI开发人员可以专注设计视图了，
同样 ViewModel可以绑定到不同的视图上，所以从这边就可以体现出他其中的三个重要特性：低耦合、可重用性、独立开发。
大家有没有发现ViewModelLocator 类中还有个 ClearnUp()方法，主要目的用来清除ViewModel实例的。
ViewModelBase继承了GalaSoft.MvvmLight.ICleanup接口，并在自己的类中写好了Cleanup()虚方法。所以我们在实例ViewModel类中可以重写Cleanup()来达到清除当前实例的目的。
以上就是MVVMLight 之Model View结构及全局视图模型注入器的详细内容，更多关于ViewModel 结构及全局视图模型注入器的资料请关注脚本之家其它相关文章！
相关文章
Android重写TextView实现文字整齐排版的方法(附demo源码下载)
这篇文章主要介绍了Android重写TextView实现文字整齐排版的方法,结合实例形式分析了Android重写TextView实现文字整齐排版的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了移动端html5图片上传方法，更好的兼容安卓IOS和微信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
JSON(JavaScript Object Notation)和XML，并称为客户端和服务端交互解决方案的倚天剑和屠龙刀，这篇文章主要介绍了Android系列---JSON数据解析的实例，有兴趣的可以了解一下。2016-11-11
这篇文章主要介绍了浅析Android文件管理器(一)的相关资料,需要的朋友可以参考下2015-11-11
在正常的应用程序使用，前台activity有时会被其他可视化组件遮挡，从而 造成activity的暂停。例如，当一个半透明的activity打开时（如在一个风格对话框），以前的activity就暂停了。只要 activity仍然是部分可见，但目前没有获得焦点，它就依然处于暂停状态2016-03-03
Android View源码解读 DecorView与ViewRootImpl浅谈
这篇文章主要解读了Android View源码，为大家详细介绍DecorView与ViewRootImpl，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
Android仿淘宝头条向上滚动广告条ViewFlipper
这篇文章主要为大家详细介绍了Android仿淘宝头条向上滚动广告条ViewFlipper，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。 当为View时，该View将独占一行2015-12-12
这篇文章主要为大家详细介绍了Android实现多维商品属性SKU选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家详细介绍了Android自定义View实现抖音飘动红心效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
最新评论