Forum Xamarin.Forms

Set dynamic height of webview in Xamarin.Forms uwp platform

heli_shahheli_shah Member ✭✭

I am working on Xamarin.Forms application and want to set height of webview dynamically as pet text in uwp platform. Please let me know if anyone has any idea regarding this. Thanks.

Answers

  • YelinZhYelinZh Member, Xamarin Team Xamurai

    Normally WebView does not have any control template and the display area is the Width and Height.
    You can set "Auto" or "Double.NaN" as the variable to make it autofit.

    Refer to: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/93b4e3df-2cb5-4ac0-a2b9-a86d0574aefa/auto-fit-webview-to-contents?forum=winappswithcsharp

  • heli_shahheli_shah Member ✭✭

    @yelinzh Thanks for your response but I tried this solution already. Height value "Auto" or "Double.NaN" not supported in xamarin.forms.

  • YelinZhYelinZh Member, Xamarin Team Xamurai

    Create a WebView custom renderer to set the content height to the height of the WebView.

    You can refer to the Android WebView Renderer about customing height: https://xamarinhelp.com/webview-rendering-engine-configuration/

  • MarkZhukovskyMarkZhukovsky USMember ✭✭
    edited July 2019

    Here's where I landed. Know very little about UWP so please feel free to suggest improvements, but this seems to work fairly well. Note that in my case I'm passing an HTML string from my custom control to render/"navigate" to, if you're going to an actual page just use Control.Navigate(Uri source) instead.

    public class ExtendedWebViewRenderer : ViewRenderer<ExtendedWebView, Windows.UI.Xaml.Controls.WebView>
    {
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    try
    {
    base.OnElementChanged(e);

                if (e.OldElement != null && Control != null)
                {
                    Control.NavigationCompleted -= OnWebViewNavigationCompleted;
                }
    
                if (e.NewElement != null)
                {
                    if (Control == null)
                    {
                        SetNativeControl(new Windows.UI.Xaml.Controls.WebView());
                    }
    
                    Control.NavigationCompleted += OnWebViewNavigationCompleted;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error at ExtendedWebViewRenderer OnElementChanged: " + ex.Message);
            }
        }
    
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
        // update this based on your custom webview control and what you want it to do
            if (Element is ExtendedWebView element && e.PropertyName.Equals(nameof(ExtendedWebView.Html)) && !string.IsNullOrWhiteSpace(element.Html))
                Control.NavigateToString(element.Html); 
        }
    
        private async void OnWebViewNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            if (!args.IsSuccess)
                return;
    
            var heightString = await Control.InvokeScriptAsync("eval", new[] {"document.body.scrollHeight.toString()" });
            if (int.TryParse(heightString, out int height))
            {
                Element.HeightRequest = height;
            }
    
            var widthString = await Control.InvokeScriptAsync("eval", new[] {"document.body.scrollWidth.toString()" });
            if (int.TryParse(widthString, out int width))
            {
                Element.WidthRequest = width;
            }
        }
    }
    
Sign In or Register to comment.