using DevExpress.XtraEditors;
using DevExpress.XtraLayout;

ButtonEdit editorPhone1 = new ButtonEdit() { Name = "editorPhone1" };
PictureEdit editorPhoto = new PictureEdit() { Name = "editorPhoto" };
MemoEdit editorAddress = new MemoEdit() { Name = "editorAddress" };
ButtonEdit editorEmail = new ButtonEdit() { Name = "editorEmail" };
TextEdit editorName = new TextEdit() { Name = "editorName" };
SimpleButton btnCancel = new SimpleButton() { Name = "btnCancel", Text ="Cancel" };
SimpleButton btnOK = new SimpleButton() { Name = "btnOK" , Text = "OK" };
CheckEdit checkBoxPhone2Active = new CheckEdit() { Name = "checkBoxPhone2Active", Text = "Active" };
CheckEdit checkBoxPhone1Active = new CheckEdit() { Name = "checkBoxPhone1Active", Text = "Active" };
ButtonEdit editorPhone2 = new ButtonEdit() { Name = "editorPhone2" };
ButtonEdit editorFax = new ButtonEdit() { Name = "editorFax" };
MemoEdit editorNotes = new MemoEdit() { Name = "editorNotes" };

LayoutControl lc = new LayoutControl();
lc.Dock = DockStyle.Fill;
this.Controls.Add(lc);

// Enable Table Layout for the Root group
lc.Root.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table;
ColumnDefinition col1Root = new ColumnDefinition() { SizeType = SizeType.Percent, Width = 50D };
ColumnDefinition col2Root = new ColumnDefinition() { SizeType = SizeType.Percent, Width = 50D };
RowDefinition row1Root = new RowDefinition() { SizeType = SizeType.AutoSize};
RowDefinition row2Root = new RowDefinition() { SizeType = SizeType.AutoSize};
RowDefinition row3Root = new RowDefinition() { SizeType = SizeType.Percent, Height = 100D };
RowDefinition row4Root = new RowDefinition() { SizeType = SizeType.AutoSize};
lc.Root.OptionsTableLayoutGroup.ColumnDefinitions.Clear();
lc.Root.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(new ColumnDefinition[] { col1Root, col2Root });
lc.Root.OptionsTableLayoutGroup.RowDefinitions.Clear();
lc.Root.OptionsTableLayoutGroup.RowDefinitions.AddRange(new RowDefinition[] { row1Root, row2Root, row3Root, row4Root });

// The Root group's immediate items:
LayoutControlItem liName = lc.Root.AddItem("Name", editorName);
liName.Name = "liName";
LayoutControlItem liEmail = lc.Root.AddItem("E-mail", editorEmail);
liEmail.Name = "liEmail";
LayoutControlItem liAddress = lc.Root.AddItem("Address", editorAddress);
liAddress.Name = "liAddress";
LayoutControlItem liPhoto = lc.Root.AddItem("Photo", editorPhoto);
liPhoto.Name = "liPhoto";
//Tabbed group
TabbedControlGroup tlgPhonesFax = lc.Root.AddTabbedGroup();
tlgPhonesFax.Name = "tlgPhonesFax";
//Borderless 'Buttons' group 
LayoutControlGroup lgButtons = lc.Root.AddGroup();
lgButtons.GroupBordersVisible = false;

//Add two groups (Phones and Fax) as tabs to the tlgPhonesFax tabbed group
LayoutControlGroup lgPhones = tlgPhonesFax.AddTabPage("Phones");
lgPhones.Name = "lgPhones";
LayoutControlGroup lgFax = tlgPhonesFax.AddTabPage("Fax");
lgFax.Name = "lgFax";
tlgPhonesFax.SelectedTabPageIndex = 0;

// Enable Table Layout for the Phones group
lgPhones.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table;
ColumnDefinition col1InGroupPhones = new ColumnDefinition() { SizeType = SizeType.Percent, Width = 50D };
ColumnDefinition col2InGroupPhones = new ColumnDefinition() { SizeType = SizeType.Percent, Width = 50D };
RowDefinition row1InGroupPhones = new RowDefinition() { SizeType = SizeType.AutoSize};
RowDefinition row2InGroupPhones = new RowDefinition() { SizeType = SizeType.Percent, Height = 100D };
lgPhones.OptionsTableLayoutGroup.ColumnDefinitions.Clear();
lgPhones.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(new ColumnDefinition[] { col1InGroupPhones, col2InGroupPhones });
lgPhones.OptionsTableLayoutGroup.RowDefinitions.Clear();
lgPhones.OptionsTableLayoutGroup.RowDefinitions.AddRange(new RowDefinition[] { row1InGroupPhones, row2InGroupPhones });

