How to offset the starting point of an image in a WPF image control (panning an image)

Question

I'm trying to change the starting point of an image within a WPF image control, I can't seem to find a straight answer.

I'm trying to allow the user to pan and view a image which is larger than the image control.

Here is a link to a screenshot of my app, and what i need it to do.

Just as an example, I want the starting point of to be (image.Height/2, image.Width/2) instead of (0,0). I need the starting point to be dynamically changeable via the C# code.

Answer 1

Try placing your image control inside a scroll viewer.

<ScrollViewer 
    x:Name="MyScrollViewer"
    VerticalScrollBarVisibility="Hidden" 
    HorizontalScrollBarVisibility="Hidden">
    <Image .../>
</ScrollViewer>

Then you can use the ScrollToVerticalOffset and ScrollToHorizontalOffset methods in code.

Answer 2

I know this comes way too late, but I've found myself on a similar problem and ScrollViewer wouldn't work for me because I need to manage mouse interaction events on the image.

Instead, my solution consists on placing the Image inside a Canvas, then setting (in my case with a data binding) both Canvas.Left and Canvas.Top attached properties on said Image:

<Canvas>
    <Image Canvas.Left="{Binding MyOffset.X}" Canvas.Top="{Binding MyOffset.Y}" />
</Canvas>