)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to update the color, stroke thickness for selected shape Programmatically?

Platform: Xamarin.Forms |
Control: SfImageEditor |
Published Date: June 25, 2018 |
Last Revised Date: June 25, 2019

SfImageEditor allows you to update the Color, StrokeThickness for selected shape programmatically.

 

Step 1: Create image editor 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/sfimageeditor/getting-started

 

Step 2: On selecting a shape, ItemSelected event will be triggered. From this, you can get settings of selected shape as like below,

C#

ImageEditor.ItemSelected += ImageEditor_ItemSelected;

 

private void ImageEditor_ItemSelected(object sender, ItemSelectedEventArgs args)
        {
            obj = args.Settings;
            if (obj != null && obj is PenSettings)
            {
                pensetting = (obj as PenSettings);
            }
            else if (obj != null && obj is TextSettings)
            {
                textsetting = (obj as TextSettings);
            }
        }

 

Step 3: Please refer the following code snippet to change the Color, StrokeWidth for selected shape and FontFamily for selected text.

 

 To update Color for selected shape as like below,

C#

pensetting.Color = Color.Green; //To change selected shape Color as green.

 

To update StrokeWidth for selected shape as like below,

C#

pensetting.StrokeWidth = 20;   //To change selected shape StrokeWidth value as 20.

 

To update Color for selected text as like below,

C#

textsetting.Color = Color.Blue;  //To change selected text Color as blue.

 

To update FontFamily for selected text as like below,

C#

if ((Device.OS == TargetPlatform.Android) || (Device.OS == TargetPlatform.iOS))
                {
                //To change selected text font family as Noteworthy in android and iOS
                    textsetting.FontFamily = "Noteworthy";
                }
                else
                {
                  //To change selected text font family as Noteworthy in UWP
                    textsetting.FontFamily= "Assets/Noteworthy.ttf#Noteworthy";
                }

 

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_Sample-708923305.zip

 

Screenshots:

The updated Color and StrokeWidth for selected shape screenshots are shown below, 

Adding Shape Using Xamarin SfImageEditor

Shape customization using xamarin SfImageEditor

Customized shape using xamarin SfImageEditor

                   

The updated Color and FontFamily for selected text screenshots are shown below,  

Adding text using xamarin SfImageEditor

Text customization using xamarin SfImageEditor

Customized text using xamarin SfImageEditor

 

 

            

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon