Масштабирование WPF с помощью ползунка Изменение размера ScrollViewer

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

Применить масштабное преобразование к изображению вместо 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" />