WinForms - Picture Edit - Image Editor Dialog (v19.1)

WinForms Team Blog
19 June 2019

Using the WinForms PictureEdit control, you can display images on your forms. Not long ago we implemented DirectX rendering support for the control, so that large high-DPI images are handled easily. For v19.1 we added another new feature: an embedded Image Editor dialog.

To bring up this dialog users can right-click an image and select Edit. The operations supported by the Editor are simple but useful: crop, rotate, flip, and changes to brightness, contrast and saturation values.

Note that the option ShowEditMenuItem disables access to the editor when it’s set to False.

Image Editor

When the user clicks the Save button in the Image Editor, the event ImageEditorDialogClosed is raised, so you can implement custom change handling as required.

Custom Actions

We anticipate that you may have custom requirements for image editing operations, so we made the Image Editor extensible. You can add additional commands to the editor in a handler for the event ImageEditorDialogShowing, which appear as buttons in the UI. Commands are classes that implement a simple interface and execute your own editing functionality, possibly using your own UI elements.

1
2
3
4
5
6
7
8
9
public class WatermarkCommand : IGraphicCommand {
public SvgImage Image { get; set; }
public string ToolTip {
get { return "Add Watermark"; }
}
public void Execute(ImageEditorControl editorControl) {
editorControl.SetActiveTool(new WatermarkToolControl());
}
}

Watermark

The watermark feature shown in the image is fully implemented in this GitHub example, which is a great starting point for your own custom Image Editor actions. It demonstrates a custom button that invokes a dialog where users can add text-based watermarks to an image.

What Do You Think?

Please let us know any thoughts you have about this new feature. We are particularly interested to hear your ideas for additional editor actions – we would like to implement more common actions and reduce the need for custom additions. Please leave your comments below and let us know.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
14 comment(s)
Debeściak
Debeściak

is possible o integrate it into xaf ? How?

19 June 2019
Christopher Jay
Christopher Jay

Awesome.  I had built something similar but it is nice to have this integrated and has more options than mine.  Thanks!

19 June 2019
Oleg Mironov (dbc)
Oleg Mironov (dbc)

I love it. For many years I have my own little editor in app for the same purpose. I would be happy to replace it by this "out of the box" solution and know that I can expand functionality if needed in a simple way.

Thank you.

19 June 2019
ZacW
ZacW

would it be possible to allow us to place the control on a page with a specific brush tool ?

I would like to place this on a web page where the image has been pulled from SQL then a user can blur parts of image that contain a person (this is for GDPR purposes) then re-save it back to a database

19 June 2019
Christopher Jay
Christopher Jay

Any way to add this to the RepositoryItemImageEdit?

19 June 2019
Mark Bissett 1
Mark Bissett 1

If you could add the ability to select a pen and draw on op of the image and allow the user to draw arrows on top of it, it would be perfect, but great work so far and much appreciated.

20 June 2019
Dmitry (DevExpress)
Dmitry (DevExpress)

@ZacW

We haven't tested it, but most likely yes. The only thing worth noting is that most likely you'll have to make a filter applied to a selection, rather than a brush-based tool. In other words, instead of "painting" the blur effect on top of an image with a free-hand brush, it would be easier to select a part of an image (same as you do with the embedded "Crop" command), and apply an effect to this selected area. Not only this approach seems easier to implement, but it's also more flexible - you can select a part of an image and choose an effect to apply: Blur, Sharpen, etc.

We're going to research this request, stay tuned for updates :)

@Christopher Jay

We don't have any immediate plans to do this because we'd like to study the feedback first to understand if there's any demand for it, and if yes, what's the exact user scenario.

20 June 2019
Jean-Francois
Jean-Francois

Our users seem to like this new feature very much.  Our developer who implemented it in our application very much as well as she just had to enable it to make it work :-)

I'd like to second the two ideas submitted above:

- possibility to blur parts of the image

- possibility to add (very) simple drawing

21 June 2019
Brian Gilbert
Brian Gilbert

Adding support for very simple drawing would be helpful and a feature that has been requested by our users many times.  We have tools for medical providers to analyze medical images and giving them the ability to just draw or annotate something on an image, like what can be done with the pencil in Microsoft Paint, would be very useful. 


17 December 2019
Customer124038
Customer124038

Hello Devexpress group,


Is a similar feature available in WPF ?

7 January 2020
kurt minds
kurt minds

It's really awesome! It's really great help. I suggest, we can add custom aspect ratio, allowing to change the w and h automatically like a square but it's user defined.. Angle is really awesome because you can change the angle during cropping. I hope zoom in/out we be added to this feature during cropping and save it to desired scaled images.

Very Good DevExpress!

29 March 2020
Dave VanderWekke (Automated Wireless Environments)
Dave VanderWekke (Automated Wireless Environments)

Been spending some time extending this control.  Things I would like to see is a built in Watermark Text capability and Built in Image Watermark (Transparent image overlay). While I was able to implement both using your great example, would love a cleaner way of moving the overlay (watermark) position similar to how the cropping border comes up but the border would contain the watermark image.

Also would love to see the Aspect Ration drop down for cropping extended so you can pick 2x3, 3x2, 3x4, 4x3, 16:9 and 9:16 to have the crop area automatically set to those ratios and maintain that ration when resizing the cropping area.

Adding Hue to the Color Adjuster would also be a great addition to the Contrast, Brightness and Saturation that is already there.

In addition to Mirror (Horizonal Flip) a vertical flip would be great.

8 July 2020
Dmitry (DevExpress)
Dmitry (DevExpress)

@Dave VanderWekke

Thank you for the valueable feedback and suggestions, we appreciate that. Adding watermarks is a specific task, and I cannot promise this tool will be included in a public toolset. Fixed aspect ratio crop however is a brilliant idea and it is already on our list of enhancements.

As for Vertical Flip and Hue - the idea behind the current toolset was to process images from a camera, more specifically, a webcam. So vertical flip did not make much sense - it is doubtfully someone would take upside-down photos and edit them afterward :). The same applies to the "Hue" tool. However, editing other types of images may indeed require tools you mentioned. We will consider adding them in future releases, and it would be extremely helpful if you share your business scenario. What types of images your users edit, what's the pipeline? Thank you.

9 July 2020
Dave VanderWekke (Automated Wireless Environments)
Dave VanderWekke (Automated Wireless Environments)

@Dmitry

Thank you for the response.  So the business scenario is developing a simple image editing tool sans all the extra bells and whistles that commercial image editing tools provide.  My wife started a Hand Crafted Leather business and as we bring her products to her website we find a constant need to quickly edit product images and place watermarks on them.  We start with high res images taken with a cellphone or more often an DSLR Camera.

So I have written an app to do just this.  Simple image editing like Resize (extended the editor), Crop, etc. I also add two types of Watermarking.  One for Image Overlays with transparency and the other for text overlays.  I was mostly able to achieve the functionality I needed.

Quickly being able to rotate, flip (horizontally and vertically), resize, crop, watermark and simple color adjustments end up being our basic work flow to get images ready for the website.

14 July 2020

Please login or register to post comments.