1

I am trying to implement an InkCanvas that has an image loaded onto it. I need to be able to zoom and scroll around that image and make markings to the image.

When I tried to bind the ScaleTransform of the image to a Slider, the image will zoom, but the ink won't. 

                <Image Name="ImageWork" HorizontalAlignment="Center">
                    <Image.LayoutTransform>
                        <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}" />
                    </Image.LayoutTransform>
                </Image>
            </InkCanvas>
        </ScrollViewer>

        <Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" ValueChanged="ZoomSlider_ValueChanged"/>

I tried to change the scale of the Ink itself, but it's not staying in the same place relatively, or zooming across the same anchor point:

private void ZoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        if (e.OldValue > 0d)
        {
            double factor = e.NewValue / e.OldValue;
            Matrix scaleMat = new Matrix();

            scaleMat.ScaleAt(factor, factor, InkCanvasOnImage.ActualWidth / 2, InkCanvasOnImage.ActualHeight / 2);
            InkCanvasOnImage.Strokes.Transform(scaleMat, false);
        }

    }

How do I get my image and ink strokes to play nicely together?

Sakamoto Kazuma
  • 2,573
  • 7
  • 34
  • 75

2 Answers2

0

you can try wrapping your Image and Inkcanvas inside Grid:

 <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height=“0.9*/>
          <RowDefinition Height=“0.1*/>
      </Grid.RowDefinitions>

    <ScrollViewer Grid.Row=“0”>
        <Grid>    
            <InkCanvas />       
            <Image />          
          <Grid.LayoutTransform>
               <ScaleTransform />
           </Grid.LayoutTransform>
        </Grid>
     <ScrollViewer>

     <Slider Grid.Row=“1”/>
  </Grid>

For zooming you can zoom Grid directly

tabby
  • 1,878
  • 1
  • 21
  • 39
  • Is it possible to do this without pushing controls outside of the ScrollViewer out of the scope of the open window? – Sakamoto Kazuma Nov 30 '17 at 00:17
  • can you please elaborate more? – tabby Nov 30 '17 at 04:56
  • https://vid.me/GeyKb I think what I'm struggling with is the fact that I want to change the scope of the image, and not the size of the image. Changing the size of the grid seems to push everything else around, where I'd like that slider to stay at the bottom of the window. – Sakamoto Kazuma Nov 30 '17 at 13:27
0

Since you want to achieve relative zooming on image as well as on other contents you can refer below code 

  <ScrollViewer DockPanel.Dock="Top">
      <InkCanvas Name="InkCanvasOnImage" Height="203">
        <Canvas Height="203" Width="203">
          <Canvas.LayoutTransform>
             <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" 
                 ScaleY="{Binding ElementName=ZoomSlider,Path=Value}">
              </ScaleTransform>
          </Canvas.LayoutTransform>
       <Canvas.Background>
          <ImageBrush ImageSource="YourImageSource" />
       </Canvas.Background>

      //your other contents goes here

       </Canvas>
     </InkCanvas>
    </ScrollViewer>
    <Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" />
Swapnil
  • 66
  • 7