Category / Section
How to create zoomable image in Xamarin Forms using SfImageEditor?
1 min read
In SfImageEditor you can zoom and pan over an image.
Step 1: Create SfImageEditor sample with all necessary assemblies.
Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.
https://help.syncfusion.com/xamarin/image-editor/getting-started
Step 2: Using PanningMode enum property available in SfImageEditor you can pan over an image by single finger or two fingers.
Code Snippet:
C#
public MainPage()
{
InitializeComponent();
editor.Source = ImageSource.FromResource("ImageEditor_GettingStarted.image.jpg");
editor.ToolbarSettings.IsVisible = false;
editor.PanningMode = PanningMode.SingleFinger;
}
XAML
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ImageEditor_GettingStarted" x:Class="ImageEditor_GettingStarted.MainPage" xmlns:imageeditor="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms"> <Grid> <imageeditor:SfImageEditor x:Name="editor" PanningMode="SingleFinger"> <imageeditor:SfImageEditor.ToolbarSettings> <imageeditor:ToolbarSettings IsVisible="False"/> </imageeditor:SfImageEditor.ToolbarSettings> </imageeditor:SfImageEditor> </Grid> </ContentPage>
Sample link:
