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

【问题标题】：WPF Zooming with Slider Changing ScrollViewer Size使用滑块更改 ScrollViewer 大小的 WPF 缩放
【发布时间】：2017-11-18 05:27:40
【问题描述】：

我目前有以下代码：

<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 控件，还是我在某个地方搞砸了？我的理解是，我正在使用 Slider 更改 InkCanvas 的比例，而不是 ScrollViewer 尺寸。

【问题讨论】：

标签： c# wpf wpf-controls zooming inkcanvas

【解决方案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" />

【讨论】：

所以这会使图像放大和缩小，但是如果我在图像上绘制，这些图像不会相对于图像进行缩放。