MvvmLight框架


------------恢復內容開始------------

上一篇我們已經介紹了如何使用NuGet把MVVMLight應用到我們的WPF項目中。這篇我們來了解下一個基本的MVVMLight框架所必須的結構和運行模式。
MVVMLight安裝之后,我們可以看到簡易的框架布局,如上篇,生成了一個ViewModel文件夾,ViewModel層的內容都放在這邊,除了Main對象的ViewModel之外,還包含一個ViewModelLocator文件,
用來注入當前的ViewModel全局實例。
     
一、先來說說分層結構:
如圖:
1、View負責前端展示,與ViewModel進行數據和命令的交互。
2、ViewModel,負責前端視圖業務級別的邏輯結構組織,並將其反饋給前端。
3、Model,主要負責數據實體的結構處理,與ViewModel進行交互。
 
根據上述的分層,我們來進行編碼。
先建立一個完整三層結構的目錄,如圖,包含Model、View、ViewModel三層文件夾:
 
1、寫一個Model,代碼如下:
復制代碼
 1 using GalaSoft.MvvmLight;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Threading.Tasks;
 7 
 8 namespace MVVMLightDemo.Model
 9 {
10     public class WelcomeModel : ObservableObject
11     {
12         private String introduction;
13         /// <summary>
14         /// 歡迎詞
15         /// </summary>
16         public String Introduction
17         {
18             get { return introduction; }
19             set { introduction = value; RaisePropertyChanged(()=>Introduction); }
20         }
21     }
22 }
復制代碼
很簡單,僅僅是包含一個實體對象,這邊注意的的是那他繼承了一個父類:ObservableObject,這個父類的作用就是保證能夠檢測屬性是否被改變。
它實現了INotifyPropertyChanged接口,通過觸發PropertyChanged事件達到通知UI更改的目的;
所以我們在定義實體對象的時候,只需要調用RaisePropertyChanged(PropertyName)就可以進行屬性更改通知了。
所以實體里面定義的每個屬性都加上RaisePropertyChanged(PropertyName)的調用,就可以實現對UI的交互更新了。
 
2、寫一個VideModel,來負責跟View的交互。
復制代碼
 1 using GalaSoft.MvvmLight;
 2 using MVVMLightDemo.Model;
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Text;
 7 using System.Threading.Tasks;
 8 
 9 namespace MVVMLightDemo.ViewModel
10 {
11     public class WelcomeViewModel:ViewModelBase
12     {
13         /// <summary>
14         /// 構造函數
15         /// </summary>
16         public WelcomeViewModel()
17         {
18             Welcome = new WelcomeModel() { Introduction = "Hello World!" };
19         }
20         #region 屬性
21 
22         private WelcomeModel welcome;
23         /// <summary>
24         /// 歡迎詞屬性
25         /// </summary>
26         public WelcomeModel Welcome
27         {
28             get { return welcome; }
29             set { welcome = value; RaisePropertyChanged(()=>Welcome); }
30         }
31         #endregion
32     }
33 }
復制代碼
也很簡單,包含了一個命名為Welcome的WelcomeModel屬性,繼承了ViewBaseModel父類,
ViewBaseModel同時繼承 ObservableObject類和ICleanup接口。所以他同樣有INotifyPropertyChanged接口的能力,
能夠通過觸發PropertyChanged事件達到通知View的目的;
構造函數中對 Welcome 屬性進行了實例化。
 
3、寫一個View,來顯示和交互ViewModel。
復制代碼
 1 <Window x:Class="MVVMLightDemo.View.WelcomeView"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WelcomeView" Height="300" Width="300">
 5     <Grid>
 6         <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
 7             <TextBlock Text="{Binding Welcome.Introduction}" FontSize="30" ></TextBlock>         
 8         </StackPanel>        
 9     </Grid>
10 </Window>
復制代碼

 TextBlock 綁定了 Welcome.Introduction,所以應該顯示Welcome對象下的Introduction屬性。

這時候的ViewModel和View是沒有任何關系的,所以我們在code-Behind的構造函數中寫上如下代碼: 

復制代碼
 1 using MVVMLightDemo.ViewModel;
 2 using System.Windows;
 3 
 4 namespace MVVMLightDemo.View
 5 {
 6     /// <summary>
 7     /// Interaction logic for WelcomeView.xaml
 8     /// </summary>
 9     public partial class WelcomeView : Window
10     {
11         public WelcomeView()
12         {
13             InitializeComponent();
14             this.DataContext = new WelcomeViewModel();
15         }
16     }
17 }
復制代碼

把 WelcomeViewModel 賦值給當前視圖的數據上下文。所以可以在當前視圖中使用ViewModel中所有的公開屬性和命令。

 
執行效果如下:
 
 
二、再來說說構造器:
如果使用NuGet安裝的是完整的一個是MVVM Light 框架,而非 MVVM Light libraries only的時候,總是會帶上ViewModelLocator類,並且生成資源字典並加入到了全局資源中。
 
復制代碼
 1 <Application x:Class="MVVMLightDemo.App" 
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 4              StartupUri="View/WelcomeView.xaml" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              d1p1:Ignorable="d" 
 7              xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8              xmlns:vm="clr-namespace:MVVMLightDemo.ViewModel" >
 9   <Application.Resources>
