A Guide to Adding Image Editor to Xamarin.Forms Applications


Hello Everyone, welcome to this video tutorial
on how to get started with the Syncfusion
Image Editor for Xamarin.Forms.
This tutorial will help you understand how
easy it is to add an image to the image editor
and edit that image with our pre-defined tool
bar items.
In this tutorial I’ll be using Visual Studio
2017 with Xamarin already installed in it.
I will show how to create a demo application
in Xamarin.Forms Android, iOS, and UWP.
To get started let’s first open Visual Studio……
……and then I’ll create a new project…..
Choose cross-platform, and then Mobile application
for Xamarin.Forms.
I’ll name this application “Getting Started”
and then click ok
Now I’ll be prompted to choose our platforms
and code sharing strategy.
For this project I’ll leave all of the platforms
selected and use the .NET Standard code sharing
strategy.
I’ll also be creating a blank app, which
is already chosen as the default.
Next, I’ll click ok and wait for Visual
Studio to setup our project.
While that’s happening, let’s go through
the features of the built-in toolbar in the
Syncfusion Image Editor.
The tool is pre-loaded with pretty much all
the features of the image editor.
You can draw over images using the pen tool.
You can annotate images with shapes including
rectangles, circles, and arrows.
You can also add text, crop, rotate, and even
flip images.
Ok, now that the project is ready the first
thing we have to do is add the required assemblies
for the image editor from the NuGet package
manager.
As you can see, we have 4 different projects
in this solution, one for Android, iOS, UWP,
and one for code sharing.
Now I’ll right click on the solution, and
choose “Manage NuGet packages for Solution”
On the Browse tab, search for Synfusion.Xamarin.SfImageEditor
Now select the SfImageEditor package for Xamarin.Forms,
and then choose the projects it needs to be
installed on.
In this case, all the projects.
Then click install.
Make sure to read and accept all of the license agreements.
And then continue installing.
So now the projects are ready.
I’ll start with Android as our start up
project.
Let’s begin by just running the Android
project to see what we’re starting with.
Here we have the default application running
and showing “Welcome to Xamarin.Forms!”
Alright so now we’re ready to add the Syncfusion
Image Editor to the project.
I’ll start by opening up the mainpage.xaml
file from the GettingStarted shared project.
To add the image editor to the page we need
to add the class reference to the xaml file.
(00:05:12)
At the top add “xmlns:Syncfusion”, and
then choose the namespace “Syncfusion Image
editor”.
Now I’ll add a tag for the Syncfusion Image
editor to the page, and I’ll do this by
referencing that namespace we just created.
And that’s it, now we need to add an image
to the editor so we can edit it.
To do this, I’m going to add an image to
shared project by right-clicking on it and
adding an existing item.
Now that the image has been added, I need
to set it as an embedded resource.
To do this, right-click on the image, and
then select properties, and then change the
build action to embedded resource and click
ok.
Now we can set the image as a source to the
image editor.
First, I’ll add a name to the image editor
in the xaml.
I’ll just call it image editor. IMG Editor
Now we can open the code behind for the mainpage.xaml
file.
Here, we can reference the image editor we
just named and set it’s source property.
So I’ll type in “ImgEditor.Source=ImageSource.FromResource(“”)”,
our project name dot our image file name.
Now let’s build and deploy this project
again.
And see it in our Android emulator.
And now you can see that the image editor
is loaded with the image that you chose.
You can edit the image with all the provided
tools.
So everything works as expected with our custom selected image.
Now lets deploy the same project on iOS.
To do this, I’ll set our iOS project as
the startup project.
Just as we did before.
Since I’m using a Windows machine, I previously
configured my Visual Studio to connect to
a Mac on my network.
This is required to deploy to iOS.
Additionally, Xamarin does not load the renderer
assemblies by default in the Xamarin.Forms.iOS
project.
In order to solve this you must manually create
an instance of the SfImageEditorRenderer in
the FinishedLaunching Overloaded method of
the AppDelegate Class.
In the iOS project.
So I’ll expand the iOS project and open
the AppDelegate class file, and inside the
FinishedLaunching method I’m going to create
an instance of the editor renderer.
The exact instructions and coding you need to insert here can also be found in our documentations.
So you can also just copy and paste that from our documentation on the Image Editor
So I’m typing in “Syncfusion.ImageEditor.XForms.iOS.SfImageEditorRenderer.Init()”.
Now, I’ll choose the iPhone Simulator and
click run.
I’m using the iPhone X simulator and you
can see that part of the control is obscured
by the notch.
We can fix this by using the UseSafeArea property.
In the mainpage.xaml file we need to add a
new namespace to be able to use some Xamarin
specific iOS code.
So I’ll type in “xmlns:ios=” and then
ios again choose the iOSSpecific namespace.
Now we can use that new ios namespace we referenced
to access the UseSafeArea property and set
it to true.
So now we can run the iOS Simulator again
to see the changes.
And this time we can see that the app is correctly
rendered on the iPhone X and all of our image
editing tools are available.
So everything works as it did before on iOS.
Next, lets run the UWP project to make sure
that our Xamarin app is fully cross platform
capable.
So I’ll set the UWP project to be my startup
project and then I’ll deploy it to the local
machine.
And then I’ll deploy it to the local machine in order to see it.
Now you can see that we have the same experience
and layout in our UWP project
as we did in Android and iOS. So same feature set and everything works as it should in a Xamarin.Forms Application.
So we have three different projects from one, single bit of shared code. And that was it.
To recap, in this video we showed you how
to start a new Xamarin.Forms project, add
the Syncfusion Image editor to it and then
also add an image to be edited.
We also tested the features of the image editor
in Android, iOS, and UWP.
We hope you found this video helpful and please
feel free to check it out our other great
content.

Leave a Reply

Your email address will not be published. Required fields are marked *