Pinch Gesture In Xamarin.Forms Application For Android And UWP

Gesture recognizers can be used to detect user interaction with many elements of a Xamarin.Forms application. The Pinch Gesture is used for performing interactive zoom and is implemented with the PinchGestureRecognizer class.

Reading this article, you will learn how to add Pinch Gesture in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development, using Visual Studio 2017 RC.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online).
3. Using Visual Studio 2017 Installer, enable the feature of Mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC. Go to Start -> New Project-> select Cross-Platform (under Visual C#) ->Cross Platform App -> Give a suitable name for your app (XamFormPinch) ->OK.

Step 2

Select the Cross Platform template as Blank APP, Set UI Technology as Forms, and Sharing as PCL; and afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.

 

Step 3

Add an Xaml page for demo. Right click XamFormPinch(Portable) project, select ADD -> NewItem, select CrossPlatform-> FormXamlPage-> Give the relevant name (PinchGesTest.Xaml).

Add an image to XamFormPinch_Droid project Resourses-> Drawable folder and XamFormPinch_UWP project.

In PinchGesTest.Xaml, add Label and Image Control with Pinch Gesture code.

<StackLayout>
    <Label Text="Xamarin Forms- Pinch Gesture in Android and UWP" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Large" TranslationX="0" TranslationY="50" />
    <Image Source="nature.jpg" HeightRequest="200" WidthRequest="200" VerticalOptions="Center" HorizontalOptions="Center" TranslationX="0" TranslationY="100">
        <Image.GestureRecognizers>
            <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" /> </Image.GestureRecognizers>
    </Image>
</StackLayout>

 

 

Add the following code to PinchGesTest.Xaml.cs for OnPinchUpdated method.

private double startScale;
private double currentScale;
private double xOffset;
private double yOffset;
void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e) {
    if (e.Status == GestureStatus.Started) {
        startScale = Content.Scale;
        Content.AnchorX = 0;
        Content.AnchorY = 0;
    }
    if (e.Status == GestureStatus.Running) {
        currentScale += (e.Scale - 1) * startScale;
        currentScale = Math.Max(1, currentScale);
        double renderedX = Content.X + xOffset;
        double deltaX = renderedX / Width;
        double deltaWidth = Width / (Content.Width * startScale);
        double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;
        double renderedY = Content.Y + yOffset;
        double deltaY = renderedY / Height;
        double deltaHeight = Height / (Content.Height * startScale);
        double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;
        double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
        double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);
        Content.TranslationX = Math.Min(0, Math.Max(targetX, -Content.Width * (currentScale - 1)));
        Content.TranslationY = Math.Min(0, Math.Max(targetY, -Content.Height * (currentScale - 1)));
        Content.Scale = currentScale;
    }
    if (e.Status == GestureStatus.Completed) {
        xOffset = Content.TranslationX;
        yOffset = Content.TranslationY;
    }
}

 

Step 4

Open (double click) the file App.cs in the Solution Explorer-> XamFormPinch (portable) and set the Root Page.

Step 5

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck the "Build" and "Deploy" options for iOS and check the same for Droid and UWP.

 

 

Step 6

Deploy your app in Android Emulator and Local Machine (UWP). The output of the XamFormPinch app is following.

After "Zoom In" (Pinch).

Summary

Now, you have successfully tested Pinch Gesture in Xamarin.Forms application for cross-platform application development, using Visual C# and Xamarin in Visual Studio 2017 RC.