[Visual Studio & Xamarin] 开发架构(四)-跨平台的MVVMCross与portable class library–Windows Phone 8

上一個範例我們在Android 上用MVVMCross 與 PCL的架構來實作了一個範例，接下來，就準備把這個架構延伸移轉到Windows Phone 8

與Windows Store App上。

 

1. 新增Windows Phone 8 專案

在Visual Studio新增一個Windows Phone專案，選擇[Windows Phone 應用程式]。

2. 在專案中加入MVVMCross Library

一樣在專案中，選擇[管理NuGet 套件]。在管理NuGet套件的頁面中，輸入[MVVMCross]來找尋MVVMCross套件，找到後把他安裝起來。

安裝完成後，可以看到專案下也多出了像上一篇Android專案中的資料夾。其中包括放置Layout 相關檔案的[View]資料夾。

3. 在專案中加入PCL類別參考

4. 修改專案中Setup.cs的程式

開啟Steup.cs檔案，修改CreateApp中的方法，使其回傳PCL的App類別。

1protected override IMvxApplication CreateApp()

2{

3     return new PortableClassLibrary1.App();

4 }

 

5. 修改App.xaml.cs程式

在App.xaml.cs檔案下的建構子下，新增

1new Setup(RootFrame).Initialize();

 

接下來找到Application_Launching方法，新增下方的程式碼。

01private void Application_Launching(object sender, LaunchingEventArgs e)

02{

03   RootFrame.Navigating += RootFrameOnNavigating;

04}

05 

06private void RootFrameOnNavigating(object sender, NavigatingCancelEventArgs e)

07{

08  e.Cancel = true;

09  RootFrame.Navigating -= RootFrameOnNavigating;

10  RootFrame.Dispatcher.BeginInvoke(() => { Cirrious.CrossCore.Mvx.Resolve<cirrious.mvvmcross.viewmodels.imvxappstart>().Start(); });

11}</cirrious.mvvmcross.viewmodels.imvxappstart>

 

6. 調整ViewModel 下的FirstView.xaml檔案

接下來在這個範例中主要呈現畫面的Layout是FirstView.xaml。

在Layout下我們新增一個按鈕到畫面之中。

然後我們來看一下Source Code的部分，可以看到兩個TextBox在Text的部分都被Binding到Hello上。

這樣當如同上一個範例，被綁定在控制項上的變數值有改變的時候，ViewModel會負責通知View更新資料。

1<TextBox Text="{Binding Hello, Mode=TwoWay}" />

2<TextBlock Text="{Binding Hello}" />

 

在Button按鈕上，在Content上綁定ButtonText，這個屬性是在前一個章節我們有提到所有跨平台的Device都有這個Button，

我們統一用ViewModel來修改Button上要顯示的文字。最後則是在Command上榜定按鈕事件。

1<Button Content="{Binding ButtonText}" Command="{Binding MyCommand}"></Button>

 

7. 編譯Windows

編譯這個Windows Phone App，在模擬器上，在文字方塊中我們輸入文字，ViewModel會同步幫我們更新另一個文字標籤的資料。

然後看到下方的Button上，Button的文字也是被更新為”統一按鈕名稱”。當按下這個按鈕時，文字標籤裡面的文字也被更新了。