EP 2: Format the project design of TopStore App for MVVM framework

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 的介绍就到这里告一个段落罗!

谢谢各位 ^_<