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.v17.2.dll
Declaration
public class LayoutView :
ColumnView,
IDataControllerValidationSupport,
ILayoutViewInfoOwner,
ILayoutControlOwner,
IComponent,
IDisposable,
ISupportImplementor,
ILayoutControl,
IXtraSerializable,
ITransparentBackgroundManagerRelated 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:
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
Example
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:
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 = nwindDataSet.Employees;
this.Controls.Add(grid);
grid.Dock = DockStyle.Fill;
// Create columns.
LayoutViewColumn colFirstName = lView.Columns.AddField("FirstName");
LayoutViewColumn colLastName = lView.Columns.AddField("LastName");
LayoutViewColumn colAddress = lView.Columns.AddField("Address");
LayoutViewColumn colCity = lView.Columns.AddField("City");
LayoutViewColumn colCountry = lView.Columns.AddField("Country");
LayoutViewColumn colPhoto = lView.Columns.AddField("Photo");
// 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;
// Make the Photo field visible.
colPhoto.Visible = true;
// 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 = lView.TemplateCard.AddGroup("Address Info",
fieldLastName, InsertType.Bottom);
// Move the Address, City and Country fields to this group.
fieldAddress.Move(groupAddress, InsertType.Top);
fieldCity.Move(fieldAddress, InsertType.Bottom);
fieldCountry.Move(fieldCity, 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(350, 200);
Related GitHub Examples
The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutView class.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.