How to add custom renderer in MAUI

by

I am trying to add a custom render in my MAUI application. I have added renderer class on my project, android and iOS platform folders.

On Main Project:

namespace MyApp.Renderer
{
    public class CustomEntry : Entry
    {
    }
}

Android Platform:

using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.OS;
using Android.Runtime;
using Android.Text;
using Android.Views;
using Android.Widget;
using MyProject.Droid.Renderer;
using MyProject.Renderer;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Platform;

namespace MyProject.Droid.Renderer
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

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

            if (Control != null)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable(gd);
                this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
                //Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
            }
        }
    }
}

iOS Project:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using MyProject.iOS.Renderer;
using MyProject.Renderer;
using Foundation;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Compatibility.Platform.iOS;
using Microsoft.Maui.Controls.Platform;
using UIKit;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace MyProject.iOS.Renderer
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.BorderStyle = UITextBorderStyle.None;
                //Control.Layer.CornerRadius = 10;
                //Control.TextColor = UIColor.White;
            }
        }
    }
}

On XAML:

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:MyProject.Renderer"
    x:Class="MyProject.LoginPage">

    <local:CustomEntry
        x:Name="username_entry"
        Placeholder="UserName"
        ReturnType="Next"
        Keyboard="Email"/>

I have added this custom renderer for removing the default underline from entry. But the custom entry effect is not working after this. Anything else is pending to add for the working of custom renderer?

Export Render should be removed:

//[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]

Instead, the render has to be specified in the startup.

More about here:
https://learn.microsoft.com/en-us/dotnet/maui/migration/custom-renderers

And this guy has expertise with MSFT products and 3rd party controls:
https://www.syncfusion.com/blogs/post/how-to-reuse-xamarin-forms-custom-renderers-in-net-maui.aspx

Anyway, this we do only if we are migrating Xamarin projects with renderers.
If we are writing something new, we use Handlers instead:

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/

Leave a Comment