Xamarin Xamarin.Forms Picker

Xamarin.Forms 變更iOS Picker選擇模式

張阿鬼 2018/12/31 15:44:19

0 835

Xamarin.Forms 變更iOS Picker選擇模式

簡介	Xamarin.Forms 變更iOS Picker選擇模式
作者	張朝銘

主題：	Xamarin.Forms 變更iOS Picker選擇模式
作者：	Steven
版本/產出日期：	V1.0/2018.12.18

前言

Xamarin.Forms提供了Picker控制項，讓我們可以輕易的開發下拉選單。

但在預設的模式下，產生的Picker在iOS與Android上會產生不同的操作行為，
在Android中必須要選中選項畫面消失，值才會帶入到畫面上，
但iOS上則是在滑動選中要使用的值時，就會自動帶入到畫面上。

如下XAML畫面中，在畫面上放了一個Picker並給予Items:

    <StackLayout>
        <Picker Title="請選擇顏色">
            <Picker.Items>
                <x:String>紅色</x:String>
                <x:String>藍色</x:String>
                <x:String>綠色</x:String>
                <x:String>黑色</x:String>
                <x:String>白色</x:String>
            </Picker.Items>
        </Picker>
    </StackLayout>

在Android上是選取視窗消失後才代入:

在iOS上則是畫動停到哪個選項，就會代入:

此時在iOS因為一些特殊因素，比如選單需要連動，避免選中的值一直切換
而不斷的呼叫API去取連動值，或者客戶要求兩個平台的一致性等等之類的，
我們希望將它改成當使用者滑動到要使用的選項後，
按下右上方的Done(或確定鈕)，才真的選中該值。

此時我們可使用Picker中的UpdateMode屬性設定選取的行為，
這邊要注意該屬性並沒有存在Picker中，而是使用擴充方法
增加到Picker裡面做設定。
設定的方式可以使用XAML或者程式碼達成。

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xamarin.Forms.PickerMode.MainPage"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
    <StackLayout>
        <Picker x:Name="picker" Title="請選擇顏色" ios:Picker.UpdateMode="WhenFinished">
            <Picker.Items>
               ... 
           </Picker.Items>
        </Picker>
    </StackLayout>
</ContentPage>

程式碼:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
namespace Xamarin.Forms.PickerMode
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            On<iOS>().SetUseSafeArea(true);
            picker.On<iOS>().SetUpdateMode(UpdateMode.WhenFinished);
        }
    }
}

使用程式碼時指定的UpdateMode分為原本預設使用的Immediately
以及我們希望調整的WhenFinished。
完成後再次執行程式，即可看到選擇模式的改變: