Customize an Entry - Xamarin (2023)

Download the example

The Xamarin.Forms Entry control allows editing of a single line of text. This article shows how to create a custom renderer for the Entry control, allowing developers to override the default native rendering with their own platform-specific customization.

Every Xamarin.Forms control has a companion renderer for each platform that creates an instance of a native control. When aentrycontrol is rendered by a Xamarin.Forms application, in iOS theEntryRendersClass is instantiated, which in turn instantiates a nativeUITextFieldControl. On the Android platform is theEntryRendersclass instantiates aedit textControl. On the Universal Windows Platform (UWP) is theEntryRendersClass instantiates atext boxControl. For more information about the renderer and the native control classes that Xamarin.Forms controls map to, seeRenderer base classes and native controls.

The following diagram illustrates the relationship between theentrycontrol and the corresponding native controls that implement it:

The rendering process can be used to implement platform-specific customizations by creating a custom renderer for theentryControl on every platform. The process for this is as follows:

1. Createa custom Xamarin.Forms control.
2. Consumethe Xamarin.Forms custom control.
3. Createthe custom renderer for the controls on each platform.

Each point will now be discussed in turn to implement oneentryControl that has a different background color on each platform.

Creating the custom input control

A traditionentryControl can be created by subclassingentrycontrol as shown in the following code example:

public class MyEntry : Entry{}

TheMeinEintragcontrol is created in the .NET Standard library project and is simply aentryControl. Customization of the control is done in the custom renderer, so no additional implementation is required in theMeinEintragControl.

Consume the custom control

TheMeinEintragThe control can be referenced in XAML in the .NET Standard library project by declaring a namespace for its location and using the namespace prefix for the control. The following code example shows how theMeinEintragThe control can be used from a XAML page:

<ContentPage ... xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer" ...> ... <local:MyEntry Text="In Shared Code" /> ...</ContentPage>

ThelocalNamespace prefix can be named anything. However, theclr-NamespaceAndMontageThe values ​​must match the custom control details. Once the namespace is declared, the prefix is ​​used to refer to the custom control.

The following code example shows how theMeinEintragThe control can be used from a C# page:

public class MainPage : ContentPage{ public MainPage () { Content = new StackLayout { Children = { new Label { Text = "Hello, Custom Renderer !", }, new MyEntry { Text = "In Shared Code", } }, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.CenterAndExpand, }; }}

This code instantiates a new onecontent pageObject that displays alabelAndMeinEintragcentered on the page both vertically and horizontally.

A custom renderer can now be added to any application project to customize the control's appearance on each platform.

Building the custom renderer on each platform

The process to create the custom renderer class is as follows:

1. Create a subclass of theEntryRendersClass that renders the native control.
2. Overwrite theOnElementChangedmethod that renders the native control and writes logic to customize the control. This method is called when the corresponding Xamarin.Forms control is created.
3. Add oneExportRenderer-Attribute of the custom renderer class to indicate that it is used to render the Xamarin.Forms control. This attribute is used to register the custom renderer with Xamarin.Forms.

The following diagram illustrates the responsibilities of each project in the sample application and the relationships between them:

TheMeinEintragThe control is platform-specificMyEntryRendererClasses that all derive from theEntryRendersClass for every platform. This results in each caseMeinEintragControl is rendered with a platform-specific background color as shown in the screenshots below:

TheEntryRendersclass does itOnElementChangedMethod called when the Xamarin.Forms control is created to render the corresponding native control. This method takes aElementChangedEventArgsParameter that containsAltesElementAndNewItemCharacteristics. These properties represent the Xamarin.Forms element that the rendererWarattached and the Xamarin.Forms element that the rendererIsattached or in the sample application theAltesElementproperty will beNulland theNewItemproperty contains a reference to theMeinEintragControl.

An overwritten version of theOnElementChangedmethod in theMyEntryRendererclass is where the native control customization is done. A typed reference to the native control used on the platform can be accessed through thecontrolProperty. Additionally, a reference to the rendered Xamarin.Forms control can be obtained through theElementproperty, although not used in the sample application.

Each custom renderer class is decorated with oneExportRendererattribute that registers the renderer with Xamarin.Forms. The attribute accepts two parameters - the type name of the rendered Xamarin.Forms control and the type name of the custom renderer. TheMontageAttribute prefix indicates that the attribute applies to the entire assembly.

The following sections explain the implementation of each platform-specificMyEntryRenderercustom renderer class.

Building the custom renderer on iOS

The following code example shows the custom renderer for the iOS platform:

using Xamarin.Forms.Platform.iOS;[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]namespace CustomRenderer.iOS{ public class MyEntryRenderer : EntryRenderer { protected override void OnElementChanged (ElementChangedEventArgs<Entry> e) { base. OnElementChanged (e); if (Control != null) { // mache hier was du willst mit dem UITextField! Control.BackgroundColor = UIColor.FromRGB (204, 153, 255); Control.BorderStyle = UITextBorderStyle.Line; } } }}

The call to the base classOnElementChangedmethod instantiates an iOSUITextFieldcontrol, assigning a reference to the control to that of the renderercontrolProperty. The background color is then set to light purple withUIColor.FromRGBMethod.

Building the custom renderer on Android

The following code example shows the custom renderer for the Android platform:

using Xamarin.Forms.Platform.Android;[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]namespace CustomRenderer.Android{ class MyEntryRenderer : EntryRenderer { public MyEntryRenderer(Context context) : base(context) { } protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { base.OnElementChanged(e); if (Control != null) {Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen); } } }}

The call to the base classOnElementChangedmethod instantiates an androidedit textcontrol, assigning a reference to the control to that of the renderercontrolProperty. The background color is then set to light greenControl.SetBackgroundColorMethod.

Building the custom renderer on UWP

The following code example shows the custom renderer for UWP:

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]namespace CustomRenderer.UWP{ public class MyEntryRenderer : EntryRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { base.OnElementChanged(e); if (Control != null) {Control.Background = new SolidColorBrush(Colors.Cyan); } } }}

The call to the base classOnElementChangedMethod instantiates atext boxcontrol, assigning a reference to the control to that of the renderercontrolProperty. The background color is then set to cyan by creating aSolidColorBrushExample.

Summary

This article showed how to create a custom control renderer for Xamarin.FormsentryControl allowing developers to override the default native rendering with their own platform-specific rendering. Custom renderers offer a powerful approach to customizing the appearance of Xamarin.Forms controls. They can be used for small style changes or sophisticated platform-specific layout and behavior tweaks.

• CustomRendererEntry (example)