Custom Renderers in Xamarin Forms

This article describes Custom Renderers for customizing the appearance and behavior of Xamarin.Forms controls.

Xamarin.Forms user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform. Custom Renderers let developers override this process to customize the appearance and behavior of Xamarin.Forms controls on each platform.

Each Xamarin Forms control has a platform specific renderer which creates an instance of native control. Refer to understand various control renderers.

In this article, implementing the Custom Renderers for 3 of the Xamarin forms controls, Entry, Editor and View.

1) Entry

Entry is a TextBox control in Windows. Since MaxLength property is not given for Entry control, implementing the custom renderer to set the max length.  Create a Xamarin forms project and add a CustomEntry class in PCL project and inherit from Entry class as below.

public
class CustomEntry : Entry
{
}

Add a CustomEntryRenderer class to UWP or Windows project, inherit from EntryRenderer class and register with ExportRenderer.
Now, override the OnElementChanged method to find the platform specific control i.e TextBox in this case and set the MaxLength as below.

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace FormsCustomRenderers.UWP
{
    public class CustomEntryRenderer : EntryRenderer
    {
         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
         {
             base.OnElementChanged(e);
             if (e.NewElement != null)
            {
                 this.Control.MaxLength = 9;
            }
        }
    }
}

Open the Xamarin Forms view and add the CustomEntry as below.

<local:CustomEntry Keyboard="Numeric"></local:CustomEntry>

2) Editor
Editor is a multiline textbox control in Windows. Since Placeholder property is not given for Editor control, implementing the custom renderer to set the placeholder.  Add CustomEditor class in PCL project and inherit from the Editor

public
class CustomEditor : Editor
{
}

Define the attached property for placeholder:

public static readonly BindableProperty PlaceholderProperty = BindableProperty.CreateAttached("Placeholder", typeof(string), typeof(CustomEditor), null, BindingMode.TwoWay);

public
string Placeholder
{
            get
            {
                 return (string)GetValue(PlaceholderProperty);
            }

            set
            {
                SetValue(PlaceholderProperty, value);
            }
  }

Add a CustomEditorRenderer class in UWP project and inherit from EditorRenderer. Add ExportRenderer to namespace to register this class as did for CustomEntryRenderer.  Placeholder implementation as below:

protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
 {
             base.OnElementChanged(e);

             if (e.NewElement != null)
            {
                var element = e.NewElement as CustomEditor;
                 this.Control.MaxLength = 140;
                 this.Control.PlaceholderText = element.Placeholder;
             }
}

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
         {
             base.OnElementPropertyChanged(sender, e);

             if (e.PropertyName == CustomEntry.PlaceholderProperty.PropertyName)
            {
                var element = this.Element as CustomEditor;
                 this.Control.PlaceholderText = element.Placeholder;
            }
        }

From above, OnElementPropertyChanged will be fired when there is any control property state or value gets changed.
Now, add the CustomEditor for view and set the Placeholder to be applied.

<
local:CustomEditor Placeholder="Editor" ></local:CustomEditor>

3) If you want to render user control which would be created in UWP in to Xamarin forms view, follow below steps.    Add customView class in Xamarin Forms PCL project and inherit from view

public
class ChatBubbleControl : View
{

}

Add UserControl.xaml in UWP project and add controls as per your requirement.
Add CustomViewRenderer class, inherit from ViewRenderer and invoke the usercontrol as below.

public
class ChatBubbleRender : ViewRenderer<ChatBubbleControl, UserControls.ChatBubbleTextBox>
    {
  private UserControls.ChatBubbleTextBox chatBubble;
protected override void OnElementChanged(ElementChangedEventArgs<ChatBubbleControl> e)
         {
             base.OnElementChanged(e);
             
             if (this.Control == null)
            {
                 this.chatBubble = new UserControls.ChatBubbleTextBox();
                 if (e.NewElement != null)
                 {
                     this.SetNativeControl(this.chatBubble);
                }
            }
}
}

Add the CustomView to Xamarin forms view.

<renders:ChatBubbleControl />

Download the working sample.



By Siva Jagan Dhulipalla   Popularity  (565 Views)