//Add items to the Phones group
LayoutControlItem liPhone1 = lgPhones.AddItem("Phone 1", editorPhone1);
liPhone1.Name = "liPhone1";
LayoutControlItem liPhone2 = lgPhones.AddItem("Phone 2", editorPhone2);
liPhone2.Name = "liPhone2";
LayoutControlItem liPhone1Active = lgPhones.AddItem("Active", checkBoxPhone1Active);
liPhone1Active.Name = "liPhone1Active";
LayoutControlItem liPhone2Active = lgPhones.AddItem("Active", checkBoxPhone2Active);
liPhone2Active.Name = "liPhone2Active";
LayoutControlItem liFax = lgFax.AddItem("Fax", editorFax);
liFax.Name = "liFax";

// Enable Table Layout for the Buttons group
lgButtons.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table;
ColumnDefinition col1InGroupButtons = new ColumnDefinition() { SizeType = SizeType.Percent, Width = 100D };
ColumnDefinition col2InGroupButtons = new ColumnDefinition() { SizeType = SizeType.Absolute, Width = 120D };
ColumnDefinition col3InGroupButtons = new ColumnDefinition() { SizeType = SizeType.Absolute, Width = 120D };
RowDefinition row1InGroupButtons = new RowDefinition() { SizeType = SizeType.AutoSize};
lgButtons.OptionsTableLayoutGroup.ColumnDefinitions.Clear();
lgButtons.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(new ColumnDefinition[] { col1InGroupButtons, col2InGroupButtons, col3InGroupButtons });
lgButtons.OptionsTableLayoutGroup.RowDefinitions.Clear();
lgButtons.OptionsTableLayoutGroup.RowDefinitions.AddRange(new RowDefinition[] { row1InGroupButtons });

//Add items to the Buttons group
LayoutControlItem liBtnOK = lgButtons.AddItem("btnOK", btnOK);
liBtnOK.Name = "liBtnOK";
LayoutControlItem liBtnCancel = lgButtons.AddItem("btnCancel", btnCancel);
liBtnCancel.Name = "liBtnCancel";

// Specify positions for all layout items within their parent groups
liName.OptionsTableLayoutItem.ColumnIndex = 0;
liName.OptionsTableLayoutItem.RowIndex = 0;

liEmail.OptionsTableLayoutItem.ColumnIndex = 0;
liEmail.OptionsTableLayoutItem.RowIndex = 1;

liAddress.OptionsTableLayoutItem.ColumnIndex = 1;
liAddress.OptionsTableLayoutItem.RowIndex = 0;
liAddress.OptionsTableLayoutItem.RowSpan = 2;

liPhoto.OptionsTableLayoutItem.ColumnIndex = 0;
liPhoto.OptionsTableLayoutItem.RowIndex = 2;

tlgPhonesFax.OptionsTableLayoutItem.ColumnIndex = 1;
tlgPhonesFax.OptionsTableLayoutItem.RowIndex = 2;

liPhone1.OptionsTableLayoutItem.ColumnIndex = 0;
liPhone1.OptionsTableLayoutItem.RowIndex = 0;

liPhone2.OptionsTableLayoutItem.ColumnIndex = 0;
liPhone2.OptionsTableLayoutItem.RowIndex = 1;

liPhone1Active.OptionsTableLayoutItem.ColumnIndex = 1;
liPhone1Active.OptionsTableLayoutItem.RowIndex = 0;

liPhone2Active.OptionsTableLayoutItem.ColumnIndex = 1;
liPhone2Active.OptionsTableLayoutItem.RowIndex = 1;

lgButtons.OptionsTableLayoutItem.ColumnIndex = 0;
lgButtons.OptionsTableLayoutItem.ColumnSpan = 2;
lgButtons.OptionsTableLayoutItem.RowIndex = 3;

liBtnOK.OptionsTableLayoutItem.ColumnIndex = 1;
liBtnOK.OptionsTableLayoutItem.RowIndex = 0;

liBtnCancel.OptionsTableLayoutItem.ColumnIndex = 2;
liBtnCancel.OptionsTableLayoutItem.RowIndex = 0;

Imports DevExpress.XtraEditors
Imports DevExpress.XtraLayout

