0

I saw Microsoft's whiteboard today and I like the base inkCanvas(it's my guess) control of it. and I decide to create a control in UWP app using inkCanvas which behaves similar as Microsoft's whiteboard UWP application. Microsoft UWP Whiteboard - My goal is as below

  1. It should add width & scroll on right side if inkCanvas has any shape draw near right side. I tried below code it actully working but not scrolling the way in microsoft's whiteboard is working.
var right = inkCanvas.InkPresenter.StrokeContainer.BoundingRect.Right;
        if (right > inkCanvas.ActualWidth - 400)
        {
            inkCanvas.Width = right + 400;
        }
  1. Similar for bottom side of inkCanvas to increase height.
var bottom = inkCanvas.InkPresenter.StrokeContainer.BoundingRect.Bottom;
            if (bottom > inkCanvas.ActualHeight - 400)
            {
                grdCan.Height = bottom + 400;
            }

The problem is same it is not getting scroll automatically.

Also for adding space on left side I have used the flowcontrol property of inkCanvas which is working fine, but for adding space in "Top" position I have no solution.

any help or direction would be much appreciable.

Thanks

Update: Code

<Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <InkToolbar Grid.Row="0" 
                        Margin="10"
                        x:Name="inkToolbar" 
                        VerticalAlignment="Top"
                        TargetInkCanvas="{x:Bind inkCanvas}">
            </InkToolbar>
            <ScrollViewer Grid.Row="1" 
                          x:Name="scrollViewer" 
                          ZoomMode="Enabled" 
                          MinZoomFactor="1" 
                          MaxZoomFactor="20"
                          VerticalScrollMode="Enabled" 
                          VerticalScrollBarVisibility="Auto" 
                          HorizontalScrollMode="Enabled" 
                          HorizontalScrollBarVisibility="Auto">
                <Grid Height="{Binding ElementName=scrollViewer, Path=ViewportHeight}"
                            Width="{Binding ElementName=scrollViewer, Path=ViewportWidth}">
                    <Canvas x:Name="recognitionCanvas"/>
                    <InkCanvas x:Name="inkCanvas"/>
                </Grid>
            </ScrollViewer>
        </Grid>

0 Answers0