Skip to main content Skip to footer

Create BI dashboards in your app with the dashboard layout control for WinForms

The Dashboard Layout is a layout control that lets you design dynamic screens and dashboards giving you a powerful layout system. Being able to choose layouts that fits screen requirements is the core feature of the control. Other built-in features include drag and drop, maximize and restore, and save and load layouts.

WinForms dashboard layout control

The control has three out-of-the-box layouts. They can be set using LayoutType property of C1DashboardLayout:

Flow layout

Flow layout
When the LayoutType of DashboardLayout control is set to Flow, a FlowContentPanel is used by the DashboardLayout control. This layout arranges child containers into either rows or columns, per the FlowDirection property. By default, the flow of items is wrapped at the control's edge, so when one column/row ends, another one automatically starts.

Grid layout

Grid layout
The grid layout arranges the items in tabular form consisting of rows and columns. When you set the LayoutType as Grid, a GridContentPanel is used by the DashboardLayout control. Rows and columns can be added to this layout using the SmartTag or the Rows or Columns collection. The cells of a grid can span multiple cells. If you want a control to span multiple rows or columns, set the RowSpan or ColumnSpan property of the control.

Split layout

Split layout
On setting the LayoutType to Split, SplitContentPanel is used by the DashboardLayout control. This layout system, partitions the surface into different areas using Panels, each of these Panels could be resized using the split. This type of layout is useful when above two layouts do not fulfil the requirement or nested layout is required. The control provides SmartTags to add remove panels to the layout control. Alternatively, this can be done using Panels collection.

The Dashboard Layout control comes with following built-in features:

Drag and Drop

Drag-and-drop layout
The control supports out-of-the-box drag and drop. On hovering over the child container, you can drag a child container from one position to another. Other child containers automatically adjust to this change as per the respective layout rules.

Maximize and Restore

Maximize and restore controls
Child containers can be maximized and restored using the built-in icons. On maximizing the child container, it covers the parent surface like a model window. It can be restored using the corresponding restore icon. In the image, the restore icon can be seen in the top right corner.

Resizing

Resize controls
A child container can be resized using the mouse along the border, as shown in the image. When you resize a control, the border style for that container changes during resize. Other containers adjust as per the available space. For example, in Flow layout, when Panel1 is further resized, Panel3 will move to second row.

Save and Load Layout

Dashboard Layout provides a public API to save and load the layout to local storage in XML format through the SaveLayout and LoadLayout methods. This feature is helpful in case you have to save a particular layout and load it as per users, or to provide an option to users to change the layout and save it so that they can load it later.

Header and Tools

Header and tools
The control supports optional header and configurable ContextMenuStrip for the child containers. This supports Captions for child containers. In addition, it has built-in support to Hide and ShowAll child containers. You can customize this by adding custom context menus to the ContextMenuStrip.

Convert Existing Layout to Dashboard Layout

It is possible to convert an existing layout to a Dashboard Layout through AttachToLayout method. An existing C1SplitContainer, FlowLayoutPanel, or TableLayoutPanel can be converted to a DashboardLayout using the AttachToLayout method. For example, refer to the DashboardDemo sample that we ship, it uses a C1SplitContainer as the main layout for the Dashboard. To convert this into DashboardLayout, we simply had to use the AttachToLayout method to get everything that this new control offers:

Convert existing layout to dashboard layout

Learn more about Dashboard Layout for WinForms

Download the demo.

Prabhakar Mishra

Prabhakar Mishra

Product Manager
comments powered by Disqus