[Xamarin][筆記]使用Custom Renderer

  • 826
  • 0

Xamarin.Forms提供了Pages, Layouts and Controls這些UI元件。它使用了 Renderer class以在不同手機平台上,建立原生的控制項。用這種方式,可以在shared code中設定位置及行為。

它也提供一個機制,讓開發者可以自訂Renderer class以客製化在不同手機平台上想要的行為及外觀。

 

建立Custom Renderer

建立Custom Renderer有以下幾個步驟,以建立一個Customize的Entry為例:

1.建立一個繼承Entry的 Xamarin.Forms control

在portable class library (PCL)專案中建立一個繼承Entry的control

public class MyEntry : Entry
{
}

2.在各平台的專案中建立一個繼承EntryRenderer的class

以Android為例,在Android專案中,建立一個繼承EntryRenderer的class。因為要客製化的是Entry,所以繼承EntryRenderer。不同的Control有各自需繼承的類別(Renderer),可以參考Renderer Base Classes and Native Controls

namespace CustomRenderer.Android
{
    class MyEntryRenderer : EntryRenderer
    {
    }
}

3.Override OnElementChanged method

在上一步驟所建立的class中,Override掉 OnElementChanged method。這個method會在Xamarin.Forms建立Control時被呼叫,並會建立native的Control,所以可以在裡面撰寫客製化Control的邏輯

	class MyEntryRenderer : EntryRenderer
	{
		protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
		{
			base.OnElementChanged (e);

			if (Control != null) {
				Control.SetBackgroundColor (global::Android.Graphics.Color.LightGreen);
			}
		}
	}

4.設定ExportRenderer attribute

在我們所建立的 renderer class上加上ExportRenderer attribute。這個attribute設定了這個renderer class是用來產生哪一個Xamarin.Forms control。如果沒有設定這個Attribute,則會使用default renderer來產生Xamarin.Forms control。

[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.Android
{
	class MyEntryRenderer : EntryRenderer
	{
		protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
		{
			base.OnElementChanged (e);

			if (Control != null) {
				Control.SetBackgroundColor (global::Android.Graphics.Color.LightGreen);
			}
		}
	}
}

參考