How to increase the height or width(through scrolling) for InkCanvas when the user Ink near the end?

Question

I want to increase the height or width(through scrolling) of InkCanvas when the user Ink near the end of the InkCanvas Like OneNote.

Solution Tried:

1. I tried ScrollViewer for InkCanvas but It didn't work
2. I thought of re-styling it but I can't find the InkCanvas in generic.xaml

Here is my code for InkCanvas:

<ScrollViewer Grid.Row="1">
    <Grid>
        <InkCanvas Name="PATH_INK_CANVAS" Canvas.ZIndex="-1"/>
        <RichEditBox Name="PATH_RICH_EDIT_BOX" Canvas.ZIndex="0" PlaceholderText="Input Text" Style="{StaticResource RichEditBoxStyle}"/>
    </Grid>
</ScrollViewer>

Answer 1

We should find the Bound of Ink in InkCanvas and compare it with ActualSize of the InkCanvas then increase the InkCanvas if we need. It can be done using below code.

public MainPage()
{
    this.InitializeComponent();
    PATH_INK_CANVAS.InkPresenter.StrokeInput.StrokeEnded += StrokeInput_StrokeEndedAsync;
}

private async void StrokeInput_StrokeEndedAsync(InkStrokeInput sender, PointerEventArgs args)
{
    await Task.Delay(100);

    var XBound = PATH_INK_CANVAS.InkPresenter.StrokeContainer.BoundingRect.Bottom;
    if (XBound > PATH_INK_CANVAS.ActualHeight - 400)
        PATH_INK_CANVAS.Height = XBound + 400;

    var YBound = PATH_INK_CANVAS.InkPresenter.StrokeContainer.BoundingRect.Right;
    if (YBound > PATH_INK_CANVAS.ActualWidth - 400)
        PATH_INK_CANVAS.Width = YBound + 400;
}