WinForms Layout Control & CRUD Forms - New Table Layout vs Flow Layout Mode

Thinking Out Loud
11 June 2015

We have a lot of customers who rely on the flexibility of our WinForms Layout Control to create CRUD forms. One of my favorite features is its runtime customization capabilities - something I'll talk about later in the month. In this post, I want to recap something I discussed earlier this week - support for Data Annotation Attributes, a new feature allowing you to create detail forms without writing any code. 

With Data Annotation Attributes, you simply assign a business object as the Data Layout Control’s data source and call the RetrieveFields method. The Layout Control automatically generates the layout by using the attributes applied to the object’s fields. Of course, your business object can contain nested objects and the Layout Control is designed to render those as separate groups. The following is an example in which a Transaction object contains Account and Category nested objects.

WinForms Form Layout - Control Attributes

To simplify things as much as possible, the Layout Control includes an AutoRetrieveFields option - which re-generates the layout each time a data source is assigned. If you find that the auto-generated layout pictured above is too "simple" or if issues arise as a result of stretched controls (for wide forms), you can easily rearrange layout items in code.

LayoutControlGroup autoGenerateGroup = dataLayoutControl1.Root.Items[0] as LayoutControlGroup;
LayoutControlGroup accountItem = autoGenerateGroup.Items[0] as LayoutControlGroup;
LayoutControlGroup categoryItem = autoGenerateGroup.Items[1] as LayoutControlGroup;
LayoutControlItem dateItem = autoGenerateGroup.Items[2] as LayoutControlItem;
LayoutControlItem amountItem = autoGenerateGroup.Items[3] as LayoutControlItem;
categoryItem.Move(accountItem, DevExpress.XtraLayout.Utils.InsertType.Right);
amountItem.Move(dateItem, DevExpress.XtraLayout.Utils.InsertType.Right);


WinForms Data Layout Control

If screen resolution issues persist for wide forms, you can switch to our Flow Layout mode. In this mode, the Layout Control automatically arranges controls back-to-back, wrapping at the Layout Control's rightmost edge (note that nested groups are not supported in Flow Layout mode).

To activate Flow Layout mode and specify cell size, we must set two properties:

autoGenerateGroup.CellSize = new System.Drawing.Size(50, 24);
autoGenerateGroup.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Flow;

This animation below demonstrates the benefits of using Flow Layout mode - as you can see, the form is adaptive as its resized.

DevExpress WinForms Layout Control - Flow Mode


The third option to form design when using our Layout Control (new in v15.1) is Table Layout mode. In Table Layout mode, the control area is divided into rows and columns. Column/row size can be in absolute or relative values. Controls are placed in a specific cell addressed by a column and row and can occupy two or more columns/rows simultaneously.

Let’s take a look at Table Layout mode and create a table consisting of two columns and three rows. Column widths will be 40% and 60% respectively. The COMMENT field will occupy two columns.

LayoutControlGroup autoGenerateGroup = dataLayoutControl1.Root.Items[0] as LayoutControlGroup;
autoGenerateGroup.OptionsTableLayoutGroup.Add(new ColumnDefinition(autoGenerateGroup, 40, SizeType.Percent));
autoGenerateGroup.OptionsTableLayoutGroup.Add(new ColumnDefinition(autoGenerateGroup, 60, SizeType.Percent));
autoGenerateGroup.OptionsTableLayoutGroup.Add(new RowDefinition());
autoGenerateGroup.OptionsTableLayoutGroup.Add(new RowDefinition());
autoGenerateGroup.OptionsTableLayoutGroup.Add(new RowDefinition());
autoGenerateGroup.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table;
autoGenerateGroup.Items[4].OptionsTableLayoutItem.ColumnSpan = 2;
Here's the form at runtime...

DevExpress Layout Control - Table Mode

To summarize, the DevExpress Layout Control now gives you 3 ways to quickly create high-impact CRUD details forms:

  1. Using DataAnnotations attributes to generate layouts on-the-fly.
  2. Using the control's Flow Layout mode to generate adaptive forms.
  3. Using Table Layout mode to generate the form by placing controls into specific table cells.

We'd love to know how you use the Layout Control in your WinForms project. Your continued feedback will help us refine the features shipping in this product.


no comments
No Comments

Please login or register to post comments.