0

I am trying to zoom into a InkCanvas.

My first Idea was: 

<ScrollViewer ZoomMode="True">
   <InkCanvas>
   </InkCanvas>
</ScrollViewer>

But this way did not work.

I cant write anything on my Canvas after I put it into a ScrollViewer.

Maybe someone can Help.

Thanks

Agredo

Agredo
  • 131
  • 1
  • 10

2 Answers2

2

Just built out a little proof of concept and I got it working!

Here is the XAML:

<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7"                               HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
              VerticalScrollBarVisibility="Visible" Height="275" Width="525" BorderBrush="LightBlue" BorderThickness="2">
    <Border BorderBrush="Black" BorderThickness="2" Height="250" Width="500">
        <InkCanvas x:Name="InkCanvas" Loaded="InkCanvas_Loaded"/>
    </Border>
</ScrollViewer>

I wrapped the Ink Canvas and Scrollviewer with borders so you can see where they are in relation to eachother. Here is the InkCanvas_Loaded method as well:

  private void InkCanvas_Loaded(object sender, RoutedEventArgs e)
    {
        InkCanvas canvas = sender as InkCanvas;

        //Set inputs
        canvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen |
            Windows.UI.Core.CoreInputDeviceTypes.Touch;

        // Set initial ink stroke attributes.
        InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
        drawingAttributes.Size = new Size(10, 10);
        drawingAttributes.Color = Windows.UI.Colors.Black;
        drawingAttributes.IgnorePressure = false;
        drawingAttributes.FitToCurve = true;
        canvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
    }

You can scroll by holding control and moving the middle mouse button up or down. If you are on a touch screen, you can pinch/expand to zoom in/out!

Allen Rufolo
  • 1,173
  • 1
  • 11
  • 14
1

You probably needs to change the ZoomMode from "True" to "Enabled", and also add height to the canvas; some controls don't stretch their children by default.

This works for me:

     <ScrollViewer x:Name="scrollViewer" ZoomMode="Enabled" MinZoomFactor="1" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
        <Grid x:Name="outputGrid" Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" Height="Auto">
            <InkCanvas x:Name="inkCanvas"/>
        </Grid>
    </ScrollViewer>
Roger
  • 1,142
  • 10
  • 6