create custom view handler just for android and ios

mc 3,906 Reputation points
2023-04-25T06:44:42.9+00:00

I use maui only want to for android and ios. and create an custom view MyEntry and viewHandler MyEntryViewHandler 1.MyEntryViewHandler.iOS 2.MyEntryViewHandler.android.cs and create MapText

public static void MapText(MyEntryViewHandler handler,MyEntry view)
{
}

but it tells that there is no MapText unless I create MyEntryViewHandler.window.cs in MyEntryViewHandler.cs public static PropertyMapper<Controls.MyEntry, MyEntryViewHandler> Mapper=new (ViewMapper) { [nameof(Controls.PoEntry.Text)] = MapText } MyEntryViewHandler cannot use for PropertyMapper<TVirtualView,TViewHandler> 's parameter TViewHandler why?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,064 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,646 Reputation points Microsoft Vendor
    2023-04-26T08:26:01.31+00:00

    Hello,

    You need to add PropertyMapper in the EntryViewHandler, then you can mapper your properties of CustomEntry and Native platform controls. But you do not need to create MyEntryViewHandler.window.cs just for android and ios. If you Configure filename-based multi-targeting

    Here are completely steps to create a EntryViewHandler.

    Firstly, based on your description, you create a custom View with tested properties like following code.

    public class CustomEntry : View, ICustomEntry
    {
        public string Text { get; set; }
        public Color TextColor { get; set; }
    }
    public interface ICustomEntry : IView
    {
        public string Text { get; }
        public Color TextColor { get; }
    }
    

    Then, you can create a Handlers folder in your MAUI project, Add MyEntryHandler.cs, MyEntryHandler.android.cs and MyEntryHandler.ios.cs in this Handlers folder.

    MyEntryHandler.cs file is an empty partial class like following code.

    namespace MauiPopAsyncDemo.Handlers
    {
        public partial class MyEntryHandler
        {
    
        }
    
    }
    

    MyEntryHandler.android.cs file, you need to add PropertyMapper, then you can create a relationship between native android control(AppCompatEditText) and your customEntry. By the way, please do not forget to add CustomEntryMapper to your MyEntryHandler's constrcutor's base method like following code.

    #if  ANDROID
    using AndroidX.AppCompat.Widget;
    using Android.Content;
    #endif
    
    using Microsoft.Maui.Handlers;
    using Microsoft.Maui.Controls.Compatibility.Platform.Android;
    
    namespace MauiPopAsyncDemo.Handlers
    {
        public partial class MyEntryHandler :ViewHandler<ICustomEntry, AppCompatEditText>
        {
            public MyEntryHandler() : base(CustomEntryMapper)
            {
    
           }
           public static PropertyMapper<ICustomEntry, MyEntryHandler> CustomEntryMapper = new PropertyMapper<ICustomEntry, MyEntryHandler>(ViewHandler.ViewMapper)
            {
                [nameof(ICustomEntry.Text)] = MapText,
                [nameof(ICustomEntry.TextColor)] = MapTextColor,
            };
           protected override AppCompatEditText CreatePlatformView()
            {
                return new AppCompatEditText(Context);
            }
           static void MapText(MyEntryHandler handler, ICustomEntry entry)
            {
                handler.PlatformView.Text= entry.Text;
            }
           static void MapTextColor(MyEntryHandler handler, ICustomEntry entry)
            {
                handler.PlatformView?.SetTextColor(entry.TextColor.ToAndroid())  ;
            }
       }
    }
    

    MyEntryHandler.ios.cs I donot know which control that you want to custom, SO I add an empty partial class for testing.

    namespace MauiPopAsyncDemo.Handlers
    {
        public partial class MyEntryHandler
        {
    
    
       }
    }
    

    In the end, you need to register this handler. I do not implement iOS platform. So I just register for android platform. I test above code; it could run in android platform.

     public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                })
                .ConfigureMauiHandlers(handlers =>
                {
    #if __ANDROID__
                     handlers.AddHandler(typeof(CustomEntry), typeof(MauiPopAsyncDemo.Handlers.MyEntryHandler));
    #endif
                }); ;
    
    
    #if DEBUG
            builder.Logging.AddDebug();
    #endif
    
           return builder.Build();
        }
    

    Best Regards, Leon Lu


    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.