WinForms Layout Control: Usability Enhancements

ctodx
04 March 2015

As you may know – and in my opinion, should know: it’s a great, time-saving control – the Layout Control provides rich design-time and runtime customization capabilities, giving you and your users the ability to easily arrange controls in the way you want, to resize and hide controls, to specify the alignment of prompts, and so on.

Traditionally, the customization features are activated using a context menu. This menu can be opened by either right-clicking a control's label or padding, or some empty space within the Layout Control itself. If, however, the controls within the layout container are displayed with no or little padding or no labels, or worse there is no empty space at all, it makes difficult for you and your users to activate the customization menu. In such layouts (an example is shown below), you’re forced to engage in some deft “pixel hunting” in order to locate a point where a right-click invokes the customization menu. And we know how annoying that can be.

Layout form with no spare padding: where do I click?

Worry no more as we have introduced a new Quick Runtime Customization mode and a few usability enhancements in v14.2.6 (yes, in a minor release!) to help with that pixel hunting issue.

Quick Runtime Customization

The Quick Runtime Customization mode, just like the default customization mode, provides a full range of customization actions, available in a touch-friendly customization form.

To activate this new mode, users have to press and hold a finger (on touch devices) or right-click and hold (using a mouse) within the Layout Control's bounds (including areas occupied by other controls). Quick mode initialization is visualized with an animated load indicator.

Layout Control: quick runtime customization

Note that the customization buttons are context dependent.

Design-Time Glyphs and Improved Resizing

We have addressed the design-time "pixel hunting" issue by introducing design-time glyphs. Two glyphs are displayed once an embedded control is selected. The first glyph Design-time glyph for dragging allows you to perform item drag-and-drop operations, while the second glyph Design-time glyph for context menu can be used to invoke the layout item's context menu.

We have also improved layout item resizing. The capability to resize items with no padding has been added.

LayoutControlDesignTimeCustomizationUsingGlyphs

Alt + Dragging

This enhancement addresses a potentially inaccurate insertion of an item during drag-and-drop. This can happen when the target location may be hidden underneath the item being dragged. With this change, an item being dragged can be temporarily made transparent by pressing and holding the ALT key. This allows you to clearly see the target position.

Using Alt+Dragging

As I’m sure you can see, these small changes will provide a large improvement in usability. Check them out in v14.2.6, available any day now. Feedback on these enhancements is welcome: just comment on this post or send me an email at julianb@devexpress.com. The team would love to hear from you!

11 comment(s)
Crono
Crono

Can the Quick Runtime Customization screen be invoked programmatically? Is there a way to turn off the default touch / right-click holding feature?

4 March, 2015
Mark Bissett 2
Mark Bissett 2

Many thanks DevExpress, these changes look great.

5 March, 2015
Roman Kalachik (DevExpress)
Roman Kalachik (DevExpress)

Crono,

Yes, you can show Quick customization form programmatically layoutControl1.ShowCustomizationForm();

No, there is no way to customize that gesture.

Please refer to documentation for more details.

documentation.devexpress.com

5 March, 2015
thehill
thehill

it took a little while to get used to the layout control but now i use it for virtually all of my forms. these tweaks should definitely help to resolve some of the minor frustrations when trying to reposition and modify items.

one question whilst we are on layout control - what is the difference between the two graphics that are displayed when you drag a control onto the layout control. one is a rectangle and the other is a line with two inverted arrows pointing inwards. i looked in teh docs and could never find anything and always meant to get round to putting it on a ticket.

thanks

5 March, 2015
Crono
Crono

Roman I would suggest that you introduce a way to do so. I might want the customization form in my app, yet use a long screen press behavior for a whole other thing. I must be allowed to turn this one off.

5 March, 2015
Roman Kalachik (DevExpress)
Roman Kalachik (DevExpress)

Mark, thank you for the kind words.

Thehill, a rectangle is displayed for MoveType.Inside. Please refer to this article for more details: documentation.devexpress.com

Crono, let’s continue our discussion at www.devexpress.com/.../Center. Please open a ticket describing your use case.

5 March, 2015
Christopher Todd
Christopher Todd

This is great!!

5 March, 2015
Christopher Todd
Christopher Todd

Will this work for design-time or is that coming? www.devexpress.com/.../S136200

5 March, 2015
Christopher Todd
Christopher Todd

Sorry, ignore my stupidity in my previous email.

5 March, 2015
Crono
Crono

Roman,

As requested I created this ticket: www.devexpress.com/.../T216302

5 March, 2015
Saif Khan
Saif Khan

This is a welcome feature. I dreaded the “pixel hunting”...drove me crazy. One solution which worked for me was selecting items in VS property grid until the one I wanted was selected.

7 March, 2015

Please login or register to post comments.