Maui Handler, Confused at what to put inside of CreatePlatformView iOS

I have a custom view which previously was a Grid but I have changed its class inheritance to a View as this to me seems like the correct thing to do based on what I have read online.

• This custom view has content inside of it. (A grid Which has content inside of itself)
• This custom View has a handler in the native code.
• Then each project has its own version of the handler, where I can handle the mapping methods.

I am adding the content from my custom view to the platform view using a ContentMapper (Inside the native iOS handler)

    public static void MapContent(MyHandler handler, MyView view)
    {
        if (view.Content == null)
            return;
        handler.PlatformView.AddSubview(view.Content.ToPlatform(handler.MauiContext));
    }

And inside of CreatePlatformView() (Native iOS project) I currently have.

UIView uIView = new UIView();
        uIView.BackgroundColor = UIColor.Yellow;
        return uIView; 

But I can't see any of my content, I can however see the yellow background takes up the whole page.

I Have tried doing this inside of the CreatePlatformView()
VirtualView.ToPlatform(VirtualView.Handler.MauiContext) But one it doesn't work and two I don't think that should work anyway.

I could be doing it all wrong I am unsure. If needed I can create a demo project and upload it to GitHub.

So I was struggling on the same issue and this post didn't fully explain how to resolve the issue.

In my case I wanted to have a Grid on iOS that can resize as the keyboard pops up or disappears (for Android this issue can be resolved easier). But indeed, it seems easier to just use a ContentView as base class. So I've added a class KeyboardAdjustingView:

internal class KeyboardAdjustingView : ContentView
{
    // prevent circular references with the containing page by using a WeakReference
    private WeakReference<Page> _page;

    public KeyboardAdjustingView() { }

    protected override void OnParentSet()
    {
        base.OnParentSet();

        // disconnect old Unloaded event handler, if exists
        if (_page != null && _page.TryGetTarget(out Page oldPage))
        {
            oldPage.Unloaded -= Handle_PageUnloaded;
        }

        // add Unloaded event handler to parent page, so we can clean-up
        if (Parent != null && TryGetPage(Parent, out Page newPage))
        {
            newPage.Unloaded += Handle_PageUnloaded;
            _page = new WeakReference<Page>(newPage);
        }
    }

    #region Private

    // recursively find containing page
    private static bool TryGetPage(IElement element, out Page page)
    {
        page = null;

        if (element is Page pageElement)
        {
            page = pageElement;
            return true;
        }
        else
        {
            if (element.Parent != null)
            {
                return TryGetPage(element.Parent, out page);
            }
        }

        return false;
    }

    private void Handle_PageUnloaded(object sender, EventArgs e)
    {
        // no automated clean-up, so we need to do manually, see:
        // https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/create?view=net-maui-7.0
        Handler?.DisconnectHandler();
    }

    #endregion
}

P.S.: reason using a class based on ContentView is easier is that ContentView has a ContentViewHandler, but for Grid there doesn't seem to exist a GridHandler.

I also add a partial handler class implementation KeyboardAdjustingViewHandler:

internal partial class KeyboardAdjustingViewHandler : ContentViewHandler
{        
    public KeyboardAdjustingViewHandler() : base() { }
}

Please note this class inherits from ContentViewHandler, as the KeyboardAdjustingView class is based on ContentView.

Now for the iOS implementation we add a partial KeyboardAdjustingViewHandler class implementation in a file KeyboardAdjustingViewHandler.iOS.cs

internal partial class KeyboardAdjustingViewHandler
{
    private NSObject _keyboardShowObserver;
    private NSObject _keyboardHideObserver;

    protected override void ConnectHandler(Microsoft.Maui.Platform.ContentView platformView)
    {
        base.ConnectHandler(platformView);
        
        RegisterForKeyboardNotifications();
    }

    protected override void DisconnectHandler(Microsoft.Maui.Platform.ContentView platformView)
    {
        UnregisterForKeyboardNotificiations();

        platformView.Dispose();            

        base.DisconnectHandler(platformView);
    }

    #region Private

    private void RegisterForKeyboardNotifications()
    {
        _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
        _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
    }

    private void UnregisterForKeyboardNotificiations()
    {
        _keyboardShowObserver?.Dispose();
        _keyboardShowObserver = null;

        _keyboardHideObserver?.Dispose();
        _keyboardHideObserver = null;
    }

    private void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
    {
        nfloat keyboardHeight = 0;

        if (args.Notification.UserInfo is NSDictionary userInfo)
        {
            var result = (NSValue)userInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
            var keyboardSize = result.RectangleFValue.Size;

            // adjust keyboard height based on safe area insets on large screen devices like iPhone X
            keyboardHeight = keyboardSize.Height - UIApplication.SharedApplication.KeyWindow.SafeAreaInsets.Bottom;
        }

        if (VirtualView is View view)
        {
            view.Margin = new Thickness(0, 0, 0, keyboardHeight);
        }
    }

    private void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
    {
        if (VirtualView is View view)
        {
            view.Margin = new Thickness(0);
        }
    }

    #endregion
}

To ensure the KeyboardAdjustingViewHandler.iOS.cs is only compiled on iOS platforms we update the project file (*.csproj) with the following directives:

<Project Sdk="Microsoft.NET.Sdk">
	...

	<!-- Android -->
	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-android')) != true">
		<Compile Remove="**\**\*.Android.cs" />
		<None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
	</ItemGroup>

	<!-- Both iOS and Mac Catalyst -->
	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true AND $(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
		<Compile Remove="**\**\*.MaciOS.cs" />
		<None Include="**\**\*.MaciOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
	</ItemGroup>

	<!-- iOS -->
	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true">
		<Compile Remove="**\**\*.iOS.cs" />
		<None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
	</ItemGroup>

	<!-- Mac Catalyst -->
	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
		<Compile Remove="**\**\*.MacCatalyst.cs" />
	</ItemGroup>	
</Project>

The above ensures that files ending with iOS.cs are only compiled for iOS targets, but also includes directives for Android, Mac Catalyst and iOS / Mac Catalyst combined.

For more info see Configure multi-targeting

In order to use the native implementation we register our view and handler on start-up in MauiProgram.cs

public static MauiApp CreateMauiApp()
{
	var builder = MauiApp.CreateBuilder();
	builder
		.UseMauiApp<App>()
		// other stuff like MauiCommunityToolkit, Essentials, Services, Fonts ...
		.ConfigureMauiHandlers(handlers =>
		{
			// other handlers ...
			handlers.AddHandler(typeof(KeyboardAdjustingView), typeof(KeyboardAdjustingViewHandler));
		})

#if DEBUG
    builder.Logging.AddDebug();
#endif

	return builder.Build();
}

Finally to use the view, we can assign an instance to the Content property of a ContentPage, as such:

public class TextInputPage : BasePage // inherits from ContentPage
{
	public TextInputPage()
	{
		BindingContext = new TextInputViewModel();

        var content = new Grid
        {
            // some grid with various child Entry views ...
        };

		Title = "Title";
        Content = new KeyboardAdjustingView { Content = content };
	}
}