Sebastian Busek Sebastian Busek - 4 years ago 190
C# Question

InkCanvas over WebView

How can I write notes over web page like in MS Edge in Universal Apps?

If you're not familiar with Edge: You can activate 'notes panel' and write some notes, but you can also scroll in page during writing notes.

How can I do the same?

Answer Source

Well, at the end it wasn't too hard. Here are code snippets and Proof of concept solution is on GitHub. But first things first.

1) XAML - WebView has to be at the top; under WebView is hidden InkCanvas and Rectangle for drawing final web screen shot.

<ScrollViewer>
    <WebView Grid.Row="0" x:Name="WebView" />
</ScrollViewer>
<ScrollViewer Grid.Row="0" x:Name="ScrollPainter" Visibility="Collapsed" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1">
    <Grid>
        <Rectangle x:Name="Painter" />
        <InkCanvas x:Name="InkCanvas" />
    </Grid>
</ScrollViewer>

2) Code behind (for simplicity) - is separated to more steps, but tha main idea is simple: when user start to write/draw notes, then capture web screenshot and draw it into Rectangle and hide WebView.

private async Task CaptureWebView()
{
    int width;
    int height;
    var originalWidth = WebView.ActualWidth;
    var originalHeight = WebView.ActualHeight;

    var widthString = await WebView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
    var heightString = await WebView.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
    WebView.Width = width;
    WebView.Height = height;

    var brush = new WebViewBrush();
    brush.SetSource(WebView);

    Painter.Width = width;
    Painter.Height = height;
    Painter.Fill = brush;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download