WinForms/WPF Reporting - Ribbon Report Designer and Other UX Improvements (v18.1)

Our End-User Report Designer components were originally derived from the implementation we created for developers. We tried to make every feature of the reporting system available in the designers, and to keep the UI usable at the same time. The components are very popular, so we must have succeeded to some extent! However, our concerns about UI complexity grew with the feature set and eventually we decided to implement several changes and enhancements to make users’ lives easier. Below you find an overview of the changes coming up in v18.1.

New Microsoft Office-inspired Ribbon structure

The use of a Ribbon UI in our report designer component is not new. However, a detailed analysis of Office applications showed that, in comparison, our Ribbon structure was less than optimal in the past. Being consistent with the way things work in Office also makes sense since it allows users to transfer knowledge of usage patterns more easily.

For our new Ribbon structure, we introduced core Ribbon tabs called Home, Layout, Page and View for general commands, as well as contextual tabs that offer commands relating to currently selected report controls. Here’s how the Ribbon looks now:

The new structure improves discoverability of report element features, which simplifies the report designing process especially for end users. The Preview and Scripts tabs are now clearly separated on the right side, and the new Designer tab helps switch back to the designer surface after previewing a document or implementing a script. Finally, the images shows that we have removed the Toolbox tab as well and now the report controls are available in a sidebar. You don’t need to switch to a specific Ribbon tab any longer to add a new control to a report!

This new appearance of the Ribbon End-User Report Designer is enabled by default, but you can hold the Alt key while dropping the component onto a form if you still prefer the old one:

If you display the designer from code, this line switches back to the old style: DevExpress.XtraReports.Configuration.DesignSettings.Default.UseOfficeInspiredRibbonStyle = false;

For the WPF platform, you need to set ReportDesigner.UseOfficeInspiredRibbonStyle = false instead, from code or XAML.

Finally, note that we do not perform automatic conversion of the old Ribbon toolbar when a project is updated to v18.1. If you have implemented a custom End-User Report Designer, you need to remove the XRDesignMdiController component (by default it’s called reportDesigner1) from your form and drop the RibbonReportDesigner from the toolbox once again.

Ribbon Style Gallery

In addition to the general Ribbon structure improvements, we also decided to adopt the approach of the Microsoft Word Style Gallery for report controls. The new item allows users to preview defined styles, and to assign them to multiple selected controls at once:

The Styles node is still available in the Report Explorer panel, but we will consider removing it in the future because it isn’t really needed anymore in addition to the Style Gallery. Please let us hear any thoughts you have on this topic!

Properties Panel – Favorite Properties View

Unfortunately, the Properties panel can be filled with large numbers of properties for some of our complex report controls. This can make it hard to find a specific property, even if it is one that’s frequently used. This is the scenario we’re trying to improve with the new Favorite Properties view.

Click the Edit Favorite Properties menu item to display a collection editor dialog listing report controls from the active report, and select the properties you’d like to see included in the favorite list. By default, properties available in a control’s Smart Tag menu are included:

Now you can use the Show Favorite Properties menu item to bring up a filtered view of properties on the selected control:

WinForms Report Designer Dock Panels – Light View

This feature doesn’t make the designer easier to use directly, but it updates the dock panels of the End-User Report Designer a more current appearance. The new Light mode of the Dock Manager shows clean 1-pixel borders for dock panels across all skins of the Windows Forms product line. Here is a screenshot with the Bezier skin enabled:

The XRDesignMdiController.DesignSettings.DockingViewStyle and PrintControl.DockingViewStyle properties manage this view mode at the level of both Document Viewer and End-User Report Designer, so you can provide a consistent appearance for your reporting application, whether you supply a custom-built designer or display the built-in Print Preview.

WPF Report Designer – Office-inspired Property Grid UI

The last user interface improvement we want to mention relates to the Properties Panel of the WPF Report Designer. It now mimics the layout of similar panels found in Office products, and provides advanced value editing for report control properties:

This feature targets WPF only in v18.1, but we are hoping for feedback and we will consider introducing a similar appearance for our WinForms Report Designer in the future.

Your feedback is important

Please let us know if you have any ideas for further improvements to the user experience of the Report Designer components, and share with us any concerns you or your end users have!

Free DevExpress Products - Get Your Copy Today