Dashboard Items Layout

  • 5 minutes to read

The Dashboard Designer allows users to arrange and resize dashboard items and groups using drag-and-drop operations.

Layout_ItemsLayoutMain

Layout Concepts

The dashboard arranges dashboard items, groups and tabs using layout items, layout groups and layout tab pages arranged in layout tab container. They are containers that display a dashboard layout as a hierarchical structure.

Refer to the following topic for more information about concepts related to a dashboard layout: Dashboard Layout.

Item Resizing

You can resize individual items/groups by dragging their edges. The area that allows resizing items displays the resizing indicator (the Dashboard_ResizingIndicator icon).

Layout_ResizingItem

A 2x2 dashboard items layout group is horizontally oriented and contains two child layout groups by default. This arranges dashboard items in two ‘columns’ and allows you to set a different height for items in different columns. You can switch the group’s orientation to DashboardLayoutGroupOrientation.Vertical using the indicator at the group’s intersection.

ItemsResizing_Crosshair

This allows you to specify different widths for dashboard items in different ‘rows’. The table below lists and describes different modes.

Indicator Result Description
VertIndicator_Layout Crosshair_VerticalResizing Orients the layout group horizontally and allows you to change individual items’ height and the width of ‘columns’.
HorizontalIndicator_Layout Crosshair_HorizontalResizing Orients the layout group vertically and allows you to change the width of individual items and the height of ‘rows’.

To set the size of the layout item/group in code, use the DashboardLayoutNode.Weight property. It specifies the size of the layout item/group relative to the total weight of the parent’s layout items/groups.

Maximize and Restore Item

You can expand any dashboard item into the whole dashboard size to examine data in greater detail. The expanded dashboard item size in this case is the same as the root layout group.

To maximize a dashboard item, click the Maximize button in the dashboard item caption.

win-dashboard-maximize-dashboard-item

To restore the item size, click Restore.

win-dashboard-restore-dashboard-item

In code, call the following methods:

DashboardDesigner.MaximizeDashboardItem
Expands the specified dashboard item to the entire dashboard size to examine data in greater detail.
DashboardDesigner.RestoreDashboardItem
Restores the item size if an item is expanded to the entire dashboard size (maximized).

Note

The dashboard item is re-created when you maximize / restore the item. All events connected with a dashboard item life cycle (such as DashboardItemControlCreated, DashboardItemControlUpdated, etc.) are fired again.

Item Positioning

You can change the position of a dashboard item using drag-and-drop and one of the following approaches:

  • If the dashboard item’s caption is visible, click it and hold down the left mouse button while dragging the item.
  • If the dashboard item’s caption is not visible, click the Layout_DragAndDropIcon icon in the top left corner, and hold down the left mouse button while dragging the item.

Depending on the required position, a new layout group is created (if required) to maintain the item’s arrangement. Thus, the dashboard item can be inserted into a new or existing dashboard layout group.

The following table illustrates how a dashboard item is dragged:

Action

Description

DashboardDesigner_DraggingItem_1

Select the required dashboard item.

DashboardDesigner_DraggingItem_2

Drag the dashboard item to the expected area. The drag indicator

DashboardDesigner_DragIndicator

…shows the dashboard item’s possible positions.

DashboardDesigner_DraggingItem_3

Move the mouse pointer to the required position. The drop indicator

DashboardDesigner_DropIndicator

…highlights the hovered position.

DashboardDesigner_DraggingItem_4

Then, the drop indicator sequentially displays areas that the dashboard item can occupy. Release the left mouse button when the drop indicator displays the required area.

DashboardDesigner_DraggingItem_5

The dashboard item is moved to a new position.

Note

You can specify various settings related to changing the dashboard’s layout in the Dashboard Designer. See Dashboard Surface for more details.

Manage Layout in Code

The Dashboard class exposes the Dashboard.LayoutRoot property, which provides access to the root dashboard layout group.

Use the DashboardLayoutGroup.ChildNodes property to add child layout groups and items to the parent group (in particular, to the root group). The DashboardLayoutGroup.Orientation property allows you to specify whether the orientation of layout items/groups within the group is vertical or horizontal.

You can determine the immediate parent of the current layout item/group using the DashboardLayoutNode.Parent property. To determine the root (or topmost) group for a layout item/group, use the DashboardLayoutNode.Root property.

The items in a dashboard are automatically arranged. However, you can specify their size and locations in the Dashboard Designer or in code. See the following example for details:

View Example: How to Modify Dashboard Layout in Code

You can use the following methods to change the position of layout items/groups in code:

Method Description
DashboardLayoutNode.MoveAbove Moves the current layout item/group above the specified layout item/group.
DashboardLayoutNode.MoveBelow Moves the current layout item/group below the specified layout item/group.
DashboardLayoutNode.MoveLeft Moves the current layout item/group to the left of the specified layout item/group.
DashboardLayoutNode.MoveRight Moves the current layout item/group to the right of the specified layout item/group.

Note

You cannot move the layout group to a position within its own subtree.

The following methods allow you to insert the layout item/group next to the current layout item/group and display them side by side:

Method Description
DashboardLayoutNode.InsertAbove Inserts the layout item displaying the specified dashboard item above the current layout item/group.
DashboardLayoutNode.InsertBelow Inserts the layout item displaying the specified dashboard item below the current layout item/group.
DashboardLayoutNode.InsertLeft Inserts the layout item displaying the specified dashboard item to the left of the current layout item/group.
DashboardLayoutNode.InsertRight Inserts the layout item displaying the specified dashboard item to the right of the current layout item/group.