Dim editorPhone1 As ButtonEdit = New ButtonEdit() With {.Name = "editorPhone1"}
Dim editorPhoto As PictureEdit = New PictureEdit() With {.Name = "editorPhoto"}
Dim editorAddress As MemoEdit = New MemoEdit() With {.Name = "editorAddress"}
Dim editorEmail As ButtonEdit = New ButtonEdit() With {.Name = "editorEmail"}
Dim editorName As TextEdit = New TextEdit() With {.Name = "editorName"}
Dim btnCancel As SimpleButton = New SimpleButton() With {.Name = "btnCancel", .Text = "Cancel"}
Dim btnOK As SimpleButton = New SimpleButton() With {.Name = "btnOK", .Text = "OK"}
Dim checkBoxPhone2Active As CheckEdit = New CheckEdit() With {.Name = "checkBoxPhone2Active", .Text = "Active"}
Dim checkBoxPhone1Active As CheckEdit = New CheckEdit() With {.Name = "checkBoxPhone1Active", .Text = "Active"}
Dim editorPhone2 As ButtonEdit = New ButtonEdit() With {.Name = "editorPhone2"}
Dim editorFax As ButtonEdit = New ButtonEdit() With {.Name = "editorFax"}
Dim editorNotes As MemoEdit = New MemoEdit() With {.Name = "editorNotes"}

Dim lc As LayoutControl = New LayoutControl()
lc.Dock = DockStyle.Fill
Me.Controls.Add(lc)

' Enable Table Layout for the Root group
lc.Root.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table
Dim col1Root As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Percent, .Width = 50.0R}
Dim col2Root As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Percent, .Width = 50.0R}
Dim row1Root As RowDefinition = New RowDefinition() With {.SizeType = SizeType.AutoSize}
Dim row2Root As RowDefinition = New RowDefinition() With {.SizeType = SizeType.AutoSize}
Dim row3Root As RowDefinition = New RowDefinition() With {.SizeType = SizeType.Percent, .Height = 100.0R}
Dim row4Root As RowDefinition = New RowDefinition() With {.SizeType = SizeType.AutoSize}
lc.Root.OptionsTableLayoutGroup.ColumnDefinitions.Clear()
lc.Root.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(New ColumnDefinition() {col1Root, col2Root})
lc.Root.OptionsTableLayoutGroup.RowDefinitions.Clear()
lc.Root.OptionsTableLayoutGroup.RowDefinitions.AddRange(New RowDefinition() {row1Root, row2Root, row3Root, row4Root})

'The Root group's immediate items:
Dim liName As LayoutControlItem = lc.Root.AddItem("Name", editorName)
liName.Name = "liName"
Dim liEmail As LayoutControlItem = lc.Root.AddItem("E-mail", editorEmail)
liEmail.Name = "liEmail"
Dim liAddress As LayoutControlItem = lc.Root.AddItem("Address", editorAddress)
liAddress.Name = "liAddress"
Dim liPhoto As LayoutControlItem = lc.Root.AddItem("Photo", editorPhoto)
liPhoto.Name = "liPhoto"
'Tabbed group
Dim tlgPhonesFax As TabbedControlGroup = lc.Root.AddTabbedGroup()
tlgPhonesFax.Name = "tlgPhonesFax"
'Borderless 'Buttons' group 
Dim lgButtons As LayoutControlGroup = lc.Root.AddGroup()
lgButtons.GroupBordersVisible = False

'Add two groups (Phones and Fax) as tabs to the tlgPhonesFax tabbed group
Dim lgPhones As LayoutControlGroup = tlgPhonesFax.AddTabPage("Phones")
lgPhones.Name = "lgPhones"
Dim lgFax As LayoutControlGroup = tlgPhonesFax.AddTabPage("Fax")
lgFax.Name = "lgFax"
tlgPhonesFax.SelectedTabPageIndex = 0

'Enable Table Layout for the Phones group
lgPhones.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table
Dim col1InGroupPhones As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Percent, .Width = 50.0R}
Dim col2InGroupPhones As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Percent, .Width = 50.0R}
Dim row1InGroupPhones As RowDefinition = New RowDefinition() With {.SizeType = SizeType.AutoSize}
Dim row2InGroupPhones As RowDefinition = New RowDefinition() With {.SizeType = SizeType.Percent, .Height = 100.0R}
lgPhones.OptionsTableLayoutGroup.ColumnDefinitions.Clear()
lgPhones.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(New ColumnDefinition() {col1InGroupPhones, col2InGroupPhones})
lgPhones.OptionsTableLayoutGroup.RowDefinitions.Clear()
lgPhones.OptionsTableLayoutGroup.RowDefinitions.AddRange(New RowDefinition() {row1InGroupPhones, row2InGroupPhones})

