Xamarin ItemTemplate with a WebView control

Question

I am trying to add a WebView control inside a ItemTemplate and set the height of the row. I know that I can't have the webview control scroll so I need to setting the height to the correct size to display the full html content. I have created an IValueConverter class that I was thinking can return the correct height needed but what height value to return depending on how long the content is?

Anyway I can load the webview and get the height needed to display the full content I get -1 for height in my writeline?

XAML Code

<telerikListView:ListViewTemplateCell>
                        <Grid BackgroundColor="{StaticResource LightBlueColor}"
                              Padding="10">
                            <telerikPrimitives:RadBorder Padding="10"
                                             HorizontalOptions="Fill"
                                             BorderThickness="2"
                                             BorderColor="{StaticResource DarkBlueColor}"
                                             BackgroundColor="White">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="50" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                       <!--<RowDefinition Height="*"/>-->
                                        <RowDefinition Height="{Binding AssetItem.Description, Converter={StaticResource DescriptionToHeightConverter}}" />
                                    </Grid.RowDefinitions>

                                    <!--<Grid  Grid.Row="0"  Grid.Column="0">
                                        <HtmlLabelControl:HtmlLabel
                                        Text="{Binding AssetItem.Description}"
                                        HeightRequest="100"/>-->
                                    <WebView HeightRequest="800" MinimumHeightRequest="300"   HorizontalOptions="FillAndExpand">
                                        <WebView.Source>
                                            <HtmlWebViewSource Html="{Binding AssetItem.Description}"/>
                                        </WebView.Source>
                                    </WebView>
                                    <!--</Grid>-->

                                    <!--<WebView Grid.Column="0" Grid.Row="0" HeightRequest="200" HorizontalOptions="FillAndExpand">
                                        <WebView.Source>
                                            <HtmlWebViewSource Html="{Binding AssetItem.Description}"/>
                                        </WebView.Source>
                                    </WebView>-->

                                    <!--<Label Text="{Binding AssetItem.Description}"
                                           TextColor="{StaticResource GrayTextColor}"
                                           Grid.Row="0" 
                                           Grid.Column="0"/>-->
                                    <!--Star-->
                                    <telerikPrimitives:RadPath 
                                                       x:Name="path"
                                                       Grid.Row="0" 
                                                       Grid.Column="1"
                                                       WidthRequest="40"
                                                       HeightRequest="35"
                                                       StrokeThickness="2"
                                                       VerticalOptions="Start"
                                                       Fill="{Binding AssetItem.IsBookmark, Converter={StaticResource FavFillColorConverter}}"
                                                       Stroke="#3e7dc5"
                                                       Geometry="{x:Static telerikInput:Geometries.Star}">
                                        <telerikPrimitives:RadPath.GestureRecognizers>
                                            <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="BookmarkCommand" CommandParameter="{Binding AssetItem.AssetId}" />
                                        </telerikPrimitives:RadPath.GestureRecognizers>
                                    </telerikPrimitives:RadPath>
                                </Grid>


                                <!--</Grid>-->
                            </telerikPrimitives:RadBorder>
                        </Grid>
                    </telerikListView:ListViewTemplateCell>

CS Converter Logic

 public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {

        var description = value as string;

        //WebView wv = new WebView();

        //wv.Source = description;

        HtmlWebViewSource HtmlSource = new HtmlWebViewSource();
        HtmlSource.Html = description;
        WebView webView = new WebView()
        {
            Source = HtmlSource
        };


        Debug.WriteLine($"Web View Height: {webView.Height}");


        if (!string.IsNullOrEmpty(description))
        {
            if (description.Length == 300)
            {

                return 50;
            }
        }
        return 300;
    }

Test code

    HtmlWebViewSource HtmlSource = new HtmlWebViewSource();
    HtmlSource.Html = "<html><body><div><h1>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</h1></div></body></html>";
    WebView webView = new WebView()
    {
        Source = HtmlSource
    };

    string htmlheight = "";
    Task.Run(async () => {
        try
        {
            htmlheight = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight");
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }
    });

    //WebView_NavigatedAsync(webView);


    Debug.WriteLine($"Web View Height: {htmlheight}");

Lucas Zhang Lucas Zhang · Accepted Answer · 2019-05-01T06:16:21

If you want to get the height of the html .You can implement by using Custom Renderer

in Forms

public MainPage()
{
 InitializeComponent();

  HtmlWebViewSource HtmlSource = new HtmlWebViewSource();
  HtmlSource.Html = @"<html><body>
  <h1>Xamarin.Forms</h1>
  <p>Welcome to WebView.</p>
  </body></html>";



  Webview webView = new Webview()
  {
      WidthRequest = 100,
      HeightRequest = 20,
      Source =HtmlSource
  };

  MessagingCenter.Subscribe<Object, float>(this,"webview_loaded",(sender,value)=>{


     Console.WriteLine(value);  //value is the height of html


  });

   Content = new StackLayout
    {
      Children =
      {
        webView,
      },
      VerticalOptions = LayoutOptions.FillAndExpand,
      HorizontalOptions=LayoutOptions.FillAndExpand

     };


}

in iOS project

using Foundation;
using UIKit;
using CoreGraphics;

using xxx;
using xxx.iOS;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly:ExportRenderer(typeof(WebView),typeof(MyWebViewRenderer))]
namespace App7.iOS
{
    public class MyWebViewRenderer:WebViewRenderer,IUIWebViewDelegate
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if(NativeView!=null)
            {

             //  WeakDelegate = this;

            }



        }

        [Export("webViewDidFinishLoad:")]
        public void LoadingFinished(UIWebView webView)
        {
            string htmlHeight = webView.EvaluateJavascript("document.body.scrollHeight");

            float height = float.Parse(htmlHeight);



            MessagingCenter.Send<System.Object, float>(this, "webview_loaded", height);

        }
    }
}

in Android

using Android.Content;

using Android.Webkit;
using Android.Widget;

using xxx;
using xxx.Droid;
using Java.Lang;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebViewRenderer))]
namespace xxx.Droid
{
    public class MyWebViewRenderer:WebViewRenderer
    {

        public MyWebViewRenderer(Context context):base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if(Control!=null)
            {

                Android.Webkit.WebView webview =(Android.Webkit.WebView) Control;
                WebSettings settings = webview.Settings;
                settings.JavaScriptEnabled = true;
                webview.SetWebViewClient(new JavascriptWebViewClient());

            }

        }

    }



    public class JavascriptWebViewClient : WebViewClient

    {

        public override void OnPageFinished(Android.Webkit.WebView view, string url)

        {

            base.OnPageFinished(view, url);

            view.EvaluateJavascript("javascript:document.body.scrollHeight;", new EvaluateBack() );

        }

    }

    class EvaluateBack : Java.Lang.Object, IValueCallback
    {

        public void OnReceiveValue(Java.Lang.Object value)
        {
            string htmlHeight = value.ToString();

            float height = float.Parse(htmlHeight);

            MessagingCenter.Send<System.Object, float>(this,"webview_loaded",height);
        }
    }


}

Notes: in your test code ,you get call the method when the html didn't finish loading ,so the result is -1.

Xamarin ItemTemplate with a WebView control

1 Answers