如何在 Xamarin.Forms 中指定各平台不同的UI設定或執行不同的程式?

1. 前言

• 在使用Xamarin.Forms來開發App時，最棒的就是能夠設計一次UI寫一次程式就達成各個平台的App，但總會因為各個平台會有些不一樣的需求，而要如何處理的不同的平台作不同的UI設定或是需要執行不同的程式。就讓本文章的介紹教你解決吧~

2. 環境準備

• Windows 8/8.1/10

• Visual Studio 2015 / Xamarin Studio

3. 本文

在不同的平台有不一樣的UI設定

• 在Xamarin.Froms的App在Page當中如果就只是做類似有下圖的XAML設定時，



所呈現的結果在iOS上，就會跟StatusBar重疊在一起，其他的平台就不會。

• 所以類似這種我們只要調整一些因為平台上的適應問題，而需要的UI設定該怎辦呢?在Xamarin.Forms的XAML上，提供了OnPlatform的設定來讓我們調整。所以像是前述XAML我們可以改寫成如下圖的XAML(紅色框新增的部分)。



就可以針對iOS平台設定StackLayout的位置向下位移而在其他平台不變的調整。

• 在目前會遭遇到的三大平台iOS、Android、UWP來說，若有這種根據不同平台而需要設定不同UI的調整值的方式，XAML的OnPlatform設定就會如下圖(紅色框)。



要注意的是目前UWP的調整適用WindowsPhone的標記，呈現結果如下圖。



可以看到根據設定，透過StackLayout的Margin設定，讓StackLayout的位置在Android沒有向下位移、iOS向下位移50、UWP向下位移100。(此例是透過按鈕的呈現的改變看出StackLayout向下位移)

在不同的平台指定執行不同的程式

• 而除了XAML可以直接設定以外，Xamarin.Forms也提供了根據不同平台指定執行不同程式的方式，Device.OnPlatform()方法的使用。在下圖的例子中，是延續前面的例子使用在Xamarin.Forms的專案中加入了一個MainPage.xaml的頁面，並且直接開啟這個MainPage.xaml.cs並在其建構式中直接呼叫此方法。

• 在此方法中如果直接設定Default的使用，那就是預設所有的平台都要執行所指定的程式。



就會看到如下畫面的呈現，每個平台的StackLayout的背景顏色呈現成黃色。

• 接著再特別指定各個平台，如下圖紅色框所呈現的方式。



StackLayout的背景在iOS(左)呈現成水藍色，Android(中)呈現成藍綠色，UWP(右)呈現成紫色。



在此例雖然只是簡單的撰寫顏色改變，但其實應該已經看得出是針對不同平台執行不同程式的概念，那就看大家會如何去運用了。

4. 參考來源

• Xamarin.Forms - Essential XAML Syntax :
https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/essential_xaml_syntax/

• Xamarin.Froms - Device Class :
https://developer.xamarin.com/guides/xamarin-forms/platform-features/device/#Device.OnPlatform