'Add items to the Phones group
Dim liPhone1 As LayoutControlItem = lgPhones.AddItem("Phone 1", editorPhone1)
liPhone1.Name = "liPhone1"
Dim liPhone2 As LayoutControlItem = lgPhones.AddItem("Phone 2", editorPhone2)
liPhone2.Name = "liPhone2"
Dim liPhone1Active As LayoutControlItem = lgPhones.AddItem("Active", checkBoxPhone1Active)
liPhone1Active.Name = "liPhone1Active"
Dim liPhone2Active As LayoutControlItem = lgPhones.AddItem("Active", checkBoxPhone2Active)
liPhone2Active.Name = "liPhone2Active"
Dim liFax As LayoutControlItem = lgFax.AddItem("Fax", editorFax)
liFax.Name = "liFax"

'Enable Table Layout for the Buttons group
lgButtons.LayoutMode = DevExpress.XtraLayout.Utils.LayoutMode.Table
Dim col1InGroupButtons As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Percent, .Width = 100.0R}
Dim col2InGroupButtons As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Absolute, .Width = 120.0R}
Dim col3InGroupButtons As ColumnDefinition = New ColumnDefinition() With {.SizeType = SizeType.Absolute, .Width = 120.0R}
Dim row1InGroupButtons As RowDefinition = New RowDefinition() With {.SizeType = SizeType.AutoSize}
lgButtons.OptionsTableLayoutGroup.ColumnDefinitions.Clear()
lgButtons.OptionsTableLayoutGroup.ColumnDefinitions.AddRange(New ColumnDefinition() {col1InGroupButtons, col2InGroupButtons, col3InGroupButtons})
lgButtons.OptionsTableLayoutGroup.RowDefinitions.Clear()
lgButtons.OptionsTableLayoutGroup.RowDefinitions.AddRange(New RowDefinition() {row1InGroupButtons})
'Add items to the Buttons group
Dim liBtnOK As LayoutControlItem = lgButtons.AddItem("btnOK", btnOK)
liBtnOK.Name = "liBtnOK"
Dim liBtnCancel As LayoutControlItem = lgButtons.AddItem("btnCancel", btnCancel)
liBtnCancel.Name = "liBtnCancel"

'Specify positions for all layout items within their parent groups
liName.OptionsTableLayoutItem.ColumnIndex = 0
liName.OptionsTableLayoutItem.RowIndex = 0
liEmail.OptionsTableLayoutItem.ColumnIndex = 0
liEmail.OptionsTableLayoutItem.RowIndex = 1
liAddress.OptionsTableLayoutItem.ColumnIndex = 1
liAddress.OptionsTableLayoutItem.RowIndex = 0
liAddress.OptionsTableLayoutItem.RowSpan = 2
liPhoto.OptionsTableLayoutItem.ColumnIndex = 0
liPhoto.OptionsTableLayoutItem.RowIndex = 2
tlgPhonesFax.OptionsTableLayoutItem.ColumnIndex = 1
tlgPhonesFax.OptionsTableLayoutItem.RowIndex = 2
liPhone1.OptionsTableLayoutItem.ColumnIndex = 0
liPhone1.OptionsTableLayoutItem.RowIndex = 0
liPhone2.OptionsTableLayoutItem.ColumnIndex = 0
liPhone2.OptionsTableLayoutItem.RowIndex = 1
liPhone1Active.OptionsTableLayoutItem.ColumnIndex = 1
liPhone1Active.OptionsTableLayoutItem.RowIndex = 0
liPhone2Active.OptionsTableLayoutItem.ColumnIndex = 1
liPhone2Active.OptionsTableLayoutItem.RowIndex = 1
lgButtons.OptionsTableLayoutItem.ColumnIndex = 0
lgButtons.OptionsTableLayoutItem.ColumnSpan = 2
lgButtons.OptionsTableLayoutItem.RowIndex = 3
liBtnOK.OptionsTableLayoutItem.ColumnIndex = 1
liBtnOK.OptionsTableLayoutItem.RowIndex = 0
liBtnCancel.OptionsTableLayoutItem.ColumnIndex = 2
liBtnCancel.OptionsTableLayoutItem.RowIndex = 0