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

Table Layout Mode

The Table Layout Mode provides a more flexible Widget View layout. If in Stack Layout Mode you can host your documents only within either vertically or horizontally oriented Stack Groups, the Table Layout mode defines a grid of multiple columns and rows. Widgets can occupy one or several cells of this grid.

To enable this mode, set the View's WidgetView.LayoutMode property to TableLayout. Rows and columns are the RowDefinition and ColumnDefinition class objects stored within the WidgetView.Rows and WidgetView.Columns collections, respectively. The easiest way to customize the Widget View's table layout is to use the Layout tab of the Document Manager Designer. Here, you can add or remove rows and columns with the corresponding buttons, and drag your widgets to the desired table cells. The following figure illustrates this Designer functionality.

Each column and row has its own Length property that works in the exact same way as for the Stack Group objects: you can specify either a strict pixel-based size for your row (column), or use the adaptive star-based size.

To place a document within the desired grid cell, use the Document.RowIndex and Document.ColumnIndex properties. Widgets can also stretch across multiple adjacent cells. To do so, set the Document.RowSpan and/or Document.ColumnSpan property to a positive integer value, greater than 1. The figure below illustrates a sample Widget View with the Table Layout Mode applied.

When you drag a Document within a table layout WidgetView, the Documents begin to wobble - all Documents that can swap positions with the current Document are displayed with a wobble animation (see the animation below). If you wish to disable this animation, set the WidgetView.AllowDragDropWobbleAnimation property to DefaultBoolean.False.

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