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
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Collapse]View Technology
    [Expand]Banded Grid Views
    [Expand]Card View
    [Collapse]Layout View
      Layout View
      Card Layouts
      Stretching Cards to the View
      Card Alignment
      Scrolling
    [Expand]Tile View
    [Expand]WinExplorer View
     View Hierarchy
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [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

Layout View

Like Card Views, Layout Views display data records as cards consisting of card fields. However, unlike Card Views, Layout Views support multiple card layouts and allow card fields to be arranged within a card in numerous ways.

The Layout View's features are powered by the comprehensive layout management library used in the Layout Control Suite. To use a Layout View in your application, ensure that the DevExpress.XtraLayout.v17.1.dll library is referenced by a project.

Expanded Online Video

Expanded Card Layouts

The Layout View (LayoutView) represents data in a card format, where records are represented by cards and record fields are represented by card fields. Cards by default contain expand/collapse buttons used to minimize and restore cards.

The Header Panel at the top of the Layout View provides a set of buttons that allow an end-user to switch between various display modes.

Like Card View, the Layout View cannot represent a master data table in master-detail mode. In other respects, the Layout View's behavior is similar to other Views.

The Layout View is encapsulated by the LayoutView class, which is the ColumnView class' descendant. The Layout View inherits all the functionality implemented by the Column View, supporting work with columns and records, data sorting and filtering, and introduces new methods to work with cards.

Multiple card layouts are supported by the Layout View. To select a card layout, use the LayoutViewOptionsView.ViewMode property (accessible via the LayoutView.OptionsView object). Cards can be displayed using one or multiple columns or rows; it is also possible to display a single card centered within a View at one time. The following collage shows some of the layouts.

In addition to these card layouts, the Layout View supports arranging cards in an ellipse, called carousel mode. In this mode, all cards, except for the current card, are painted using a transparency effect and are visually displayed below the current card. When scrolling cards using the scroll bar, arrow keys or mouse wheel, they are moved along a specified ellipse curve.

Various display options affecting the card layout in carousel mode can be customized via the LayoutView.OptionsCarouselMode object.

Expanded Card Field Layouts

A card in a Layout View consists of card fields, which can be arranged using multiple layouts (compared to the Card View in which card fields are always positioned one under another). Card fields can be positioned either next to each other or one under another, and each field can span over several adjacent fields. Moreover, card fields can be combined into groups to emulate a Group Box's grouping feature. The following collage demonstrates sample cards.

A card field always contains a value region that represents a corresponding data field's value. It also contains the caption region, which can be hidden if required. In the image above, captions are hidden for fields displaying employees' photos.

Card fields are represented by LayoutViewColumn objects, derived from the GridColumn class. Column objects specify only display and behavior settings; they do not directly store layout settings. Card fields' layout settings (position within a card, indents, field caption's visibility and alignment, etc.) are specified by layout fields represented by LayoutViewField objects.

In a Layout View, each column object corresponds to a specific layout field object and vice versa. When a column is created, a layout field is created as well, and its methods can be used to position a field within a card, and to customize other layout options.

Layout fields arranged in a specific manner form a template card that is used as a pattern when creating cards at runtime. The template card can accommodate more than layout fields. It can contain empty regions and groups, combining other layout fields and empty regions. The template card can be accessed via the LayoutView.TemplateCard property.

The easiest way to customize the template card (add and position layout fields, combine them into groups, specify the location, alignment and visibility of card fields' captions, and many other layout settings) is to use the Layout Page of the Grid Control's Designer.

Expanded Layout View Main Features

The following are the main features supported by Layout Views.

  • Layout customization at design time via a control's Designer
  • Hints

    Hints are supported for cells with truncated text; and in carousel mode, hints are supported for cards displayed in the background.

  • Sorting Records

    This feature provides the ability to sort data against one or multiple columns. When sorting is applied to a View, cards are re-arranged to meet the current sort settings.

  • Filtering Records

    Filtering allows you to display a subset of records from a data source. When filtering is applied to a View, only those records that meet the current filter criteria are displayed. You can filter data against single or multiple card fields.

  • Selecting Multiple Cards

    This feature can be useful for end-users. See the End-User Capabilities: Selecting Rows/Cards topic for details.

Expanded See Also

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