CODEWITHSUNDEEP
uwpzoomingscrollviewerinkcanvas
Agredo
Agredo

Reputation: 131

The simples way to zoom a InkCanvas in UWP?

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

Upvotes: 0

Views: 1516

Answers (2)

Roger
Roger

Reputation: 1550

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>

Upvotes: 1

Allen Rufolo
Allen Rufolo

Reputation: 1202

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!

Upvotes: 2

Related Questions