WinForms - New Layout Panels (v19.1)

WinForms Team Blog
17 April 2019

Our Layout and Data Layout Controls can create the most sophisticated and complex UI structures – you can arrange hundreds of elements in a form or user control, split them into groups and tabs, persist and restore layouts.

These components wrap every control in a Layout Item that has its own settings to manage item paddings, margins, sizes of the hosted control and the layout item itself, sizing modes and many others. All these settings work together with the embedded control’s settings, which results in great flexibility and in some cases, considerable complexity.

In v19.1 we are introducing two special layout panels that make it easier to deal with certain common layout requirements. These panels may be familiar from WPF and many other UI platforms. They don’t have advanced functionality like runtime editing, but they provide an interesting alternative approach for some scenarios.

Table Panel

This panel is most useful when you need to arrange elements in a grid, as you typically would for data entry forms, as an example.

Table Panel

Creating the layout grid is easy. There are Columns and Rows collections, and Collection Editor dialogs to populate them at design time, as well as intuitive buttons shown in the designer (see the image above) to add items in both dimensions. Each row and column has one of three size modes:

  • Absolute - you specify the exact size of a column or row in pixels
  • Relative - column and row size values are relative to each other. If you have three rows with sizes defined as 1, 1 and 2, the first two rows will have equal height and the last one will be twice as high.
  • AutoSize - size values are ignored, the column or row resizes to accommodate its content

When the layout grid is ready, drag and drop controls into its cells. You can drag controls between the cells to rearrange them. When a control is nested in a TablePanel, the Visual Studio Property Grid shows extender settings to change the control location and its row and column spans.

TablePanel Extender Properties

If you need to set these extender properties from code, use the Set... methods provided by the TablePanel:

// Controls must be included in the TablePanel for the
// Set... methods to work correctly.
tablePanel1.Controls.AddRange(new Control[] {button1, button2});

tablePanel1.SetCell(button1, 0, 0);

tablePanel.SetRow(button2, 2);
tablePanel.SetColumn(button2, 2);

tablePanel.SetRowSpan(button1, 2);
tablePanel.SetColumnSpan(button2, 2);

Stack Panel

The StackPanel is similar to its namesake from the WPF world: it arranges controls in a single row or column. You can choose one of four directions: left to right, right to left, bottom up, or top down. In the image below, the panel arranges its controls top-down.

Stack Panel

Like the TablePanel, the StackPanel accepts controls dropped onto its surface. Once added, child elements can be resized and rearranged with the mouse. There is also an extender property called Stretched, which grows a control in the configured stack direction until all free panel space is occupied or the control’s MaximumSize is reached.

Streched extender property

StackPanels are perfect to create simple control blocks, like search panels or similar. However, you can also nest StackPanels and TablePanels to create layouts of any complexity. Populate a StackPanel, choose its direction, and drag it into a TablePanel cell - or use a TablePanel as an element in a StackPanel.

What Do You Think?

Do you like the new panels? Do you think we are missing an important feature? We would like to hear from you.

32 comment(s)
NHIF
NHIF

Very Nice.

17 April, 2019
Thierry Knijff
Thierry Knijff

Great!

17 April, 2019
Christopher Todd
Christopher Todd

WOW! I just happen to need it right now!

17 April, 2019
Santiago Moscoso
Santiago Moscoso

What benefit does table panel provide over System.Windows. Forms.TableLayoutPanel?

17 April, 2019
Kiryl Y.
Kiryl Y.

Very good. When is the planned date for version 19 rollout?

17 April, 2019
Appy Developers
Appy Developers

Very good, and thanks a lot on your UI Layout ideas.

17 April, 2019
Customer69806
Customer69806

Awesome!!

17 April, 2019
Dmitry Babich (DevExpress)
Dmitry Babich (DevExpress)

@Santiago

There are various advantages, including our skinning engine support and improved layout algorithms. We are working on detailed documentation to describe all features the new panels have. I should also mention that unlike standard panels, our controls keep improving with each release.
17 April, 2019
Dmitry Babich (DevExpress)
Dmitry Babich (DevExpress)

@Kiryl

We plan to release v19.1 in the middle of May.

17 April, 2019
Stephen J White
Stephen J White

Nice! I always wished Winforms had things similar to WPF's Stack Panel. :D  Also glad to see you added a table layout too, the Winforms one has always felt off to me.

17 April, 2019
Orhan ÖCAL
Orhan ÖCAL

Great. I need it right now!

17 April, 2019
Mo cisse
Mo cisse

Nice

17 April, 2019
Mark Bissett 1
Mark Bissett 1

Great addition. Many thanks.

17 April, 2019
mayer schmukler
mayer schmukler

fantastic, ready to start using this

17 April, 2019
Mike Calming
Mike Calming

Great! Is this will be available in XAF?

17 April, 2019
Martin Pelletier
Martin Pelletier

Very cool

17 April, 2019
Jawad Khan
Jawad Khan

What took you so long to introduce these controls? They should be there 10 years back.. :P

Anyway better late than never.

17 April, 2019
ANASTASIOS SARRIS
ANASTASIOS SARRIS

if you add also a collapse behavior to a group and to be able to add any control  (e.g. GridControl) into a panel then we will have a perfect tool to manage any case into a form.

17 April, 2019
Steve Sharkey
Steve Sharkey

Cool - especially the table layout

18 April, 2019
Manuel Grundner [DevExpress MVP]
Manuel Grundner [DevExpress MVP]

Nice!

18 April, 2019
Kai_Gossens
Kai_Gossens

Nice!

18 April, 2019
Paolo KALC
Paolo KALC

available in XAF?

18 April, 2019
Dennis (DevExpress Support)
Dennis (DevExpress Support)

@Paolo KALC, Mike Calming: We have not planned this WinForms feature integration for any specific release yet. This year our team is focusing on the items that affect the majority of XAF users based on the NPS, roadmap surveys and the Support Center feedback.

18 April, 2019
Shaun Luper
Shaun Luper

Winforms forever!

18 April, 2019
Tony Phillips
Tony Phillips

Great addition, just what I need

18 April, 2019
Bassam Abdelaal
Bassam Abdelaal

you mentioned that "They don’t have advanced functionality like runtime editing, but they provide an interesting alternative approach for some scenarios"

you did not mention what are those scenarios that can be even more important than the *runtime editing* allowing user to change the layout

19 April, 2019
Paolo KALC
Paolo KALC

Dennis, I think that this feature would be very useful for all XAF users

19 April, 2019
Gencer W. Genç
Gencer W. Genç

Great! It can be more useful. Also I think time to use these layouts in EditForm Designer for Grids. I'm using seperated forms for data editing. Because current designer capabilities are very limited.

20 April, 2019
Andrew Fraser
Andrew Fraser

Love it :-)

22 April, 2019
Octavian
Octavian

Hello! Which are the advantages of using these new controls over the LayoutControl?

23 April, 2019
Thorsten Sommer
Thorsten Sommer

Thanks, DevExpress :-) I can use these layouts very well. Nice that the layouts are then also provide skinning engine support. I'm already looking forward to the 19.1 release.

23 April, 2019
Appy Developers
Appy Developers

I used the "Table Panel" and its very easy, Fast and elegant.

Thanks on this new control.

5 July, 2019

Please login or register to post comments.