InkCanvas over WebView

Question

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?

score 0 · Answer 1 · answered Dec 02 '15 at 17:04

0

Try this lab solution for using InkCanvas - it contains a file you can download and sample code. https://github.com/Windows-Readiness/WinDevHOLs/tree/master/06B%20Inking

A short explanation: you'll create an InkCanvas in your XAML

    <InkCanvas x:Name="InkCanvas" />

And you probably want to accept mouse and touch inputs on your canvas:

public MainPage()
{
    this.InitializeComponent();

InkCanvas.InkPresenter.InputDeviceTypes = 
    Windows.UI.Core.CoreInputDeviceTypes.Mouse |    
    Windows.UI.Core.CoreInputDeviceTypes.Pen | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch;
}

answered Dec 02 '15 at 17:04

Amanda Lange

733
3
10

Hey Amanda, thank you for reply, but I think we don't understand each other. That lab is just for create MS Paint like application and I need more likely Edge like application. I was playing with Edge for while and Edge works in this way: Edge create capture of current web and save it as image to drive and than switch himself into InkCanvas and I did the same... Final solution I can put on github and post link if you want... – Sebastian Busek Dec 02 '15 at 20:38
Yes, I guess I don't understand the distinction. You can add inkcanvas as a control to any app you make. So you also want to create a screencapture in your app and then switch to ink? – Amanda Lange Dec 03 '15 at 16:27

score 0 · Accepted Answer · answered Dec 07 '15 at 00:29

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;
}

InkCanvas over WebView

2 Answers2