Custom Xamarin.Forms.WebView for reading pdf. Scroll with anchor

Question

I try to found the way for displaying local pdf files on xamarin.forms. I found a solution with implementing custom implementation of webview and its render: pdf reader

The main code is:

public class CustomWebView : WebView
{
    public static readonly BindableProperty UriProperty = BindableProperty.Create<CustomWebView, string>(p => p.Uri, default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }
}

Render:

[assembly: ExportRenderer (typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace DisplayPDF.iOS
{
    public class CustomWebViewRenderer : ViewRenderer<CustomWebView, UIWebView>
    {
        protected override void OnElementChanged (ElementChangedEventArgs<CustomWebView> e)
        {
            base.OnElementChanged (e);

            if (Control == null) {
                SetNativeControl (new UIWebView ());
            }
            if (e.OldElement != null) {
                // Cleanup
            }
            if (e.NewElement != null) {
                var customWebView = Element as CustomWebView;
                string fileName = Path.Combine (NSBundle.MainBundle.BundlePath, string.Format ("Content/{0}", WebUtility.UrlEncode (customWebView.Uri)));
                Control.LoadRequest (new NSUrlRequest (new NSUrl (fileName, false)));
                Control.ScalesPageToFit = true;
            }
        }
    }
}

And my page:

public class WebViewPageCS : ContentPage
    {
        public WebViewPageCS ()
        {
            webView = new CustomWebView
            {
                Uri = "ScalaReference.pdf",
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
    }

But now I can't find the way to add anchor to this pdf file like described at this post: anchor to pdf

Also I tried to use this code for evaluate script:

private async void Scroll_Clicked(object sender, EventArgs e)
{
      webView.Eval($"window.scrollTo(0, {x});");
}

it works fine with default webview but not with custom one.

Maybe someone know any another way to scroll / set anchor to pdf and link to this anchor via xamarin.forms? Thank you.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

it works fine with default webview but not with custom one.

It is not caused by custom webview , because the renderer create a new UIWebview for Control in CustomWebViewRenderer, look at this code part:

if (Control == null) {
   SetNativeControl (new UIWebView ());
}

So ,it is not working when executing webView.Eval($"window.scrollTo(0, {x});");,since this webview is not actually the UIWebview.

Solution

Create BindableProperty in CustomWebView

public static readonly BindableProperty AnchorProperty = BindableProperty.Create<CustomWebView, float>(p => p.Anchor, default(float));

public float Anchor
{
    get { return (float)GetValue(AnchorProperty); }
    set { SetValue(AnchorProperty, value); }
}

Trigger it in page

private void Scroll_Clicked(object sender, System.EventArgs e)
{
    webview.Anchor = 200;
}

Get the value in renderer and make webview scroll.

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    base.OnElementPropertyChanged(sender, e);

    if(e.PropertyName is "Anchor")
    {
        var customWebView = Element as CustomWebView;
        float anchor = customWebView.Anchor;
        Control.ScrollView.ContentOffset = new CoreGraphics.CGPoint(0, anchor);
    }
}

Cole Xia, thank you so much! Yeah, it works in this way. Just one more question for you, please, sir :) Do you know someway to bind this anchor to pdf sections or pages like described at pdf docs: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf because setting defined offset and scroll to it (instead of link to the defined anchor or specific page) is some kind of workaround you know.. — pavel, May 31 '18 at 08:07
Check this [link](https://stackoverflow.com/questions/1927841/is-there-a-way-to-programmatically-scroll-to-a-pdf-page-within-a-uiwebview) , maybe you'll find what you want — ColeX, May 31 '18 at 08:14

Custom Xamarin.Forms.WebView for reading pdf. Scroll with anchor

1 Answers1

Solution