Introducing Image Editor in WPF | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (163)Angular  (100)ASP.NET  (51)ASP.NET Core  (81)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (195)BoldSign  (11)DocIO  (24)Essential JS 2  (103)Essential Studio  (195)File Formats  (58)Flutter  (127)JavaScript  (215)Microsoft  (118)PDF  (79)Python  (1)React  (94)Streamlit  (1)Succinctly series  (130)Syncfusion  (806)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (48)Windows Forms  (59)WinUI  (65)WPF  (151)Xamarin  (160)XlsIO  (32)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (142)Chart  (105)Cloud  (14)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (61)Development  (572)Doc  (7)DockingManager  (1)eBook  (98)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (33)Extensions  (22)File Manager  (6)Gantt  (17)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (446)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (36)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (11)Scheduler  (50)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (29)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (318)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (28)Visual Studio Code  (17)Web  (529)What's new  (287)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Image editor in WPF.

Introducing Image Editor in WPF

Allowing users to edit images directly inside an application is a common requirement in the WPF platform. We are happy to announce that you can now achieve this by using the WPF Image Editor control, introduced in our 2019 Volume 3 release.

Image Editor is a powerful image editing component that allows easy modification of images by performing actions like cropping, rotating, flipping, and inserting text and shapes.

Adding an image in WPF Image Editor to perform editing operations.
Adding an image in WPF Image Editor to perform editing operations.

Let’s now briefly see the features of the WPF Image Editor, and then I’ll walk you through the steps to add this to your application.

Key features of WPF Image Editor

The key features of the WPF Image Editor:

Text annotation

Edit an image by adding text to show useful information over the image. You can also make the text bold or italic, change the font family, align, and underline.

Annotating text with an image in WPF Image Editor.
Annotating text with an image in WPF Image Editor.

Shape annotation

Annotate shapes such as rectangles, circles, and arrows over an image. This function also allows z-ordering of shapes. Adding shapes to an image is commonly used to mask an undesirable area or to draw attention to a specific region in the image. Rectangles and circles can be customized either by filling the shape or by drawing it as an outline.

Annotating shapes with an image in WPF Image Editor.
Annotating shapes with an image in WPF Image Editor.

Image transformation

You can easily transform your original images by rotating them to any angle and flipping them horizontally or vertically.

Rotating an image to desired angle in WPF Image Editor.
Rotating an image to desired angle in WPF Image Editor.


Flipping an image horizontally in WPF Image Editor.
Flipping an image horizontally in WPF Image Editor.


Crop a particular region of an image. There are many useful predefined aspect ratios available. You can resize the cropping rectangle to these aspect ratios.

Cropping a particular region of an image in WPF Image Editor.
Cropping a particular region of an image in WPF Image Editor.

Undo and redo

The Image Editor control supports n number of undo and redo operations for all editing actions performed on an image. Use this to undo any unwanted editing action or redo previously undone actions.

Import, export, and reset

You can load an image and save it in any format, such as .png, .jpg, and .bmp, to a desired device location. The control also allows you to customize the physical dimensions of an image while saving it.

Reset an image to its original form by discarding any editing changes done to an image.

Zooming and panning

You can zoom and pan an image smoothly to view the desired region. All features, such as text and shapes annotations, are compatible with zooming and panning.

Zooming and panning an image in WPF Image Editor.
Zooming and panning an image in WPF Image Editor.

Getting started with WPF Image Editor

Step 1: Create a WPF application and install the Syncfusion.SfImageEditor.WPF NuGet package.

Step 2: Import the Image Editor namespace in MainWindow.xaml as demonstrated in the following code.


Step 3: Initialize the Image Editor as demonstrated in the following code.


Step 4: Set the image reference path in the ImageSource property and load the image into the Image Editor control.

<imageeditor:SfImageEditor ImageSource="clouds.jpg">

Now, you can perform image editing actions using predefined toolbar items as well as using code.

You can check out the sample project on GitHub.


We hope you now have a clear idea of these features and how to get started with the Image Editor control for WPF. Refer to this UG documentation for more customization options. You can download our 2019 Volume 3 release setup to check out these controls.

If you have any questions about this control, please let us know in the comments section below. You can also contact us through our support forumDirect-Trac, or Feedback Portal. We are happy to assist you!


Share this post:

Comments (5)

When will this be available for .NET Core 3.0? When I try to install I get:

Severity Code Description Project File Line Suppression State
Warning NU1701 Package ‘Syncfusion.SfImageEditor.WPF’ was restored using ‘.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8’ instead of the project target framework ‘.NETCoreApp,Version=v3.0’. This package may not be fully compatible with your project. TestViews L:\SirBobcat\Source\Solutions\Database\EF Core\zenStoresDatabases\TestViews\TestViews.csproj 1


.NET Core 3.0 support for the image editor will be included in our upcoming Volume 4 release, which is scheduled to be rolled out by mid-December.

Can the default brush color be set??

Can the default brush color be set in SfImageEditor


You can modify the default pen stroke color by using the Stroke property of PenSettings.

Please refer to the below UG link for customizing the pen settings in the Image editor.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top