LayoutView Class

Presents records as cards, which can be displayed in one or multiple columns, one or multiple rows, in an ellipse (carousel mode) or a single card at a time. Supports complex card field layouts, built-in groups, tabbed groups and labels.

Namespace: DevExpress.XtraGrid.Views.Layout

Assembly: DevExpress.XtraGrid.v20.1.dll

Declaration

public class LayoutView :
    ColumnView,
    IDataControllerValidationSupport,
    ILayoutViewInfoOwner,
    ILayoutControlOwner,
    IComponent,
    IDisposable,
    ISupportImplementor,
    ILayoutControl,
    IXtraSerializable,
    ITransparentBackgroundManager,
    IAccessibleGrid
Public Class LayoutView
    Inherits ColumnView
    Implements IDataControllerValidationSupport,
               ILayoutViewInfoOwner,
               ILayoutControlOwner,
               IComponent,
               IDisposable,
               ISupportImplementor,
               ILayoutControl,
               IXtraSerializable,
               ITransparentBackgroundManager,
               IAccessibleGrid

Related API Members

The following members accept/return LayoutView objects:

Remarks

The LayoutView View displays records as cards. Fields in cards can be arranged using multiple layouts:

  • Fields can be freely arranged into any number of rows and columns.
  • Fields can span over several adjacent fields.
  • Fields can be combined into groups and tabbed groups, as if they were added to a group box or tab control.
  • Empty regions, labels and separators can be added to cards, if required.

The LayoutView can display a single card centered within the view, as well as multiple cards arranged into columns and rows. The following image shows a sample LayoutView, in which records are arranged in rows:

LayoutView

To specify the layout of cards, use the LayoutViewOptionsView.ViewMode property.

A Layout View supports the runtime customization feature, allowing end-users to modify the layout of fields at runtime in any way they want. Runtime customization is available via the Customization Form. The Customization Form can be opened by clicking the Customize button in the Header Panel, or by calling the LayoutView.ShowCustomizationForm method in code. To disable runtime customization, set the LayoutViewOptionsBehavior.AllowRuntimeCustomization property to false.

See Layout View to learn more.

Online Video

WinForms Grid: Layout Views.

Examples

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).

LayoutView_runtime_sample

using DevExpress.XtraGrid;
using DevExpress.XtraGrid.Views.Layout;
using DevExpress.XtraGrid.Columns;
using DevExpress.XtraLayout;
using DevExpress.XtraLayout.Customization;
using DevExpress.XtraLayout.Utils;
using DevExpress.XtraEditors.Repository;
using DevExpress.XtraEditors.Controls;

GridControl grid = new GridControl();
LayoutView lView = new LayoutView(grid);
grid.MainView = lView;
lView.OptionsBehavior.AutoPopulateColumns = false;

grid.DataSource = employeesBindingSource;
this.Controls.Add(grid);
grid.Dock = DockStyle.Fill;

// Create columns.
LayoutViewColumn colFirstName = lView.Columns.AddVisible("FirstName") as LayoutViewColumn;
LayoutViewColumn colLastName = lView.Columns.AddVisible("LastName") as LayoutViewColumn;
LayoutViewColumn colAddress = lView.Columns.AddVisible("Address") as LayoutViewColumn;
LayoutViewColumn colCity = lView.Columns.AddVisible("City") as LayoutViewColumn;
LayoutViewColumn colCountry = lView.Columns.AddVisible("Country") as LayoutViewColumn;
LayoutViewColumn colPhoto = lView.Columns.AddVisible("Photo") as LayoutViewColumn;

// Access corresponding card fields.
LayoutViewField fieldFirstName = colFirstName.LayoutViewField;
LayoutViewField fieldLastName = colLastName.LayoutViewField;
LayoutViewField fieldAddress = colAddress.LayoutViewField;
LayoutViewField fieldCity = colCity.LayoutViewField;
LayoutViewField fieldCountry = colCountry.LayoutViewField;
LayoutViewField fieldPhoto = colPhoto.LayoutViewField;

// Position the FirstName field to the right of the Photo field.
fieldFirstName.Move(new LayoutItemDragController(fieldFirstName, fieldPhoto,
    InsertLocation.After, LayoutType.Horizontal));

// Position the LastName field below the FirstName field.
fieldLastName.Move(new LayoutItemDragController(fieldLastName, fieldFirstName,
    InsertLocation.After, LayoutType.Vertical));

// Create an Address Info group.
LayoutControlGroup groupAddress = new LayoutControlGroup();
groupAddress.Text = "Address Info";
groupAddress.Name = "addressInfoGroup";

// Move the Address, City and Country fields to this group.
groupAddress.AddItem(fieldAddress);
fieldCity.Move(fieldAddress, InsertType.Bottom);
fieldCountry.Move(fieldCity, InsertType.Bottom);

lView.TemplateCard.AddGroup(groupAddress, fieldLastName, InsertType.Bottom);

// Assign editors to card fields.
RepositoryItemPictureEdit riPictureEdit = grid.RepositoryItems.Add("PictureEdit") as RepositoryItemPictureEdit;
riPictureEdit.SizeMode = PictureSizeMode.Squeeze;
colPhoto.ColumnEdit = riPictureEdit;

// Customize card field options.
colFirstName.Caption = "First Name";
colLastName.Caption = "Last Name";
// Set the card's minimum size.
lView.CardMinSize = new Size(250, 180);

fieldPhoto.TextVisible = false;
fieldPhoto.SizeConstraintsType = SizeConstraintsType.Custom;
fieldPhoto.MaxSize = fieldPhoto.MinSize = new Size(150, 150);
See Also