10     <ResourceDictionary>
11             <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
12     </ResourceDictionary>
13   </Application.Resources>
14 </Application>
復制代碼

所以每次App初始化的時候,就會去初始化ViewModelLocator類。

實際上他就是一個很基本的視圖模型注入器。在構造器中把使用到的ViewModel統一注冊,並生成單一實例。
然后使用屬性把它暴露出來,每當我們訪問屬性的時候,就會返回相應的ViewModel實例。
 
復制代碼
 1 /*
 2   In App.xaml:
 3   <Application.Resources>
 4       <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
 5                            x:Key="Locator" />
 6   </Application.Resources>
 7   
 8   In the View:
 9   DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
10 
11   You can also use Blend to do all this with the tool's support.
12   See http://www.galasoft.ch/mvvm
13 */
14 
15 using GalaSoft.MvvmLight;
16 using GalaSoft.MvvmLight.Ioc;
17 using Microsoft.Practices.ServiceLocation;
18 
19 namespace MVVMLightDemo.ViewModel
20 {
21     /// <summary>
22     /// This class contains static references to all the view models in the
23     /// application and provides an entry point for the bindings.
24     /// </summary>
25     public class ViewModelLocator
26     {
27         /// <summary>
28         /// Initializes a new instance of the ViewModelLocator class.
29         /// </summary>
30         public ViewModelLocator()
31         {
32             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
33 
34             #region Code Example
35             ////if (ViewModelBase.IsInDesignModeStatic)
36             ////{
37             ////    // Create design time view services and models
38             ////    SimpleIoc.Default.Register<IDataService, DesignDataService>();
39             ////}
40             ////else
41             ////{
42             ////    // Create run time view services and models
43             ////    SimpleIoc.Default.Register<IDataService, DataService>();
44             ////}
45             #endregion
46 
47             SimpleIoc.Default.Register<MainViewModel>();          
48         }
49 
50         #region 實例化
51         public MainViewModel Main
52         {
53             get
54             {
55                 return ServiceLocator.Current.GetInstance<MainViewModel>();
56             }
57         }
58 
59         #endregion
60 
61         public static void Cleanup()
62         {
63             // TODO Clear the ViewModels
64         }
65     }
66 }
復制代碼

 

注意的是,這邊把MVVMLight 自帶的SimpleIoc作為默認的服務提供者,它是個簡易的注入框架。
為了統一化,並且在設計的時候可以看到看到ViewModel的數據,這邊用ServiceLocator 又將SimpleIoc包裹了一層。
上面我們寫了一個Hello World,這時候就可以用這種方式改裝了。
  
復制代碼
 1 /*
 2   In App.xaml:
 3   <Application.Resources>
 4       <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
 5                            x:Key="Locator" />
 6   </Application.Resources>
 7   
 8   In the View:
 9   DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
10 
11   You can also use Blend to do all this with the tool's support.
12   See http://www.galasoft.ch/mvvm
13 */
14 
15 using GalaSoft.MvvmLight;
16 using GalaSoft.MvvmLight.Ioc;
17 using Microsoft.Practices.ServiceLocation;
18 
19 namespace MVVMLightDemo.ViewModel
20 {
21     /// <summary>
22     /// This class contains static references to all the view models in the
23     /// application and provides an entry point for the bindings.
24     /// </summary>
25     public class ViewModelLocator
26     {
27         /// <summary>
28         /// Initializes a new instance of the ViewModelLocator class.
29         /// </summary>
30         public ViewModelLocator()
31         {
32             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
33 
34             #region Code Example
35             ////if (ViewModelBase.IsInDesignModeStatic)
36             ////{
37             ////    // Create design time view services and models
38             ////    SimpleIoc.Default.Register<IDataService, DesignDataService>();
39             ////}
40             ////else
41             ////{
42             ////    // Create run time view services and models
43             ////    SimpleIoc.Default.Register<IDataService, DataService>();
44             ////}
45             #endregion
46 
47             SimpleIoc.Default.Register<MainViewModel>();
48             SimpleIoc.Default.Register<WelcomeViewModel>();
49         }
50 
51         #region 實例化
52         public MainViewModel Main
53         {
54             get
55             {
56                 return ServiceLocator.Current.GetInstance<MainViewModel>();
57             }
58         }
59 
60         public WelcomeViewModel Welcome
61         {
62             get
63             { 
64                return ServiceLocator.Current.GetInstance<WelcomeViewModel>();
65             }
66         }
67 
68         #endregion
69 
70         public static void Cleanup()
71         {
72             // TODO Clear the ViewModels
73         }
74     }
75 }
復制代碼

 

注冊完WelcomeViewModel實例之后,我們就可以在相應的View中使用了 ,原本的
1  public WelcomeView()
2  {
3          InitializeComponent();
4          this.DataContext = new WelcomeViewModel();
5  }

中的 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()來達到清除當前實例的目的。
這個在后面幾篇講解數據綁定和命令的時候會詳細了解。

------------恢復內容結束------------


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM