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

2 mins read

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,

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,

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

To update StrokeWidth for selected shape as like below,

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

To update Color for selected text as like below,

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

To update FontFamily for selected text as like below,

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";
                }