Text in UWP Image Editor (SfImageEditor)

To add the desired text elements over the image, use the following two ways:

  • From Toolbar
  • Using Code

From Toolbar

To add text from the toolbar, click on the Text icon in the toolbar. When the Text icon is tapped, a pop-up will appear. To add the text over the image, Type the desired text and click OK. To close the pop-up, click CANCEL button. By dragging, the text can be moved to the desired place.

To Change Color of the selected Text

Select the desired text and click on the color palette available in the sub menu.

Change TextEffect of selected Text

Changes the effects of the text such as Bold, Italic and Underline.

Using Code

programmatically, the desired text elements also can be added over the image. The AddText method in the SfImageEditor control is used to add text based on the string value and TextSettings.

TextSettings

TextSettings is defined to set the values for Color and FontSize.

  • c#
  • imageEditor.AddText("CustomTextView", new TextSettings() { Color = new SolidColorBrush(Colors.Orange), TextEffects = TextEffects.Bold | TextEffects.Italic | TextEffects.Underline });

    Output image of the text on an image

    Multiline text and text alignment

    Multiline text

    You can annotate multiple line text over an image with the help of text preview window.

    Text alignment

    TextAlignment is an enum type and text can be aligned with the help of text alignment enum values such as left, right and center.

    NOTE

    The default text alignment is Left and text alignment is not applicable for single line text.

  • c#
  • editor.AddText("Hello\nGood morning\nHave a nice day", new TextSettings() {TextAlignment = TextAlignment.Right });

    Output image of the multiline text

    Text Rotation

    You can rotate and resize the text by enabling the RotatableElements property of image editor. ImageEditorElements is an enum type with values Text, CustomView and None as shown in the following code snippet.

    editor.RotatableElements = ImageEditorElements.Text;

    NOTE

    The default value for RotatableElements is None.

    You can rotate the text based on a particular angle using Angle property in TextSettings as shown in the following code snippet.

    editor.AddText("Good morning", new TextSettings(){Angle = 45});

    Output image of the text rotation

    See also

    How to add text after image has been loaded in uwp

    How to disable resizing the shapes text and custom