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