WebView to WebViewBrush - XAML

Question

I am trying to convert my WebView to a WebViewBrush in order to print it, in my UWP (C#/XAML) app.

I've set up my WebView, and the Brush such that when I click a button the WebView is hidden and the WebViewBrush gets displayed.

This is the XAML:

<WebView ext:Extension.HtmlString="{Binding Html}"
         x:Name="saveWebView"
         Grid.Row="1"
         Grid.Column="0" /> 

<Rectangle Height="400" x:Name="saveWebViewBrush" />

When I click the button to show the Brush, basically it's only taking a snapshot of what was visible in the WebView. What I want is to take a snapshot of the entire WebView (and not the scrollbars either!).

The only other person I've seen attempt this was https://stackoverflow.com/a/17222629/2884981 - but unfortunately that's a few years old, and when I try that solution I get a million errors stemming from InvokeScript being obsolete and InvokeScriptAsync causes breaking changes.

The C# code when I press the button is this:

private async void OnButtonClick(object sender, RoutedEventArgs e)
{
    //make the rectangle visible when you want something over the top of the web content
    saveWebViewBrush.Visibility = Windows.UI.Xaml.Visibility.Visible;

    //if the rectangle is visible, then hit the webview and put the content in the webviewbrush
    if (saveWebViewBrush.Visibility == Windows.UI.Xaml.Visibility.Visible)
    {
        WebViewBrush b = new WebViewBrush();
        b.SourceName = "saveWebView";
        b.Redraw();
        saveWebViewBrush.Fill = b;
        saveWebView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
    }
}

If anyone knows how to convert this whole WebView to a WebView brush I'd be most grateful.

EDIT

To explain the "why", I am trying to print the contents of a WebView. It seems from what I have read that this is not possible, unless I convert it to a WebViewBrush. But if anyone has any alternative ideas I am all ears!

score 2 · Answer 1 · edited May 23 '17 at 12:34

If anyone knows how to convert this whole WebView to a WebView brush I'd be most grateful.

To achieve this, you can try with following method:

private async void OnButtonClick(object sender, RoutedEventArgs e)
{
    int width;
    int height;
    // get the total width and height
    var widthString = await saveWebView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
    var heightString = await saveWebView.InvokeScriptAsync("eval", new[] { "document.body.scrollHeight.toString()" });

    if (!int.TryParse(widthString, out width))
    {
        throw new Exception("Unable to get page width");
    }
    if (!int.TryParse(heightString, out height))
    {
        throw new Exception("Unable to get page height");
    }

    // resize the webview to the content
    saveWebView.Width = width;
    saveWebView.Height = height;

    WebViewBrush b = new WebViewBrush();
    b.SourceName = "saveWebView";
    b.Redraw();
    saveWebViewBrush.Fill = b;
}

Please note that WebViewBrush.Redraw method happens asynchronously. So to make sure we can get the complete snapshot, we'd better not hide the WebView or we can add some delay before hide the WebView like:

await Task.Delay(500);
saveWebView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

Once we have the "saveWebViewBrush" Rectangle, we can refer to the Printing sample or this answer to print it.

WebView to WebViewBrush - XAML

EDIT

1 Answers1

Linked