Xamarin.Forms UI

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

James Tsai 2016/08/29 15:18:52
239

主題

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

文章簡介

在使用Xamarin.Forms 開發App常常會面臨不同平台上有不一樣的UI設定或是需要執行不同的程式,該怎麼處理呢?就讓本篇文章教你吧!!!

作者:

James Tsai

版本/產出日期:

V1.0/2016.8.28



1. 前言


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


2. 環境準備


Windows 8/8.1/10

Visual Studio 2015 / Xamarin Studio


3. 本文


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


Xamarin.FromsAppPage當中如果就只是做類似有下圖的XAML設定時,



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



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



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



在目前會遭遇到的三大平台iOSAndroidUWP來說,若有這種根據不同平台而需要設定不同UI的調整值的方式,XAMLOnPlatform設定就會如下圖(紅色框)



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



可以看到根據設定,透過StackLayoutMargin設定,讓StackLayout位置在Android沒有向下位移、iOS向下位移50UWP向下位移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




James Tsai