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

Column

Controls inside column are aligned into single line vertically.

Row

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"
  .Name = TAB_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.

 .AddSeparator
	

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
    .Name = BTN_REG_PAYMENTS_NEW
    .Image = "NewPayment"
    .ImageDisabled = "NewPayment.Disabled"
    .OnAction = "NewRegPayment"
    .Tooltip = "Create new payment"
   End With
                          
   With .AddButton
    .Name = BTN_REG_PAYMENTS_JORNAL
    .Image = "PaymentsJornal"
    .ImageDisabled = "PaymentsJornal.Disabled"
    .OnAction = "RegPaymentsJornal"
    .Tooltip = "Display list of payments"
   End With
                          
   With .AddButton
    .Name = BTN_REG_PAYMENTS_CALENDAR
    .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.