The .NET MAUI Image Editor (SfImageEditor) Image Zooming

14 Nov 20232 minutes to read

The image editor control in the .NET MAUI provides support for zooming and panning actions on an image.

Allow image zooming

To enable or disable the zooming functionality, set the value of the AllowZoom property to true or false. By default, the AllowZoom value is set to true.

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="image.jpeg" AllowZoom="False"/>

   </ContentPage>
SfImageEditor imageEditor = new SfImageEditor();
     imageEditor.Source = "image.jpeg";
     imageEditor.AllowZoom = false;
     this.content = imageEditor;

Change the image zoom level

Programmatically, you can zoom the loaded image without any interaction by setting a value to the ZoomLevel property.

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="image.jpeg" ZoomLevel="2"/>

   </ContentPage>
SfImageEditor imageEditor = new SfImageEditor();
     imageEditor.Source = "image.jpeg";
     imageEditor.ZoomLevel = 2;
     this.content = imageEditor;

Zooming in .NET Maui ImageEditor

Change the maximum zoom level

To define the maximum zoom level for the image, make use of the MaximumZoomLevel property.

<ContentPage 
            . . .
            <imageEditor:SfImageEditor Source="image.jpeg" MaximumZoomLevel="5"/>

   </ContentPage>
SfImageEditor imageEditor = new SfImageEditor();
     imageEditor.Source = "image.jpeg";
     imageEditor.MaximumZoomLevel = 5;
     this.content = imageEditor;