使用滑块更改 ScrollViewer 大小的 WPF 缩放

Question

我目前有以下代码：

<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" />

当我调整滑块时，整个 ScrollViewer 都在改变大小，并在应用程序中上下移动滑块。我的意图只是将 InkCanvas 中的图像放大和缩小。我是否为此使用了正确的 WPF 控件，还是我在某处搞砸了？我的理解是我正在改变 InkCanvas 的比例而不是 ScrollViewer 尺寸与滑块。

Answer 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" />

使用滑块更改 ScrollViewer 大小的 WPF 缩放

WPF Zooming with Slider Changing ScrollViewer Size

c#

wpf

wpf-controls

zooming

inkcanvas