Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP2。

本回我們要來談談，當我們建立好一個基本的 Xamarin 空白專案之後，那我們要如何透過一些調整，來讓我們的專案符合 MVVM 的這種開發框架上，

在 Xamarin 的 Xamarin.Forms 開發處理中，會需要搭配 MVVM 的開發框架概念來進行，將讓整體的 App 開發變得更加的便利。

MVVM 的全名是 Model-View-ViewModel 那就取每一個字的字首，我們就把它稱呼叫作 MVVM 開發框架，這個框架各位可以在網路上面去找一下相關的一些介紹，其實會有蠻多的一個說明。

如果有興趣的話再透過一些其他的方式來了解，這個 MVVM 這個框架的一個設計理念，跟它的一個運作原理的部分，而這個部分在本 EP2 當中不多談。

我們就只談如何在使用 Xamarin.Forms 技術來複刻 TopStore 這個 App 的過程當中，運用在我們的開發專案上。

那我們就開始吧 GO~~~

首先跟著上一次 EP1 的專案來看時候，我們就直接繼續在 Visual Studio 打開這個 TopStoreApp 的專案延續 EP2 的介紹。

如果我們要去完成運用 MVVM 這個框架在這個 Xamarin.Forms 的開發當中的時候，通常我們會 Focus 在 Xamarin.Forms 的這個專案。

因為在 Xamarin.Forms 這個專案的設計，它跟 iOS 跟 Android 的開發專案，其實並沒有甚麼太大的關係。

大致上，因為 MVVM 框架的使用是一個處理 App 開發的框架運用，所以在開發習慣上面要怎麼去處理這個框架的架構，各位可以自行去調整、規劃，還有跟團隊作一個良善的討論。

甚至有可能是各位的開發團隊早就有一些既定的規劃與規則，去進行這個 MVVM 開發框架的一個設計方式，不一定要跟本 EP2 所介紹的設計一樣。

在本 EP2 所設計的方式當中，大概就會利用資料夾與命名的方式，在專案資料夾裡面的一些處理，去區分且讓自己知道說它是一個 MVVM 框架中的哪些程式放置的位置。

首先在這個專案裡面就先建立，新的一個資料夾並且把這個資料夾命名為 "Models"， 接著我們再增加新的一個資料夾 "ViewModels"，通常這裡比較不會去建立一個叫做 "Views" 的資料夾，因為 Views 的資料夾有時候會跟一些命名空間做一些衝突，所以通常在這開發專案裡面，我可能習慣上面都是利用 "Pages" 來規劃。

因為畢竟我們 App 的開發必較多都是像是，一個頁面一個頁面的呈現概念居多，所以通常就會設計一個資料夾叫做 "Pages"，來放置我們的頁面設計。

說像原本我們在預設的專案裡面，它的範本設計當中有一個 MainPage.xaml 的頁面，接著我們把這個 MainPage 就會將它移到 Pages 底下，搬移的時候 Visual Studio 的部分就會有類似這樣子的一個提示，確認是不是要將這個檔案移到這個資料夾的位置來。

確定完成移到這裡面來之後，首先會需要調整的可能是有關於命名空間的部分。

無論各位是否熟悉 .NET 相關的一些開發慣例，在這邊都特別提一下。如果我們在專案底下的資料夾，在產生出程式檔的時候，通常也會做出跟資料夾名稱關聯的命名空間的命名。

所以在這裡我先準備在 Pages 資料夾中建立一個 PeoplePage.xaml 是 TopStore 的這個 App 後面會用到的一個頁面，順便來測試一下 Visual Studio 這 IDE 工具對於這個命名空間慣例所產生的一個效果呈現。

在這邊先直接新增一個 Xamarin.Forms 的畫面，在專案上滑鼠右鍵選單點選 "加入" -> "新增項目"。

在這個項目當中我們就選擇 "內容頁面"。在 TopStore 的 App 裡面，會有一個類似於聯絡人或者是說客戶的一個呈現的頁面，所以這個內容頁面在這邊我們的頁面名稱，就叫做 "PeoplePage.xaml"。

這個 "PeoplePage" 的頁面命名完成之後就直接按新增。

在這個新增產生這個我們的專案程式碼之後，各位會看到說它的這個程式碼的命名空間使用，就是我們之前建立專案的 "TopStoreApp.Pages"，才會是這個 "PeoplePage" 的類別。

那我們看看 C# 程式碼的部分，那也一樣 C# 程式碼的命名空間也是會這樣子。

所以 MainPage.xaml 因為我們把它移至到 Pages 底下，所以我們這邊會統一再做一個命名空間的調整。

當我們打開 MainPage 的時候，在這邊當然就是第一個對照的部分就是 "ContentPage" 這個標記裡面它的 "x:Class"。

這個地方呢我們會增加 "Pages" 到它的命名空間名稱中，去對應 C# 要調整的 MainPage 的 Class 要在 "TopStoreApp.Pages"。

在 C# 的這個部分我們在這裡就會使用到，就是 MainPage 底下的 xaml.cs 的這個地方，在程式碼的 "namespace" 這邊也增加 Pages 的名稱。

當我們今天把 MainPage 的頁面調整至這個地方之後，那還有另外一個地方 "App.xaml/App.xaml.cs"。

一開始有使用到 MainPage 的頁面物件產生，並指定到 Application 的 MainPage 屬性設定中，這個動作的程式碼一定會錯誤。

原因是因為我們剛剛這樣 Xamarin.Forms 裡面的 MainPage 的這個類別，搬移到了 Pages 這個資料夾底下，同時我們又改了這個 MainPage 所在的命名空間為 "TopStoreApp.Pages" 所以在這邊它會當然找不到

當然各位也可以利用 Visual Studio 所提供的這個修正的一個動作，直接完成 using 修正的處理。在這邊通常我的習慣是，這個不是在這個程式碼檔案當中常用到的命名空間，所以通常這邊會把這個命名空間，就會在使用到的部分直接把它給寫出來。

就會知道說它是在 Pages 命名空間底下的 MainPage 這個類別所產生出來的。

所以這樣子我們再來重新的 "Ctrl + F5"(執行但不偵錯) 編譯執行這個 App 在 Android 的平台，這一次跑出來的結果還是一模一樣

再切到 iOS 的執行環境，並且確認組態管理員這一個地方是切到 "iPhone Simulator"，並確定想要執行的 iOS 模擬器有被 Visual Studio 抓到，就一樣使用 "Ctrl + F5"(執行但不偵錯) 編譯執行這個 App 在 iOS 的平台。

再來的話我們就要繼續的調整一下，前面有新增一個 PeoplePage.xaml 的內容頁面。所以在 App.xaml.cs 的 new Pages.MainPage() 的動作，直接把它改成 "PeoplePage" 來測試一下。

改好後直接在 iOS 的平台中再執行但不偵錯一次，這次會看到這個頁面當然呈現一個不一樣的頁面結果，這次就會呈現剛剛新增的空白頁面。

這個空白頁面如果我們在 Visual Studio 點開來看的話，大概會看到說它是裡面一個很簡單的預設 Template 範本，頁面的版面上只有一個 Label 的 UI 控制項，然後其 Text 屬性設定 "Hello,Welcome to Xamarin.Forms" 呈現。

再來的話 Android 的部分，我們就切過去 Android 平台，也是一樣的 "Ctrl + F5" (執行但不偵錯)，在執行的速度上面其實就會變快，所以你就會看到它現在目前在 Android 平台所呈現的效果也是這個樣子。

本系列文章 EP2 的介紹就到這裡告一個段落囉!

謝謝各位 ^_<