Xamarin.Forms 自訂綁定屬性 Bindable Property

在這個範例中，將會說明如何客製化 Entry 控制項，使其多了一個可綁訂定屬性，您可以透過這個綁定屬性設定這個 Entry 控制項的呈現樣貌。

首先您需要先產生一個類別，該類別要繼承 Entry，並且在新產生的類別中，定義一個綁定屬性，您可以使用靜態方法 BindableProperty.Create 來產生這個綁定屬性。

在定義綁定屬性的當時，定義 propertyChanged 引數，用於設定當該綁定屬性值有異動的時候，需要呼叫的委派方法；在這個方法內，依據新設定的綁定屬性值，設定這個 Entry 的浮水印、字體大小、輸入鍵盤的屬性。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace BindProp
{
    public class DoggyEntry : Entry
    {
        // https://developer.xamarin.com/guides/xamarin-forms/xaml/bindable-properties/
        public static readonly BindableProperty EntryTypeProperty =
            BindableProperty.Create("EntryType", // 屬性名稱 
                typeof(string), // 回傳類型 
                typeof(DoggyEntry), // 宣告類型 
                "None", // 預設值 
                propertyChanged: OnEntryTypeChanged);

        private static void OnEntryTypeChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var fooEntry = bindable as DoggyEntry;
            var foooldValue = (oldValue as string).ToLower();
            var foonewValue = (newValue as string).ToLower();

            switch (foonewValue)
            {
                case "None":
                    break;
                case "email":
                    fooEntry.SetValue(PlaceholderProperty, "請輸入電子郵件");
                    fooEntry.Keyboard = Keyboard.Email;
                    fooEntry.FontSize = 20;
                    break;
                case "phone":
                    fooEntry.SetValue(PlaceholderProperty, "請輸入電話號碼");
                    fooEntry.Keyboard = Keyboard.Telephone;
                    fooEntry.FontSize = 20;
                    break;
                case "number":
                    fooEntry.SetValue(PlaceholderProperty, "請輸入數值");
                    fooEntry.Keyboard = Keyboard.Numeric;
                    fooEntry.FontSize = 20;
                    break;
                default:
                    break;
            }
        }

        public DoggyEntry()
        {

        }

        public string EntryType
        {
            set
            {
                SetValue(EntryTypeProperty, value);
            }
            get
            {
                return (string)GetValue(EntryTypeProperty);
            }
        }
    }
}

當要引用這個客製化的 Entry 控制項內新增加的綁定屬性，可參考底下用法：

在這裡，您需要先定義使用這個自訂控制項的 XAML 命名空間，您可以在根項目內，使用 xmlns:CustomControl="clr-namespace:BindProp"來加入新可使用的 XAML 命名空間。

此時，您就可以在 XAML 頁面中，直接使用這個新建立的自訂控制項 : <CustomControl:DoggyEntry EntryType="Email" />

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:CustomControl="clr-namespace:BindProp"
             x:Class="BindProp.Views.MainPage"
             Title="MainPage">
  <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <Label Text="自訂綁定屬性 Bindable Property" />
    <CustomControl:DoggyEntry EntryType="Email" />
    <CustomControl:DoggyEntry EntryType="Phone" />
    <CustomControl:DoggyEntry EntryType="Number" />
  </StackLayout>
</ContentPage>