Xamarin.Forms OnPlatform 的不同用法 XAML & C#

OnPlatform 的不同用法 XAML & C#

這篇筆記的專案原始碼，會存放在這裡 OnPlatform 的不同用法 XAML & C# 原始碼

XAML 內的用法

若您想要在 XAML 標記裡面，針對不同平台，宣告不同的屬性值，可以使用 <OnPlatform 項目來宣告。

在底下的範例中，首先針對 <ContentPage.Padding> 屬性定義其上下左右的內縮值，這裡使用了<OnPlatform x:TypeArguments="Thickness"> 宣告了這裡的值將會提供 Thinckness 類型的值，並且針對了OnPlatform.iOS / OnPlatform.Android / OnPlatform.WinPhone 這三個平台，分別定義了 Padding 內容。這個範例是個非常經典的應用，那就是當您在使用 ContentPage 的時候，僅只有在 iOS 平台，您需要往下內縮 20 dp，否則，這個 ContentPage 將會蓋掉最上面的狀態列。這裡的用法使用的屬性項目 (Property Element)方式來表示。

您也可轉換使用屬性 (Attribute) 的方式來宣告不同平台下的值。在底下的 BoxView.Color 範例中，使用了<OnPlatform x:TypeArguments="Color" 來定義這個項目的顏色，不過，這裡使用了屬性方式分別定義了不同平台的顏色值。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XFOnPlatform"
             x:Class="XFOnPlatform.MainPage">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
      <OnPlatform.iOS>
        0, 20, 0, 0
      </OnPlatform.iOS>
      <OnPlatform.Android>
        0, 0, 0, 0
      </OnPlatform.Android>
      <OnPlatform.WinPhone>
        0, 0, 0, 0
      </OnPlatform.WinPhone>
    </OnPlatform>
  </ContentPage.Padding>

  <StackLayout
     Orientation="Vertical">
    <BoxView HorizontalOptions="Center">
      <BoxView.Color>
        <OnPlatform x:TypeArguments="Color"
          iOS="Green"
          Android="#738182"
          WinPhone="Accent" />
      </BoxView.Color>

      <BoxView.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double"
          iOS="330"
          Android="240"
          WinPhone="150" />
      </BoxView.WidthRequest>
      <BoxView.HeightRequest>300</BoxView.HeightRequest>     
    </BoxView>

    <Label
      x:Name="lblMessage"
      Margin="0,40,0,0"
      HorizontalOptions="Center"
      FontSize="30"
      TextColor="Red"/>
  </StackLayout>
</ContentPage>

C# 內的用法

當您想要在 C# 內，根據不同作業系統，進行不同的商業邏輯處理，您可以使用 Device.OnPlatform 來定義不同平台需要執行的程式碼； 從 Device.OnPlatform 方法定義簽章中，可以看到

public static Void OnPlatform (Action iOS, Action Android, Action WinPhone, Action Default)

這表示了，您可以分別針對不同的平台，委派不同的方法並且執行這些程式碼，使用方式相當的簡單，可以參考底下程式碼。

        public MainPage()
        {
            InitializeComponent();

            Device.OnPlatform(
                    Android: () =>
                    {
                        lblMessage.Text = "我在 Android 系統下";
                    },
                    iOS: () =>
                    {
                        lblMessage.Text = "我在 iOS 系統下";
                    },
                    WinPhone: () =>
                    {
                        lblMessage.Text = "我在 Windows 系統下";
                    });
        }

Xamarin.Android 您好

這個範例專案將會說明如何使用 Xamarin.Android 工具幫助您開發原生 Android 類型的應用程式；當您決定使用 Xamarin.Android 來開發原生的 Android 應用程式，您需要充分了解 Android SDK 所描述的各項內容，千萬不要為，我只具備了 C# 的知識與經驗，我就可以使用 Xamarin.Android 開發出任何 Android 類型應用程式，因為，這樣到時候您會很受傷的。

開始建立新的專案

1. 首先，開啟您的 Visual Studio 2015 (在此，假設您已經安裝好 Visual Studio 2015 與 Xamarin Toolkit工具)
2. 接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
   
3. 接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# >Android > Blank App (Android)
4. 接著，在最下方的 名稱 文字輸入盒處，輸入 AndroidHello 這個名稱，最後使用滑鼠右擊右下方的確定 按鈕。
   
5. 當完成這個原生 Android 專案的新建立工作，可以從方案總管內看到這個專案的結構，原則上，您看到的目錄與檔案內容，都會與使用 Android SDK 開發專案十分類似。
   

加入處理邏輯

