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.