0

I'm writing an inking UWP app in C#/XAML and would like to implement a Microsoft Whiteboard-like zooming inkCanvas and Canvas for shape/text recognition. I have a Grid with an ImageBrush background with the Canvas and InkCanvas, but I'm not sure how to go about a zooming function.

My code for context:

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" 
             Orientation="Horizontal" 
             Grid.Row="0">
        <TextBlock x:Name="Header" 
                 Text="Basic ink analysis sample" 
                 Style="{ThemeResource HeaderTextBlockStyle}" 
                 Margin="10,0,0,0" />
        <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}"/>
        <Button x:Name="recognize" 
             Content="Recognize" 
             Margin="50,0,10,0"/>
    </StackPanel>
    <Grid x:Name="drawingCanvas" Grid.Row="1">
        <Grid.Background>
            <ImageBrush ImageSource="/Assets/isoPaper.png" AlignmentY="Top" AlignmentX="Center"/>
        </Grid.Background>
        <!-- The canvas where we render the replacement text and shapes. -->
        <Canvas x:Name="recognitionCanvas" />
        <!-- The canvas for ink input. -->
        <InkCanvas x:Name="inkCanvas"/>

    </Grid>
</Grid>
T M
  • 3
  • 1

1 Answers1

0

try wrapping inkcanvas into a scrollviewer and the call tha funtion changeView(HorizontalOffset,Verticaloffset,zoomLevel) from backend

<StackPanel x:Name="HeaderPanel" 
         Orientation="Horizontal" 
         Grid.Row="0">
    <TextBlock x:Name="Header" 
             Text="Basic ink analysis sample" 
             Style="{ThemeResource HeaderTextBlockStyle}" 
             Margin="10,0,0,0" />
    <ScrollViewer x:Name="scroll">
        <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}"/>
    </ScrollViewer>
    <Button x:Name="recognize" 
         Content="Recognize" 
         Margin="50,0,10,0"/>
</StackPanel>

scroll.ChangeView(null,null,zoomLevel)

it will zoom the Ink Canvas and Provide scroll to pan it

Abhishek Sharma
  • 104
  • 1
  • 7
  • That just adds a scroll function to the InkToolbar, which is separate from the InkCanvas. I need that whole Grid at the bottom to be zoomed to mouse pointer. – T M Nov 02 '20 at 13:25
  • Then you have to wrap the part in one panel and that goes to scroll viewer then to zoom where you have the mouse you have to calculate horizontal offset and vertical offset and pass that to change view function which will scroll to the same point – Abhishek Sharma Nov 02 '20 at 23:49