Zoom an Image with the Pinch gesture in xamarin forms

-
Step 1 :

 add xaml code in your page :

<Image Source="test.jpg">
 <Image.GestureRecognizers> 
 <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
 </Image.GestureRecognizers>
</Image>


Step 2 :

add this code in your code file :


        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;
            }
        }


Comments

Post a Comment

Popular posts from this blog

Checkbox and RadioButon in xamarin forms

-
Image
Step 1: Install the following plugin : Xamarin.Forms.InputKit Step 2 : Add this line in page deceleration:    xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit" Step 3 : 1 . CheckBox you can use checkbox like that :              <input:CheckBox Text="Option 1" Type="Box" />             <input:CheckBox Text="Hello World I'm Option 2" Type="Check"/>             <input:CheckBox Text="Consetetur eum kasd eos dolore Option 3" Type="Cross"/>             <input:CheckBox Text="Sea sed justo" Type="Star"/> Result : ** checkbox have the following properties : CheckChanged: (Event) Invokes when check changed. CheckChangedCommand: (Command) Bindable Command, executed when check changed. Key: (int) A key you can set to define checkboxes as ID. Text: (string) Text...
Read more

ContentPresenter and ContentView in xamarin forms

-
Image
ContentPresenter : A layout manager for templated views. Used within a ControlTemplate to mark where the content to be presented appears. ContentView : An element with a single content. ContentView has very little use of its own. Its purpose is to serve as a base class for user-defined compound views. * XAML <ContentView> <Label Text="Hi, I'm a simple Label inside of a simple ContentView" HorizontalOptions="Center" VerticalOptions="Center"/> </ContentView> * Code var contentView = new ContentView { Content = new Label { Text = "Hi, I'm a simple Label inside of a simple ContentView", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } };
Read more

ScrollView in xamarin forms

-
Image
An element capable of scrolling if it's Content requires. ScrollView contains layouts and enables them to scroll offscreen. ScrollView is also used to allow views to automatically move to the visible portion of the screen when the keyboard is showing. Note: ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView. A ScrollView is easy to define. In XAML: <ContentPage.Content> <ScrollView> <StackLayout> <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" /> <Entry /> </StackLayout> </ScrollView> </ContentPage.Content> The same definition in code: var scroll = new ScrollView(); Content = scroll; var stack = new StackLayout(); stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
Read more