[Visual Studio & Xamarin] 開發架構(四)-跨平台的MVVMCross與portable class library–Windows Phone 8

[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 應用程式]。

clip_image001

 

2. 在專案中加入MVVMCross Library

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

clip_image002

 

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

clip_image003

 

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

clip_image004

 

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

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

protected override IMvxApplication CreateApp()
{
     return new PortableClassLibrary1.App();
 }

 

5. 修改App.xaml.cs程式

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

new Setup(RootFrame).Initialize();

 

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

private void Application_Launching(object sender, LaunchingEventArgs e)
{
   RootFrame.Navigating += RootFrameOnNavigating;
}

private void RootFrameOnNavigating(object sender, NavigatingCancelEventArgs e)
{
  e.Cancel = true;
  RootFrame.Navigating -= RootFrameOnNavigating;
  RootFrame.Dispatcher.BeginInvoke(() => { Cirrious.CrossCore.Mvx.Resolve().Start(); });
}

 

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

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

clip_image005

 

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

clip_image006

 

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

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

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

 

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

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

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

 

7. 編譯Windows

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

clip_image007  clip_image009

 

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

clip_image010

 

參考資料:

Xamarin and MvvmCross on Android

http://www.jayway.com/2014/04/25/xamarin-and-mvvmcross-on-android/

Introduction to Portable Class Libraries

http://docs.xamarin.com/guides/cross-platform/application_fundamentals/pcl/introduction_to_portable_class_libraries/