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.