Detecting WebView Height via Scrolling in XAML

Question

I really need to be able to work out how tall a piece of HTML is inside a given WebView. It's pretty much crucial to the project I'm trying to build. I know it's not immediately possible but I could determine whether a scrollbar existed on a WebView I might be able to increase the height of the view until it disappeared.

Any thoughts on this? Or any alternative solutions / suggestions? I looked into converting it for a TextBlock using the HTMLAgilityPack (now ported to Metro) but the HTML is too complex for that.

Bedder

Do you happen to know how large your html will be ahead of time? – Creatinine

If you know how large it is why not just give it a fixed size? – Creatinine

I know how large the HTML will be in terms of file size, number of lines etc. As in, I know the content of the HTML before I bind it to the WebView. I do not have a function for calculating the height of that HTML when rendered. If I did that I'd essentially be writing a full HTML rendering engine just to get a height property! – Bedder

Can't you execute some JavaScript against the DOM to get the body height when the document is loaded? – Bluhm

It's a XAML app, not a HTML/Javascript one – Bedder

I mean to get info about the HTML, you need to access the DOM. That's done with Javascript within the HTML, see my answer below – Bluhm

Answer 1

If you have control over the HTML, add this javascript:

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

(from http://james.padolsey.com/javascript/get-document-height-cross-browser/)

And call this rather than alert:

window.external.notify(getDocHeight());

Then implement the ScriptNotify event:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.scriptnotify.aspx

Bluhm

Ah, so I could insert javascript into the HTML and then fire an event. Didn't think of that. I'll try it and get back to you – Bedder

That's the answer. Excellent work! I can now calculate and set the height of the Webview. The height is coming out wrong for certain very simple documents but that's a javascript issue. Thanks! – Bedder

@Bedder I'm running into the same issue. The height is to great for some simple html but correct for others. – Demaggio

Answer 2

This may be a good solution but there is still a problem with device pixel density. If you run your code on WP the conversion may look like this:

private double PixelsToLogicalPixels(double pixels)
{
     var info=Windows.Graphics.Display.DisplayInformation.GetForCurrentView();
     return pixels / info.RawPixelsPerViewPixel;
}
private double LogicalPixelsToPixels(double pixels)
{
     var info = Windows.Graphics.Display.DisplayInformation.GetForCurrentView();
     return pixels * info.RawPixelsPerViewPixel;
}

Gallegos

This may be a good solution? Is this a comment to an other answer? Then make it a comment, not an answer please. – Nitrobacteria