ContextQMD
Back to Devexpress

LayoutView Class

windowsforms-devexpress-dot-xtragrid-dot-views-dot-layout-51eb77a9.md

latest10.8 KB
Original Source

LayoutView Class

Displays records as cards in one or more columns, in one or more rows, in an ellipse (carousel mode), or as 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.v25.2.dll

NuGet Packages : DevExpress.Win.Grid, DevExpress.Win.Navigation

Declaration

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

The following members 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

WinForms Grid: Layout Views.

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:

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

csharp
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);
vb
Imports DevExpress.XtraEditors.Controls
Imports DevExpress.XtraEditors.Repository
Imports DevExpress.XtraGrid
Imports DevExpress.XtraGrid.Columns
Imports DevExpress.XtraGrid.Views.Layout
Imports DevExpress.XtraLayout
Imports DevExpress.XtraLayout.Customization
Imports DevExpress.XtraLayout.Utils

Dim grid As GridControl = New GridControl()
Dim lView As LayoutView = New LayoutView(grid)
grid.MainView = lView
lView.OptionsBehavior.AutoPopulateColumns = False
grid.DataSource = employeesBindingSource
Me.Controls.Add(grid)
grid.Dock = DockStyle.Fill

' Create columns.
Dim colFirstName As LayoutViewColumn = TryCast(lView.Columns.AddVisible("FirstName"), LayoutViewColumn)
Dim colLastName As LayoutViewColumn = TryCast(lView.Columns.AddVisible("LastName"), LayoutViewColumn)
Dim colAddress As LayoutViewColumn = TryCast(lView.Columns.AddVisible("Address"), LayoutViewColumn)
Dim colCity As LayoutViewColumn = TryCast(lView.Columns.AddVisible("City"), LayoutViewColumn)
Dim colCountry As LayoutViewColumn = TryCast(lView.Columns.AddVisible("Country"), LayoutViewColumn)
Dim colPhoto As LayoutViewColumn = TryCast(lView.Columns.AddVisible("Photo"), LayoutViewColumn)

' Access corresponding card fields.
Dim fieldFirstName As LayoutViewField = colFirstName.LayoutViewField
Dim fieldLastName As LayoutViewField = colLastName.LayoutViewField
Dim fieldAddress As LayoutViewField = colAddress.LayoutViewField
Dim fieldCity As LayoutViewField = colCity.LayoutViewField
Dim fieldCountry As LayoutViewField = colCountry.LayoutViewField
Dim fieldPhoto As LayoutViewField = 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.
Dim groupAddress As LayoutControlGroup = New LayoutControlGroup()
groupAddress.Text = "Address Info"
groupAddress.Name = "addressInfoGroup"
groupAddress.AddItem(fieldAddress)
' Move the Address, City and Country fields to this group.
fieldCity.Move(fieldAddress, InsertType.Bottom)
fieldCountry.Move(fieldCity, InsertType.Bottom)
lView.TemplateCard.AddGroup(groupAddress, fieldLastName, InsertType.Bottom)

' Assign editors to card fields.
Dim riPictureEdit As RepositoryItemPictureEdit = TryCast(grid.RepositoryItems.Add("PictureEdit"), 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)

fieldPhoto.TextVisible = False
fieldPhoto.SizeConstraintsType = SizeConstraintsType.Custom
fieldPhoto.MaxSize = New Size(150, 150)
fieldPhoto.MinSize = fieldPhoto.MaxSize

Inheritance

Object MarshalByRefObject Component BaseView ColumnView LayoutView

See Also

LayoutView Members

Layout View

DevExpress.XtraGrid.Views.Layout Namespace