Align Controls on the Ribbon Tab

xlCompiler has simple technique which defines layout and order of the controls.
Controls exists inside a container. Container is a parent control used for alignment only, it has no visual representation.
Following types of containers are possible:
  • Column
  • Row
Controls inside column are aligned into single line vertically.
Controls inside row are aligned into single line horizontally.
Lets explain details on this example
Custom Ribbon
There is 2 groups of the controls aligned horizontally - Accounts and Payments. They are represented with a 2 Row objects.
Inside first row we have 2 buttons.
Code to create this part of the ribbon:
With Application.Ribbon.Tabs

With .Add
.Caption = "Accounts"

With .AddRow
With .AddButton
.Caption = "Balances"
.Name = "Btn.Balances"
.Image = "CreditCard"
.OnAction = "ShowBalance"
.Tooltip = "Display balanse on the each account"
End With

With .AddButton
.Caption = "Closed" & vbCrLf & "Accounts"
.Name = "Btn.ClosedAccounts"
.Image = "ClosedAccount"
.OnAction = "ShowClosedAccounts"
.Tooltip = "Displays list of closed accounts"
End With
.Caption = "Accounts"
End With
Every button receives Caption, Name, Tooltip and Image. OnAction property defines which procedure is called with button is pressed.
Separator between 2 groups.
Regular Payments group is implemented as a Column. Because it has 2 lines of controls aligned vertically one by one:
With .AddRow
With .AddColumn
With .AddRow
With .AddLabel
.Caption = "Regular Payments"
End With
End With
With .AddRow
With .AddButton
.Image = "NewPayment"
.ImageDisabled = "NewPayment.Disabled"
.OnAction = "NewRegPayment"
.Tooltip = "Create new payment"
End With

With .AddButton
.Image = "PaymentsJornal"
.ImageDisabled = "PaymentsJornal.Disabled"
.OnAction = "RegPaymentsJornal"
.Tooltip = "Display list of payments"
End With

With .AddButton
.Image = "Calendar"
.ImageDisabled = "CalendarDisabled"
.OnAction = "ShowRegPaymentCalendar"
.Tooltip = "Payments Calendar"
End With
End With
End With
First row in this group has Label control only. Next line has 3 small buttons without text.
As you can see - control layout is defined in a very easy table-like style.