Reporting - Picture Box Enhancements (v18.2)

For v18.2 we are delivering some great features to support freehand drawing and image uploads in the Print Preview - for signatures and other purposes - as well as the SVG image format. All platforms supported by our Reporting system benefit from these updates.

All new functionality is supported by the XRPictureBox report control. Its EditOptions property is populated with an instance of the new type ImageEditOptions, and this is where you find the property EditorName that is explained in more detail below.

Freehand Drawing in the Print Preview

To allow users to draw directly into a report in the Print Preview, set the property ImageEditOptions.EditorName to Signature. When the editor is activated, the user can choose colors and brush sizes in the flyout panel:

Freehand drawing

Image Upload in the Print Preview

Image uploads are allowed when ImageEditOptions.EditorName is set to Image. You can then choose sizing mode and image alignment in the flyout panel at runtime (these correspond to the design-time properties Sizing and ImageAlignment).

Image uploads

The Picture Box allows image uploads and freehand drawing simultaneously when ImageEditOptions.EditorName is set to ImageAndSignature.

All image editors include a Remove button. This button resets the editor value to the image provided in the InitialImage property.

Predefined Image Lists

The final new editor type is the image list. Helper methods are available to register image editors with collections of predefined images. For instance, this code registers an editor for national flags in a WinForms application:

var images = new List<Image>();

foreach (var file in Directory.GetFiles("../../Flags/", "*.png")) {
  var img = Image.FromFile(file);
  if (img != null)
    images.Add(img);
}

EditingFieldExtensionsWin.Instance.RegisterImageCollectionEditorInfo(
  "Nationality", "Nationality", images);

With the registration in place, set ImageEditOptions.EditorName to the name of the editor (Nationality in this example). When an end user clicks the Picture Box in the Print Preview, they can choose a predefined image from the list:

Predefined Image Lists

SVG Image Support

Using the new property XRPictureBox.ImageSource, the control now supports SVG format images. The implementation currently doesn’t support images with gradients or text elements. We hope to extend the feature set in future versions. Please let us know your priorities.

SVG Image Support

SVG images are preserved when a report is exported to a PDF file. Other export formats include a metafile or a bitmap.

Your feedback is valuable

We would be very grateful if you could submit your responses to the short survey below. If you have any other thoughts or you would like to describe specific scenarios to us, please feel free to leave a comment below or to open a Support Center issue.

5 comment(s)
jerome crevecoeur

Good news !

And now you can export Xtrachart in Svg   and the world will be (almost) Wonderful.

23 October, 2018
B Jansen

This looks very interesting. What options / events are there to save the signature or complete report incl signature?

23 October, 2018
Dmitry Tok (DevExpress Support)

@Jerome: You’re correct, our WinForms ChartControl supports SVG export starting with v17.2. However, our XRChart report control is exported to a Metafile by default. Do you see any advantages of SVG over Metafile? Feel free to describe them or create a support ticket to share your thoughts.

@B Jansen: A report document consists of bricks under the hood and a signature or an uploaded image is stored in the ImageBrick.Image property value. Thereby, an image will be preserved upon printing, exporting or saving a report document to a PRNX file. In addition, the PrintingSystem.EditingFieldChanged event occurs each time any editing field in a document is changed.

24 October, 2018
Mark Bissett 1

Will the "normal" WinForms DevExpress Picture box also support signature drawing?

24 October, 2018
Dmitry Tok (DevExpress Support)

Hi Mark,

No, the WinForms PictureEdit component does not provide drawing capabilities out of the box. However, I think that the sample posted here might be helpful for you: www.devexpress.com/.../add-a-component-or-extension-that-turns-the-pictureedit-control-into-a-simple-art-canvas

29 October, 2018

Please login or register to post comments.