Help: align ribbon buttons and labels on the tabs

Align Controls on Tabs

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.