Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Collapse]Application UI Manager
   [Collapse]Views
    [Collapse]Widget View
      Stack Layout Mode
      Table Layout Mode
      Flow Layout Mode
      Free Layout Mode
    [Expand]WindowsUI View
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
    Documents
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
   [Expand]Examples
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Free Layout Mode

The Free Layout Mode imposes no restrictions on how to organize your widgets and allows you to build any desired layout. Also, this is the only layout mode that fully supports floating widgets.

New documents added in Free Layout mode are arranged side-by-side in a single column or row depending on the WidgetView.Orientation property. Using the 'Layout' tab of the component's designer, you can drag these widgets to build any document layout you want. To do the same in code, call a Document.DockTo method overload that takes another widget document and the Orientation enumeration value as parameters. Additionally, by specifying the third boolean parameter, you can choose whether to place your widget before or after the target document. The code sample below illustrates how to dock one widget below another.

Expanded Drag Styles

The ItemDragStyle property, accessed through the View's WidgetView.FreeLayoutProperties section, changes the way this View operates when in Free Layout Mode.

Setting the ItemDragStyle property to the DockingHints value turns on traditional docking-styled dragging: end-users can use docking hints to dock widgets to the desired position. A user can also drop the widget and leave it floating.

Alternatively, when this property equals LivePreview, the View does not allow you to float its child documents by dragging them. The dragging itself no longer displays docking hints. Instead, the View utilizes a live preview to highlight the widget's future position. The gallery to the left illustrates the difference.

Expanded Sticky Splitters

Modifying the boolean EnableStickySplitters property (the WidgetView.FreeLayoutProperties group) enables or disables sticky splitters. When you drag a sticky splitter at runtime, it will automatically snap to match the level of other splitters with the same orientation. This feature allows you to easily align multiple splitters in a line for a clean and neat layout look. The animation below illustrates this feature.

Without this feature enabled, users will have to manually move splitters pixel-by-pixel if they want to adjust them on the same level.

Expanded Fixed and Relative Sizes

When you dock one widget to another in Free Layout mode, both widgets are placed to a docking container. Normally, you do not need to modify these containers as they dynamically adapt to the layout you build. However, you can manually specify width and height values for your containers and documents they own. To do so, invoke the Document Manager's designer and switch to the "Layout" tab. Not only does this tab allow you to re-arrange widgets by dragging them, but also shows the current layout hierarchy of the widgets and docking container (see the figure below).

When you select either a document or a container, the property grid displays their width and height properties. These properties accept objects of the Length type. A Length is a structure that holds two values.

  • Length.UnitType - the unit of measure type. This property can equal either Pixel or Star.
  • Length.UnitValue - a size value. Depending on the UnitType value, this number is interpreted as either an absolute value in pixels, or as a relative value compared to other star-typed Length objects.

Assigning Length structures of different types and values to widgets and docking containers, you can specify in detail how your layout will act when the form resizes at runtime.

The View will always prioritize a valid layout over your fixed size settings. For example, you can add two docking containers with the fixed widths of 100 and 200 pixels respectively. If an end-user resizes such a form to 600 pixels, a View will resize containers proportionally to 200 and 400 pixels rather than keep your custom size settings as is and display a gap between containers.

Also, keep in mind that since docking containers are created automatically depending on the layout you build, they are also automatically destroyed when not needed. Thus, your size settings can be lost after certain layout modifications.

How would you rate this topic?​​​​​​​