2018 Volume 2: Image Editor in Xamarin.Forms | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

2018 Volume 2: Image Editor in Xamarin.Forms

We are excited to share the new features we are including in our upcoming 2018 Volume 2 release for the image editor control in Xamarin.Forms:

  • Custom View / Custom image Annotation
  • Font support for our text annotation
  • Customizing height for toolbar and toolbar item
  • Customizing stroke thickness using slider
  • Customizing opacity for the annotated items
  • New toolbar design


Custom view / Custom image annotation

There were lot of requests for a way to add another image as an annotation over the editing image and yes, we heard you! Now we support this functionality and furthermore we have gone one step ahead and provided support to add a custom view as an annotation so that you can add any UI element over an image as an annotation, say for e.g. you can add our Syncfusion Xamarin.Forms Chart over an image and save it. And obviously by the way you can add any image over an editing image too as a custom view. Following is a code snippet showing how we can add or remove a custom annotation.

   Image imageView = new Image();

   imageView.Source = ImageSource.FromResource("NamsSpace.ImageName.png");

   imageView.HeightRequest = 300;

   imageView.WidthRequest = 300;


Adding custom view over an image

Font support for text annotation

Image editor already supports text annotation, but now it supports text annotation with customizable fonts. This feature helps in creating more and more realistic and beautiful image banners with customizable fonts.  The following code snippet shows how you can add your required font to text annotation.

 TextSettings textSettings = new TextSettings();

 textSettings.FontFamily = "Herculanum";

 imageEditor.AddText("Your Text",textSettings);

Font support for text annotation

Customizing height for toolbar and toolbar item

Everyone loved our support to add and remove any toolbar item from our toolbar in our previous release, now in our upcoming release this feature as an upgrade to customize the height of toolbar and toolbar item. Each toolbar item has an icon and a text, now the height and font size can be customized as like in the code snippet below.

 imageEditor.ToolBarSettings.HeaderToolbarHeight = 40; 

 imageEditor.ToolBarSettings.FooterToolbarHeight = 40;

 imageEditor.ToolBarSettings.SubItemToolbarHeight = 40;


 imageEditor.ToolBarSettings.ToolbarItems[0].TextHeight = 20; // Individual Item Text Height

 imageEditor.ToolBarSettings.ToolbarItems[0].IconHeight = 20; // Individual Item Icon Height

Customizing toolbar height

Customizing stroke thickness using slider

Our built-in toolbar has an option to change the stroke thickness for our pen tool using combo box, now we have provided support to change the stroke thickness using slider, which gives more UI flexibility to customize the stroke thickness. We have also extended this support for our shapes as well.

Customizing opacity for the annotated items

Image editor now supports customizing the opacity for the annotated items like shapes, text, drawing path and custom view.

Customizing the opacity for annotations

New toolbar design

We have also carefully revamped our Toolbar UI so that it gives more freedom to customize the toolbar as you desire with more UI flexibility.

New flexible toolbar design

We have demonstrated these new features to show you how handy our image editor control is in developing your customized, feature-rich applications. Syncfusion invites you to try out these features in the upcoming 2018 Volume 2 release, which is expected to roll out at the end of May 2018. You can also download the demo sample with pre-release assemblies from this link. Please feel free to provide your valuable feedback in the comments section below.

Note: The demo application contains pre-released assemblies



Share this post:

Comments (2)

Flip control for the imageeditor is not working from code behind. can you give me some solutions about that.
Requitements are
1. set image in source
2. flip image
3. show image as a flip in another image control


We can flip the image in code behind using the following code example.


Refer the following UG for more info.

We have prepared the sample based on your requirement, to get image stream from current image editor control and load it in another image editor control. Please find the sample in the follwing link.



Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed