Category / Section
How to load the image annotated with shapes and text in WPF Image Editor?
1 min read
This section explains how to annotate the image with shapes (Circle, Rectangle, Arrow, Path) and text programmatically on loading itself.
To add shape / text on loading the image, you need to invoke the ImageLoaded event as shown in the below snippet.
XAML
<editor:SfImageEditor x:Name="editor" ImageLoaded="SfImageEditor_Loaded" ImageSource="Assets\RoadView.jpeg"> </editor:SfImageEditor>
Add the required shapes or text along with its customization such as color, stroke and its position either using PenSettings or TextSettings in the loaded event a shown in the below code.
C#
/// <summary> /// Invoked when the image in the <see cref="SfImageEditor"/> is loaded. /// </summary> /// <param name="sender">Image editor</param> /// <param name="e">event arguments</param> private void SfImageEditor_Loaded(object sender, ImageLoadedEventArgs e) { editor.AddShape(ShapeType.Circle, new PenSettings() { Bounds = new Rect(10, 15, 20, 20), Stroke = new SolidColorBrush(Colors.BlueViolet) }); editor.AddText("Good Morning", new TextSettings() { FontFamily = new FontFamily("Consolas"), TextEffects = TextEffects.Italic, Bounds = new Rect(45, 30, 25, 25), }); }
Screenshot:
Sample for loading shape and text on the image can be referred here.