WinForms Layout Control: Design-time templates

22 December 2014

As with all matters in development, oftentimes we find ourselves building a user interface or part of a UI that is remarkably similar to something that we’ve just built. To avoid the repetition – in code, that is – we have had up to now several strategies:

  1. UserControls. This is certainly a viable solution if you have exactly the same UI that you want to reuse. If not, then it’s more work than it’s worth.
  2. Code generation. This works pretty well (I’ve done this before in my dim and distant past, for example), apart from one drawback: you don’t get to see your UI at design-time.
  3. Visual Inheritance. Man, if you go this route, good luck. This just smacks of over-engineering to me; I think I’ll stick with UserControls.

The new version of the DevExpress WinForms Layout Control in v14.2 provides another much simpler way: design-time templates. This new feature allows you to save frequently-used layouts as templates and then be able to reuse those templates when necessary in your projects.

As an example of how this works, let’s create a compound waybill form that shows the need for some UI reuse. Here’s what we’re aiming for:

WinForms Layout Control: Example Waybill Form

Notice that the “SHIPMENT FROM” and the “TO – CONSIGNEE’ sections are very similar: they both have addresses, and also similar ‘name’ fields.

We proceed as normal when using the Layout Control by adding groups. When we get to the “SHIPMENT FROM” group we design it as normal, but before moving onto the group underneath which is very similar, we right-click the group we just created and select Create Template. Enter a unique name for the template and save it: you now have a reusable template in your repository. (All custom templates thus created are stored in the %Public%\Documents\DevExpress\XtraLayout\UserTemplates folder as XML files.)

WinForms Layout Control: creating a template

We’re now ready to use this new template. We go to the LayoutControl’s Customization Form and switch to the Templates tab. Locate the template in the list and drag it onto the form. The Customization Form allows you to see a preview of the template before we use it.

WinForms Layout Control: Using a custom template

Once the template has been dropped onto our form, we can customize the layout as desired, so changing the title to “TO – CONSIGNEE” and rearranging and re-captioning a couple of other fields.

If you find that even creating a template is too much of a nod to reuse (you only want to reuse a particular layout once, for example), then we have also improved the copy/paste functionality of the Layout Control. In essence, select the group you wish to duplicate, press Ctrl+C to copy it, and then Ctrl+V to paste it. (In actuality, this shortcut is also based on the new templates feature, but the template created is not persisted.)

Please note that the templates mechanism is version-agnostic. You can create templates in one version of the DevExpress WinForms suite and continue to reuse them in subsequent versions.

9 comment(s)
Alexander Krakhotko (Xafari team)


1) example DemoCenter this feature is implemented?

2) if it's available in XAF?

23 December, 2014
Julian Bucknall (DevExpress)


1. Er, well, it's a design-time thing, not a run-time feature. So it's not present in a demo since by the time the demo is compiled the template no longer exists *as a template* on the form. It's just a normal layout group. Sorry I didn't make this explicit.

2. Ditto.

Cheers, Julian

23 December, 2014
Bassam Abdelaal

Fantastic addition , thank you

23 December, 2014
emad alslahi

I need Help

I want to make Right To Left Ribbon Form

how did I do right to left form such arabic interface.?!!

26 December, 2014
Julian Bucknall (DevExpress)

@emad: We do not support Right-to-Left languages with DevExpress WinForms.

Cheers, Julian

26 December, 2014
Andy Luyten

Looks very nice! I already using this - it is also very useful if you're planning to make some changes to existing complex forms, before you start, make a template of the current layout, if something goes wrong, your template sets things back as they were :)

4 January, 2015
Rudy Scott

This is awesome!

10 February, 2015
Simon Johnson 1

@Julian, your comments hurt "We do not support Right-to-Left languages with DevExpress WinForms."

1 March, 2015
Johnny K

Why did i missed that back then????????

19 September, 2015

Please login or register to post comments.