Articles in this section
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:

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_GettingStarted-1093406488.zip

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied