-1

I currently have the following code:

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

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

When I adjust the slider, the entire ScrollViewer is changing sizes, and moving the slider up and down in the application. What I intended was just the image that is inside the InkCanvas to zoom in and out. Am I using the right WPF control for this, or did I mess up somewhere? My understanding is that I'm altering the scale of the InkCanvas and not the ScrollViewer Dimensions with the Slider.

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

1 Answers1

1

Apply Scale Transformation On Image Instead Of InkCanvas

<ScrollViewer DockPanel.Dock="Top">
            <InkCanvas Name="InkCanvasOnImage" Height="203">

                <Image Source="AddImageSourceHere">
                    <Image.LayoutTransform>
                        <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}"></ScaleTransform>
                    </Image.LayoutTransform>
                </Image>

            </InkCanvas>
        </ScrollViewer>

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