1. 在方案總管內，展開資料夾 Resources > layout，滑鼠雙擊檔案 Main.axml，此時，Xamarin.Android 會將這個頁面以視覺化的方式呈現出來。
   • 使用 工具箱 (若您沒有看這個視窗，可以點選 檢視 > 工具箱 來開啟這個子視窗)，在其Controls 區域下，拖拉 Label / Button / Text Field 這三種控制項到 Storyboard 上，如下圖所示。
   • 標號1
     Text(Large) TextView.Text = 歡迎來到 Xamarin.Android
   • 標號2
     Lable 控制項，TextView.Text = 您的姓名
   • 標號3
     Lable 控制項，TextView.Text = 空白，Identity.id = @+id/textViewWelcome
   • 標號4
     EditText 控制項 EditText.id = 空白，EditText.id = @+id/editTextYourName
   • 標號5
     Button 控制項，Button.Text = OK，Identity.id = @+id/MyButton
   
2. 滑鼠雙擊檔案 MainActivity.cs，使用底下程式碼覆蓋。
   在 ViewDidLoad 方法內，增加了按鈕的 `TouchUpInside 的處理事件，在這裡，當按下這個按鈕，則會自動根據使用者輸入的姓名，產生另外一段字串。

MainActivity.cs

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace AndroidHello
{
    [Activity(Label = "AndroidHello", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.MyButton);
            TextView Welcome = FindViewById<TextView>(Resource.Id.textViewWelcome);
            EditText YourName = FindViewById<EditText>(Resource.Id.editTextYourName);

            button.Click += (s, e) =>
            {
                Welcome.Text = $"{YourName.Text} 您好";
            };
         }
    }
}

實際執行畫面

Android 執行結果

請在方案總管內，滑鼠右擊 AndroidHello 專案，選擇 設定為起始專案，接著按下 F5 開始執行。

請在標題文字 您的姓名 下方，輸入您的姓名

最後，請點選按鈕 OK，就會出現如下圖所示內容

Xamarin.iOS 您好

這個範例專案將會說明如何使用 Xamarin.iOS 工具幫助您開發原生 iOS 類型的應用程式；當您決定使用 Xamarin.iOS 來開發原生的 iOS 應用程式，您需要充分了解 iOS SDK 所描述的各項內容，千萬不要為，我只具備了 C# 的知識與經驗，我就可以使用 Xamarin.iOS 開發出任何 iOS 類型應用程式，因為，這樣到時候您會很受傷的。

由於 Xamarin.iOS 遵從 iOS SDK 內容，採用一對一對應的方式，當然也是使用 MVC 開發設計模式，所以，所有的檢視 (View) 畫面內容，都會在 Storyboard 上進行定義，當然，您也需要學會如何操作Storyboard 來設計頁面的 UI。

開始建立新的專案

1. 首先，開啟您的 Visual Studio 2015 (在此，假設您已經安裝好 Visual Studio 2015 與 Xamarin Toolkit工具)
2. 接著透過 Visual Studio 2015 功能表，選擇這些項目 檔案 > 新增 > 專案 準備新增一個專案。
   
3. 接著，Visual Studio 2015 會顯示 新增專案 對話窗，請在這個對話窗上，進行選擇 Visual C# >iPhone > Single View App (iPhone)
4. 接著，在最下方的 名稱 文字輸入盒處，輸入 iOSHello 這個名稱，最後使用滑鼠右擊右下方的 確定按鈕。
   
5. 當專案建立到一半，會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，因為這個時候是要開發 iOS 類型的原生專案，所以，您需要讓您的 Windows 電腦可以連上 Mac 電腦。
   
   
6. 當完成這個原生 iOS 專案的新建立工作，可以從方案總管內看到這個專案的結構，原則上，您看到的目錄與檔案內容，都會與使用 iOS SDK 開發專案十分類似。
   

加入處理邏輯

1. 滑鼠雙擊檔案 Main.storyboard，此時，Xamarin.iOS 正在透過 Mac 遠端電腦，透過 Xcode 開啟這個Storyboard 類型檔案。一旦在 Visual Studio 2015 內，Xcode 的 Storyboard 編輯畫面已經出現之後，請修正上方工具列關於您的除錯環境，確認這個 Xcode 的內容是要依照哪個 iOS 環境來呈現。也請在 Storyboard 子視窗的上方(下圖紅色方框處)，調整您的 View 的直向獲這橫向設定。
   • 使用 工具箱 (若您沒有看這個視窗，可以點選 檢視 > 工具箱 來開啟這個子視窗)，在其Controls 區域下，拖拉 Label / Button / Text Field 這三種控制項到 Storyboard 上，如下圖所示。
   • 標號1
     Lable 控制項，Lable.Text = 歡迎來到 Xamarin.iOS
   • 標號2
     Lable 控制項，Lable.Text = 您的姓名
   • 標號3
     Lable 控制項，Lable.Text = 空白，Identity.Name = lblWelcome
   • 標號4
     Text Field 控制項，Text Field.Text = 空白，Identity.Name = txtYourName
   • 標號5
     Button 控制項，Button.Text = OK，Identity.Name = btnOK
   
2. 滑鼠雙擊檔案 ViewController，使用底下程式碼覆蓋。
   在 ViewDidLoad 方法內，增加了按鈕的 `TouchUpInside 的處理事件，在這裡，當按下這個按鈕，則會自動根據使用者輸入的姓名，產生另外一段字串。

