Home/ Questions/Q 677361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:01:51+00:00

I have a Canvas element, contained within a ScrollViewer, which I’m zooming using ScaleTransform.

  • 0

I have a Canvas element, contained within a ScrollViewer, which I’m zooming using ScaleTransform. However, I want to be able to keep the scroll position of the viewer focused on the same part of the canvas after the zoom operation has finished. Currently when I zoom the canvas the scroll position of the viewer stays where it was and the place the user was viewing is lost.

I’m still learning WPF, and I’ve been going backwards and forwards a bit on this, but I can’t figure out a nice XAML based way to accomplish what I want.

Here is the kind of code I’m using…

<Grid>
    <ScrollViewer Name="TrackScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Canvas Width="2560" Height="2560" Name="TrackCanvas">
            <Canvas.LayoutTransform>
                <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider, Path=Value}" 
                                ScaleY="{Binding ElementName=ZoomSlider, Path=Value}"/>
            </Canvas.LayoutTransform>

            <!-- Some complex geometry describing a motor racing circuit -->

        </Canvas>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal" Margin="8" VerticalAlignment="Top" HorizontalAlignment="Left">
        <Slider Name="ZoomSlider" Width="80" Minimum="0.1" Maximum="10" Value="1"/>
        <TextBlock Margin="4,0,0,0" VerticalAlignment="Center" Text="{Binding ElementName=ZoomSlider, Path=Value, StringFormat=F1}"/>
    </StackPanel>
</Grid>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not a purely XAML way of doing it, but there is a very nice piece of work on Joeyw’s blog titled Pan and Zoom (DeepZoom style) in WPF with links to the source. He has taken some inspiration from DeepZoom and it gives you smooth/animated panning and zooming of content. And if you’re using WPF 4 you could probably modify it a little to add some easing functions to the animations to give it an even nicer feel.

    • 0