Custom Renderers

Xamarin Forms currently allows to customize only some properties of the UI controls.

Usually a professional UI requires further customization, but fortunatly, through Custom Renderers, Xamarin Forms open a door to achieve it.

Artina provides a set of attached properties and custom renderers to customize some properties that were not possible before. For example, Xamarin Forms out of the box does not provide any mean to configure the border of the Entity control.

Grial provides a set of properties to do that:

<Entry
    ...
    artina:EntryProperties.BorderStyle="BottomLine"
    artina:EntryProperties.BorderWidth="1"
    ... />

BorderStyle as it name suggest allows to customize how the border should look like. The possible values are None, BottomLine, Rect, RoundRect or Default.

The first forces no border to be shown at all. BottomLine renders a single line at the bottom of the entry. Rect draws a rectangle around the Entry and RoundRect a rectangle with rounded corners.

There are other properties to further configure the border appearance like BorderWidth, BorderCornerRadius and BorderColor.

Besides of specifing the attached properties, we must instruct Xamarin Forms to use the approriate custom renderer (in this case ArtinaEntryRenderer) which is the one that knows how those properties should be renderer.hat:

In Grial, custom renderers are declared in the AssemblyInfo file of the Grial.iOS and Grial.Android project.

If you want to use the attached properties in a different project you need to know that:

  • Attached properties are defined on the assembly UXDivers.Artina.Shared., therefore you must reference it from your Xamarin Forms project.
  • Custom Renderers are defined in UXDivers.Artina.Shared.Android for Android and UXDivers.Artina.Shared.iOS for iOS. So from your iOS project you will need to reference both UXDivers.Artina.Shared. andUXDivers.Artina.Shared.iOS. From Android you need to reference UXDivers.Artina.Shared. andUXDivers.Artina.Shared.Android.