ViewController.cs

using System;

using UIKit;

namespace iOSHello
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.

            btnOK.TouchUpInside += (s, e) =>
              {
                  lblWelcome.Text = $"{txtYourName.Text} 您好";
              };
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

實際執行畫面

iOS 執行結果

請在方案總管內，滑鼠右擊 iOSHello 專案，選擇 設定為起始專案，接著按下 F5 開始執行。

請在標題文字 您的姓名 下方，輸入您的姓名

最後，請點選按鈕 OK，就會出現如下圖所示內容

MVC / MVP / MVVM

這三個軟體架構模式通常用於具有使用者介面(UI User Interface)的專案開發，不論是哪種，都希望讓開發者可以做到關注點分離，降低不同成員之間的密切關連性。

以發表時間上來說，MVC 發表的時間最早，接著是 MVP，最後才是 MVVM。

不論是這三個哪一種，對於底下的這兩個，這三者都是表示同樣的意義。

• Model (模型)
  模型物件用來表示與實作出應用程式內的各種資料物件，並且包含了商業處理邏輯。
• View (檢視)
  這部份表示應用程式中的使用者介面(UI)所要顯示的各個元件。

所以，這三者的不同在 MVC (Controller) / MVP (Presenter) / MVVM (ViewMode)

MVC

通常會以 Model-View-Controller 來表示，其中控制器 (Controller) 是使用者接觸的對象，用來處理使用者的互動與處理資料模型物件，最後，依照所選擇的檢視(View)，將內容顯示給使用者看到。

在 MVC 架構內，檢視只會顯示資料之用，而檢視所要顯示的內容，則是由資料模型取得。

處理使用者輸入與回應的元件則是控制器的責任。並且也會針對模型物件做更新與設定東做。

MVP

通常會以 Model-View-Presenter 來表示，其中，使用這接觸到的是檢視，而 Presenter 將會視為一個在中間的協調者，扮演著 檢視與模型 之間的溝通行為。檢視在這裡則扮演著被動的腳色，通常會定義一個介面，並且實作出來；Presenter 則使用檢視的介面，做出不同的反應與處理或者存取模型物件內的資料給檢視使用。

MVVM

通常會以 Model-View-ViewModel 來表示，使用者接觸到的是檢視；檢視通常會需要使用到 XAML 標記宣告語言來定義，而 XAML 僅僅提供了使用者介面的宣告，並無法提供任何處理邏輯，因此，檢視模型(ViewModel)就扮演這存取資料模型的責任，並且透過了資料繫結技術將資料提供給檢視。

在這裡，檢視僅知道檢視模型的存在，檢視模型僅知道模型的存在，而檢視模型並不知道檢視的存在，檢視也不知道模型的存在，因此，充分做到的關注點分離的目的。

設計模式 Design Pattern 的名詞對照表

底下彙整出在開發 Xamarin.Forms 專案時候，會使用到的設計模式的 WiKi 說明，有些內容是我在開發其他專案的時候或者自己有興趣的，也會列在這裡

名詞	英文
Abstract factory pattern	抽象工廠
Adapter pattern	介面卡 / 配接器模式
Bridge pattern	橋接模式
Builder Pattern	生成器模式
Chain of Responsibility	責任鏈模式
Command	命令模式
Decorator	裝飾模式
Design Pattern	設計模式)
Facade pattern	外觀模式
Factory method pattern	工廠方法
Iterator	疊代器模式
Mediator pattern	中介者模式
Null object Pattern	空對象模式
Observer	觀察者模式
Prototype	原型模式
Proxy Pattern	代理模式
Singleton	獨身模式 / 單例模式
Strategy	策略模式
Template Method	模板方法
Visitor	訪問者模式

參考

http://jimmy0222.pixnet.net/blog/post/37095632-design-patterns(%E8%A8%AD%E8%A8%88%E6%A8%A1%E5%BC%8F)-%E8%87%AA%E6%88%91%E6%95%B4%E7%90%86