How to: Create and customize a LayoutView 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:

C#

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

// Add the Address, City and Country fields to this group.

groupAddress.Add(colAddress.LayoutViewField);

groupAddress.Add(colCity.LayoutViewField);

groupAddress.Add(colCountry.LayoutViewField);

 

// 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);

 

VB

Imports DevExpress.XtraGrid

Imports DevExpress.XtraGrid.Views.Layout

Imports DevExpress.XtraGrid.Columns

Imports DevExpress.XtraLayout

Imports DevExpress.XtraLayout.Customization

Imports DevExpress.XtraLayout.Utils

Imports DevExpress.XtraEditors.Repository

Imports DevExpress.XtraEditors.Controls

Dim grid As GridControl = New GridControl()

Dim lView As LayoutView = New LayoutView(grid)

grid.MainView = lView

lView.OptionsBehavior.AutoPopulateColumns = False

grid.DataSource = NwindDataSet.Employees

Me.Controls.Add(grid)

grid.Dock = DockStyle.Fill

' Create columns.

Dim colFirstName As LayoutViewColumn = lView.Columns.AddField("FirstName")

Dim colLastName As LayoutViewColumn = lView.Columns.AddField("LastName")

Dim colAddress As LayoutViewColumn = lView.Columns.AddField("Address")

Dim colCity As LayoutViewColumn = lView.Columns.AddField("City")

Dim colCountry As LayoutViewColumn = lView.Columns.AddField("Country")

Dim colPhoto As LayoutViewColumn = lView.Columns.AddField("Photo")

' 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

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

Dim groupAddress As LayoutControlGroup = lView.TemplateCard.AddGroup("Address Info", _ 

    fieldLastName, InsertType.Bottom)

' Add the Address, City and Country fields to this group.

groupAddress.Add(colAddress.LayoutViewField)

groupAddress.Add(colCity.LayoutViewField)

groupAddress.Add(colCountry.LayoutViewField)

' Assign editors to card fields.

Dim riPictureEdit As RepositoryItemPictureEdit = grid.RepositoryItems.Add("PictureEdit")

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)