Zooming in Xamarin Image Editor (SfImageEditor)
29 Sep 20232 minutes to read
The image editor control provides support to zoom and pan actions over an image.
The following properties are used for zooming feature of the image editor control:
- EnableZooming
- Maximum ZoomLevel
- PanningMode
Enable zooming
You can enable or disable the zooming functionality by setting the EnableZooming
value to true or false. By default, the EnableZooming
value is set to true.
<imageeditor:SfImageEditor EnableZooming="false"/>
editor.EnableZooming = false;
Zoom level
Programmatically, you can zoom the loaded image without any interaction by setting a value to ZoomLevel
property. At the same time, you can get the information about whether the image is zoomed or not by accessing the IsImageZoomed
property in image editor.
<editor:SfImageEditor x:Name="editor" Source="{Binding Image}" ImageLoaded="SfImageEditor_ImageLoaded"/>
SfImageEditor editor = new SfImageEditor();
editor.Source = ImageSource.FromResource("XFormsUG.RoadView.jpeg");
editor.ImageLoaded += SfImageEditor_ImageLoaded;
this.Content = editor;
private void SfImageEditor_ImageLoaded(object sender, ImageLoadedEventArgs args)
{
editor.ZoomLevel = 3;
}
Maximum zoom level
You can set the maximum zoom level to image using the MaximumZoomLevel
property.
<imageeditor:SfImageEditor EnableZooming="true" MaximumZoomLevel="8"/>
editor.EnableZooming = true;
editor.MaximumZoomLevel = 8;
Panning mode
The image editor control provides support for panning and allows to pan the image with two fingers or single finger by setting the PanningMode
.
The following properties are used for panning:
-
SingleFinger
: Zooms or pans the image with single finger, but shapes and text selection cannot be performed with this mode. -
TwoFinger
: Zooms or pans the image with two finger. The shapes and text selection can be performed with this mode.
By default, the PanningMode
value is set to TwoFinger
.
<imageeditor:SfImageEditor EnableZooming="true" PanningMode="TwoFinger"/>
editor.PanningMode = PanningMode.TwoFinger;
See also
How to create zoom able image in Xamarin.Forms using SfImageEditor