Xamarin.Forms Show all of the zoomed Image content with the PanGestureRecognizer


Example

When you have a zoomed Image (or other content) you may want to drag around the Image to show all of its content in the zoomed in state.

This can be achieved by implementing the PanGestureRecognizer. From code this looks like so:

var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += (s, e) => {
  // Handle the pan
};

image.GestureRecognizers.Add(panGesture);

This can also be done from XAML:

<Image Source="MonoMonkey.jpg">
  <Image.GestureRecognizers>
    <PanGestureRecognizer PanUpdated="OnPanUpdated" />
  </Image.GestureRecognizers>
</Image>

In the code-behind event you can now handle the panning accordingly. Use this method signature to handle it:

void OnPanUpdated (object sender, PanUpdatedEventArgs e)
{
  // Handle the pan
}