MVVMLight項(xiàng)目Model?View結(jié)構(gòu)及全局視圖模型注入器
MVVM和MVVMLight框架介紹及在項(xiàng)目中的使用詳解
上一篇我們已經(jīng)介紹了如何使用NuGet把MVVMLight應(yīng)用到我們的WPF項(xiàng)目中。這篇我們來(lái)了解下一個(gè)基本的MVVMLight框架所必須的結(jié)構(gòu)和運(yùn)行模式。
MVVMLight安裝之后，我們可以看到簡(jiǎn)易的框架布局，如上篇，生成了一個(gè)ViewModel文件夾，ViewModel層的內(nèi)容都放在這邊，除了Main對(duì)象的ViewModel之外，還包含一個(gè)ViewModelLocator文件，
用來(lái)注入當(dāng)前的ViewModel全局實(shí)例。
一、先來(lái)說(shuō)說(shuō)分層結(jié)構(gòu)：
如圖：
1、View負(fù)責(zé)前端展示，與ViewModel進(jìn)行數(shù)據(jù)和命令的交互。
2、ViewModel，負(fù)責(zé)前端視圖業(yè)務(wù)級(jí)別的邏輯結(jié)構(gòu)組織，并將其反饋給前端。
3、Model，主要負(fù)責(zé)數(shù)據(jù)實(shí)體的結(jié)構(gòu)處理，與ViewModel進(jìn)行交互。
根據(jù)上述的分層，我們來(lái)進(jìn)行編碼。
先建立一個(gè)完整三層結(jié)構(gòu)的目錄，如圖，包含Model、View、ViewModel三層文件夾：
1、寫(xiě)一個(gè)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); }
}
}
很簡(jiǎn)單，僅僅是包含一個(gè)實(shí)體對(duì)象，這邊注意的的是那他繼承了一個(gè)父類：ObservableObject，這個(gè)父類的作用就是保證能夠檢測(cè)屬性是否被改變。
它實(shí)現(xiàn)了INotifyPropertyChanged接口，通過(guò)觸發(fā)PropertyChanged事件達(dá)到通知UI更改的目的；
所以我們?cè)诙x實(shí)體對(duì)象的時(shí)候，只需要調(diào)用RaisePropertyChanged(PropertyName)就可以進(jìn)行屬性更改通知了。
所以實(shí)體里面定義的每個(gè)屬性都加上RaisePropertyChanged(PropertyName)的調(diào)用，就可以實(shí)現(xiàn)對(duì)UI的交互更新了。
2、寫(xiě)一個(gè)VideModel，來(lái)負(fù)責(zé)跟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>
/// 構(gòu)造函數(shù)
/// </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
}
}也很簡(jiǎn)單，包含了一個(gè)命名為Welcome的WelcomeModel屬性，繼承了ViewBaseModel父類，
ViewBaseModel同時(shí)繼承 ObservableObject類和ICleanup接口。所以他同樣有INotifyPropertyChanged接口的能力，
能夠通過(guò)觸發(fā)PropertyChanged事件達(dá)到通知View的目的；
構(gòu)造函數(shù)中對(duì) Welcome 屬性進(jìn)行了實(shí)例化。
3、寫(xiě)一個(gè)View，來(lái)顯示和交互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，所以應(yīng)該顯示W(wǎng)elcome對(duì)象下的Introduction屬性。
這時(shí)候的ViewModel和View是沒(méi)有任何關(guān)系的，所以我們?cè)赾ode-Behind的構(gòu)造函數(shù)中寫(xiě)上如下代碼：
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 賦值給當(dāng)前視圖的數(shù)據(jù)上下文。所以可以在當(dāng)前視圖中使用ViewModel中所有的公開(kāi)屬性和命令。
執(zhí)行效果如下：
二、再來(lái)說(shuō)說(shuō)構(gòu)造器：
如果使用NuGet安裝的是完整的一個(gè)是MVVM Light 框架，而非 MVVM Light libraries only的時(shí)候，總是會(huì)帶上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初始化的時(shí)候，就會(huì)去初始化ViewModelLocator類。
實(shí)際上他就是一個(gè)很基本的視圖模型注入器。在構(gòu)造器中把使用到的ViewModel統(tǒng)一注冊(cè)，并生成單一實(shí)例。
然后使用屬性把它暴露出來(lái)，每當(dāng)我們?cè)L問(wèn)屬性的時(shí)候，就會(huì)返回相應(yīng)的ViewModel實(shí)例。
/*
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 實(shí)例化
public MainViewModel Main
{
get
{
return ServiceLocator.Current.GetInstance<MainViewModel>();
}
}
#endregion
public static void Cleanup()
{
// TODO Clear the ViewModels
}
}
注意的是，這邊把MVVMLight 自帶的SimpleIoc作為默認(rèn)的服務(wù)提供者,它是個(gè)簡(jiǎn)易的注入框架。
為了統(tǒng)一化，并且在設(shè)計(jì)的時(shí)候可以看到看到ViewModel的數(shù)據(jù)，這邊用ServiceLocator 又將SimpleIoc包裹了一層。
上面我們寫(xiě)了一個(gè)Hello World，這時(shí)候就可以用這種方式改裝了。
/*
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 實(shí)例化
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
}
}
注冊(cè)完WelcomeViewModel實(shí)例之后，我們就可以在相應(yīng)的View中使用了 ，原本的
public WelcomeView()
{
InitializeComponent();
this.DataContext = new WelcomeViewModel();
}中的 this.DataContext = new WelcomeViewModel();
可以去掉了，直接在WelcomeView中這樣寫(xiě)：
DataContext="{Binding Source={StaticResource Locator},Path=Welcome}"
如下圖：
這樣做的好處，一個(gè)是綁定化相對(duì)于簡(jiǎn)單粗暴的賦值方式，更合理。一個(gè)是在可視化窗口可以看到所綁定的數(shù)據(jù)，達(dá)到所見(jiàn)即所得的友好效果。
如下：
當(dāng)我們改掉綁定到的數(shù)據(jù)，編譯之后就會(huì)立馬呈現(xiàn)：
服務(wù)端開(kāi)發(fā)人員可以專心寫(xiě)ViewModel的業(yè)務(wù)邏輯代碼，UI開(kāi)發(fā)人員可以專注設(shè)計(jì)視圖了，
同樣 ViewModel可以綁定到不同的視圖上，所以從這邊就可以體現(xiàn)出他其中的三個(gè)重要特性：低耦合、可重用性、獨(dú)立開(kāi)發(fā)。
大家有沒(méi)有發(fā)現(xiàn)ViewModelLocator 類中還有個(gè) ClearnUp()方法，主要目的用來(lái)清除ViewModel實(shí)例的。
ViewModelBase繼承了GalaSoft.MvvmLight.ICleanup接口，并在自己的類中寫(xiě)好了Cleanup()虛方法。所以我們?cè)趯?shí)例ViewModel類中可以重寫(xiě)Cleanup()來(lái)達(dá)到清除當(dāng)前實(shí)例的目的。
以上就是MVVMLight 之Model View結(jié)構(gòu)及全局視圖模型注入器的詳細(xì)內(nèi)容，更多關(guān)于ViewModel 結(jié)構(gòu)及全局視圖模型注入器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android重寫(xiě)TextView實(shí)現(xiàn)文字整齊排版的方法(附demo源碼下載)
這篇文章主要介紹了Android重寫(xiě)TextView實(shí)現(xiàn)文字整齊排版的方法,結(jié)合實(shí)例形式分析了Android重寫(xiě)TextView實(shí)現(xiàn)文字整齊排版的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02
移動(dòng)端html5圖片上傳方法【更好的兼容安卓IOS和微信】
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端html5圖片上傳方法，更好的兼容安卓IOS和微信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Android系列---JSON數(shù)據(jù)解析的實(shí)例
JSON(JavaScript Object Notation)和XML，并稱為客戶端和服務(wù)端交互解決方案的倚天劍和屠龍刀，這篇文章主要介紹了Android系列---JSON數(shù)據(jù)解析的實(shí)例，有興趣的可以了解一下。2016-11-11
這篇文章主要介紹了淺析Android文件管理器(一)的相關(guān)資料,需要的朋友可以參考下2015-11-11
在正常的應(yīng)用程序使用，前臺(tái)activity有時(shí)會(huì)被其他可視化組件遮擋，從而 造成activity的暫停。例如，當(dāng)一個(gè)半透明的activity打開(kāi)時(shí)（如在一個(gè)風(fēng)格對(duì)話框），以前的activity就暫停了。只要 activity仍然是部分可見(jiàn)，但目前沒(méi)有獲得焦點(diǎn)，它就依然處于暫停狀態(tài)2016-03-03
Android View源碼解讀 DecorView與ViewRootImpl淺談
這篇文章主要解讀了Android View源碼，為大家詳細(xì)介紹DecorView與ViewRootImpl，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Android仿淘寶頭條向上滾動(dòng)廣告條ViewFlipper
這篇文章主要為大家詳細(xì)介紹了Android仿淘寶頭條向上滾動(dòng)廣告條ViewFlipper，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Tablelayout類以行和列的形式對(duì)控件進(jìn)行管理，每一行為一個(gè)TableRow對(duì)象，或一個(gè)View控件。當(dāng)為T(mén)ableRow對(duì)象時(shí)，可在TableRow下添加子控件，默認(rèn)情況下，每個(gè)子控件占據(jù)一列。 當(dāng)為View時(shí)，該View將獨(dú)占一行2015-12-12
Android實(shí)現(xiàn)多維商品屬性SKU選擇
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)多維商品屬性SKU選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
Android自定義View實(shí)現(xiàn)抖音飄動(dòng)紅心效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)抖音飄動(dòng)紅心效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05