Share via

Custom Webview Renderer in MAUI iOS

Bhuwan 736 Reputation points
2024-02-12T07:45:48.9466667+00:00

In Xamarin forms we are using custom WebView renderer for iOS. 

using System;
using Dev.Controls; 
using Dev.iOS.Controls;
using Foundation; 
using UIKit;
using WebKit;
using Xamarin.Forms; 

using Xamarin.Forms.Platform.iOS; 

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
 namespace Dev.iOS.Controls { 
/// <summary>
/// CustomWebViewRenderer 
/// </summary>
 public class CustomWebViewRenderer : WkWebViewRenderer {
 /// <summary>
 /// OnElementChanged 
/// </summary> 
/// <param name="e"></param> 
protected override void OnElementChanged(VisualElementChangedEventArgs e) {
 try { 
base.OnElementChanged(e);
 NavigationDelegate = new ExtendedWKWebViewDelegate(this); 
// For fixing white flash issue in webview on dark themes/backgrounds and disable w ebview'sscrolling 

if (NativeView != null) 
{ 
                var webView = (WKWebView)NativeView;
                webView.Opaque = false;
                webView.BackgroundColor = UIColor.Clear;
                webView.ScrollView.ScrollEnabled = false;
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine("Error at ExtendedWebViewRenderer OnElementChanged: " + ex.Message);
        }
    }
}
/// <summary>
/// ExtendedWKWebViewDelegate
/// </summary>
class ExtendedWKWebViewDelegate : WKNavigationDelegate
{
    /// <summary>
    /// webViewRenderer
    /// </summary>
    CustomWebViewRenderer webViewRenderer;
    /// <summary>
    /// ExtendedWKWebViewDelegate
    /// </summary>
    /// <param name="_webViewRenderer"></param>
    public ExtendedWKWebViewDelegate(CustomWebViewRenderer _webViewRenderer)
    {
        webViewRenderer = _webViewRenderer ?? new CustomWebViewRenderer();
    }
    /// <summary>
    /// DidFinishNavigation
    /// </summary>
    /// <param name="webView"></param>
    /// <param name="navigation"></param>
    public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        var wv = webViewRenderer.Element as CustomWebView;
        if (wv != null && webView != null)
        {
            await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
            if (webView.ScrollView != null && webView.ScrollView.ContentSize != null)
            {
                wv.HeightRequest = (double)webView.ScrollView.ContentSize.Height;
            }
        }
    }
}

}

how to convert this code in MAUI because i try and i am getting error because i want to adjust html content in webview height based on content

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,830 questions
0 comments
Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 78,511 Reputation points Microsoft Vendor
    2024-02-13T00:49:24.9466667+00:00

    Hello,

    You can do it by handler for webview. I add webview handler in the page's background code. Then you can use Conditional compilation for iOS platform achievement.

    You can refer to the following code. Note:You can add iOS implementation blew the android implementation.

          Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
                if (view is CustomWebView)
                {
                    CustomWebView customWebView = view as CustomWebView;
#if ANDROID            
                handler.PlatformView.SetWebViewClient(new XamWebViewClient(customWebView));
#elif IOS
                    try
                    {
                        handler.PlatformView.NavigationDelegate = new ExtendedWKWebViewDelegate(customWebView);


                       if (handler.PlatformView != null)
                        {
                            var webView = (WKWebView)handler.PlatformView;
                            webView.Opaque = false;
                            webView.BackgroundColor = UIColor.Clear;
                            webView.ScrollView.ScrollEnabled = false;
                        }
                    }
                    catch (Exception ex)
                    {


                       Console.WriteLine("Error at WebViewHandler: " + ex.Message);
                    }
#endif
                }
            });



#if IOS
    /// <summary>
    /// ExtendedWKWebViewDelegate
    /// </summary>
    class ExtendedWKWebViewDelegate : WKNavigationDelegate
    {
        private CustomWebView customWebView;


       public ExtendedWKWebViewDelegate(CustomWebView customWebView)
        {
            this.customWebView = customWebView;
        }


       /// <summary>
        /// DidFinishNavigation
        /// </summary>
        /// <param name="webView"></param>
        /// <param name="navigation"></param>
        public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
          
            if (customWebView != null && webView != null)
            {
                await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
                if (webView.ScrollView != null && webView.ScrollView.ContentSize != null)
                {
                    customWebView.HeightRequest = (double)webView.ScrollView.ContentSize.Height;
                }
            }
        }
    }
#endif

    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.

    2 people found this answer helpful.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.