[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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]Get Started With Data Grid and Views
   [Expand]Data Binding
    Unbound Columns
    [Expand]Grid View
     Banded Grid Views
    [Collapse]Card and Layout Views
      Layout View
     WinExplorer View
    [Expand]Tile View
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Layout View

This document outlines features specific to LayoutView only. For information on common card and selection features, refer to the root Card and Layout Views article.

Expanded Template Card

The Layout View employs the Layout Control to arrange content inside cards. For every grid column, a LayoutViewField object is generated. Switch to the "Layout | Template Card" tab in the Data Grid Designer to re-arrange data fields, rename field captions, add separators and empty space items, set up card alignment options, etc.

Related API

Expanded View Designer

In the Data Grid designer, switch to the " Layout | View Layout" tab to set up most significant View options - card layout mode, card intervals, header visibility, availability of expand/collapse buttons, etc.

Expanded Card Layout Modes

There are six card layout modes available. You can set the required mode by changing the LayoutViewOptionsView.ViewMode property, while at runtime, end-users can switch between these modes by clicking the top View panel (see below).

You can either disable specific buttons on this panel (modify properties accessed through the LayoutView.OptionsHeaderPanel collection), or hide the panel entirely (disable the LayoutViewOptionsView.ShowHeaderPanel property).

Single Record

Single Row

Single Column

Multi Row and Multi Column


  • Cards are arranged along an elliptical path. The currently selected card is displayed at the middle of a curve and neighboring cards gradually fade out.
  • Access properties are provided by the LayoutView.OptionsCarouselMode object to modify the curve.

Expanded Stretching Cards

You can stretch cards vertically or horizontally to fit them in a current View client area. To do so, enable required StretchCardToView... properties.

Run the Layout View demo to test this feature.

Expanded Panning

The Layout View does not provide embedded scroll buttons to scroll cards that are larger than a View client area. Instead, end-users can click the hand icon in the top panel to enter the Panning mode. In this mode, users click anywhere inside a View and drag it in the required direction, much like on touch-input devices.

Related API

Expanded Runtime Customization

End-users can click the "Customization" button in the top panel to re-arrange fields, add secondary UI elements (labels, empty spaces and separators), modify card sizes and indents, etc. The amount of available options depends on whether the invoked dialog is standard or the advanced one.

Related API

Expanded Example - Create Layout in Code

The following example shows how to create and customize a Layout View in code. In the example, a template card is created, consisting of six fields arranged as in the image below:

Before arranging layout fields in code, ensure that corresponding columns are visible (see LayoutViewColumn.Visible and GridColumnCollection.AddVisible).

Expanded See Also

Is this topic helpful?​​​​​​​