MVVMLight項(xiàng)目Model?View結(jié)構(gòu)怎么寫

本篇內(nèi)容介紹了“MVVMLight項(xiàng)目Model View結(jié)構(gòu)怎么寫”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、先來說說分層結(jié)構(gòu)：

如圖：

1、View負(fù)責(zé)前端展示，與ViewModel進(jìn)行數(shù)據(jù)和命令的交互。

2、ViewModel，負(fù)責(zé)前端視圖業(yè)務(wù)級別的邏輯結(jié)構(gòu)組織，并將其反饋給前端。

3、Model，主要負(fù)責(zé)數(shù)據(jù)實(shí)體的結(jié)構(gòu)處理，與ViewModel進(jìn)行交互。

根據(jù)上述的分層，我們來進(jìn)行編碼。

先建立一個(gè)完整三層結(jié)構(gòu)的目錄，如圖，包含Model、View、ViewModel三層文件夾：

1、寫一個(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); }
         }
     }

很簡單，僅僅是包含一個(gè)實(shí)體對象，這邊注意的的是那他繼承了一個(gè)父類：ObservableObject，這個(gè)父類的作用就是保證能夠檢測屬性是否被改變。

它實(shí)現(xiàn)了INotifyPropertyChanged接口，通過觸發(fā)PropertyChanged事件達(dá)到通知UI更改的目的；

所以我們在定義實(shí)體對象的時(shí)候，只需要調(diào)用RaisePropertyChanged(PropertyName)就可以進(jìn)行屬性更改通知了。

所以實(shí)體里面定義的每個(gè)屬性都加上RaisePropertyChanged(PropertyName)的調(diào)用，就可以實(shí)現(xiàn)對UI的交互更新了。

2、寫一個(gè)VideModel，來負(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
    }
}

也很簡單，包含了一個(gè)命名為Welcome的WelcomeModel屬性，繼承了ViewBaseModel父類，

ViewBaseModel同時(shí)繼承 ObservableObject類和ICleanup接口。所以他同樣有INotifyPropertyChanged接口的能力，

能夠通過觸發(fā)PropertyChanged事件達(dá)到通知View的目的；

構(gòu)造函數(shù)中對 Welcome 屬性進(jìn)行了實(shí)例化。

3、寫一個(gè)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，所以應(yīng)該顯示W(wǎng)elcome對象下的Introduction屬性。

這時(shí)候的ViewModel和View是沒有任何關(guān)系的，所以我們在code-Behind的構(gòu)造函數(shù)中寫上如下代碼： 

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中所有的公開屬性和命令。

執(zhí)行效果如下：

二、再來說說構(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)一注冊，并生成單一實(shí)例。

然后使用屬性把它暴露出來，每當(dāng)我們訪問屬性的時(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è)簡易的注入框架。

為了統(tǒng)一化，并且在設(shè)計(jì)的時(shí)候可以看到看到ViewModel的數(shù)據(jù)，這邊用ServiceLocator 又將SimpleIoc包裹了一層。

上面我們寫了一個(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
         }
     }

注冊完WelcomeViewModel實(shí)例之后，我們就可以在相應(yīng)的View中使用了 ，原本的

 public WelcomeView()
 {
         InitializeComponent();
         this.DataContext = new WelcomeViewModel();
 }

中的 this.DataContext = new WelcomeViewModel();

可以去掉了，直接在WelcomeView中這樣寫：

DataContext="{Binding Source={StaticResource Locator},Path=Welcome}"

如下圖：

這樣做的好處，一個(gè)是綁定化相對于簡單粗暴的賦值方式，更合理。一個(gè)是在可視化窗口可以看到所綁定的數(shù)據(jù)，達(dá)到所見即所得的友好效果。

如下：

當(dāng)我們改掉綁定到的數(shù)據(jù)，編譯之后就會(huì)立馬呈現(xiàn)：

服務(wù)端開發(fā)人員可以專心寫ViewModel的業(yè)務(wù)邏輯代碼，UI開發(fā)人員可以專注設(shè)計(jì)視圖了，

同樣 ViewModel可以綁定到不同的視圖上，所以從這邊就可以體現(xiàn)出他其中的三個(gè)重要特性：低耦合、可重用性、獨(dú)立開發(fā)。

大家有沒有發(fā)現(xiàn)ViewModelLocator 類中還有個(gè) ClearnUp()方法，主要目的用來清除ViewModel實(shí)例的。

ViewModelBase繼承了GalaSoft.MvvmLight.ICleanup接口，并在自己的類中寫好了Cleanup()虛方法。所以我們在實(shí)例ViewModel類中可以重寫Cleanup()來達(dá)到清除當(dāng)前實(shí)例的目的。

“MVVMLight項(xiàng)目Model View結(jié)構(gòu)怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！