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的规模而不是Slider的ScrollViewer尺寸。

Answer 1

在图像上应用缩放转换而不是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" />

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

1 个答案: