How to create my own control?

Question

I want to create my own control using platform control.
For example, I have a MaterialEntry inherited from Entry.

public class MaterialEntry : Entry
    {
    }

But on handler level I want to handle to Google.Android.Material.TextField.TextInputLayout.
I'm trying to do this:

public interface IMaterialEntryHandler : IElementHandler
    {
        new TextInputLayout PlatformView { get; }
    }

    public partial class MaterialEntryHandler : ViewHandler<IEntry, TextInputLayout>, IMaterialEntryHandler
    {
        public static IPropertyMapper<IEntry, IMaterialEntryHandler> Mapper = new PropertyMapper<IEntry, IMaterialEntryHandler>(ViewHandler.ViewMapper)
        {
            [nameof(IEntry.Placeholder)] = MapPlaceholder,
        };

        public MaterialEntryHandler(IPropertyMapper mapper, CommandMapper commandMapper = null) : base(mapper, commandMapper)
        {
        }

        public MaterialEntryHandler() : base(Mapper)
        {
        }

        protected override TextInputLayout CreatePlatformView() => new TextInputLayout(Context);
        public static void MapPlaceholder(IMaterialEntryHandler handler, IEntry entry) => handler.PlatformView.Hint = entry.Placeholder;
    }

Page:

<material:MaterialEntry Placeholder="Hello!"></material:MaterialEntry>

MauiProgram:

builder.UseMauiApp<App>().ConfigureMauiHandlers(Handlers =>
        {
#if __ANDROID__
            Handlers.AddHandler(typeof(MaterialEntry), typeof(MaterialEntryHandler));
#endif
        });

But as a result I have a blank screen and entry is not visible. What am I doing wrong and how to create my custom control properly?
Thanks.

Answer 1

Hello,

The reason why your custom control is not visible is that the Google.Android.Material.TextField.TextInputLayout is a layout class.

Therefore, if you didn't add some view to the layout, it would be blank.

You can try to add the following code into your IMaterialEntryHandler file, it would make the entry visible.

   private TextInputEditText _inputEditText;  
   public static void MapPlaceholder(MaterialEntryHandler handler, IEntry entry)  
   {  
       handler._inputEditText.Hint = entry.Placeholder;  
   }  
     
   protected override TextInputLayout CreatePlatformView()  
   {  
       var layout = new TextInputLayout(Context);  
     
       _inputEditText = new TextInputEditText(layout.Context);  
       layout.AddView(_inputEditText);  
     
       return layout;  
   }  

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.