Levels of Customisation

A key point to understanding the customisations of the Ribbon is the level at which you perform the customisation.

You can apply your customisation at each of the following levels. Each of these levels corresponds to an entry in the 'Solution Elements' panel.

1. Tab Level
2. Group Level
3. Button Level
4. Command Level
5. Tab Scale Level

The top most level of your customisation will appear in the Solution Elements Panel, but any sub-elements will considered children of your customisation and will not have a node in the Solution Elements Panel.

For example, if you drag a Tab on to the design surface you will see a Solution Element under 'Tabs'. If you drag a Button onto that Tab, you will not see a solution element under 'Buttons' because it is a child of the Tab solution element. Equally if you customise an existing Tab, then again, you will see it appear under Solution Elements, but if you then drag a button onto the customised Tab, it will not appear as it's own Solution Element.

If you drag a Button onto an existing standard Tab, you will see a Button element under 'Buttons in the Solution Elements because the parent is not already part of the solution elements.

If you customise a Group or add a new Group - it is similar to the Tab scenario, but the top level is at the Group Level:

If you try and customise an element at a higher level where a child element is already a top level Solution Element, you will receive the following message.

Ribbon Controls

The following diagram shows you where you can drag each Ribbon Element within the Design Surface from the Toolbox.

Tabs

Tabs group buttons and are the top most container of Ribbon Customisations. Standard tabs can be moved by first Customising the Tab and then dragging it to another position.

Tab Scale

Tab Scales are used to define how the buttons change size when there is restricted width. They can be dragged to another position to change the order that a Tab scales. See http://www.develop1.net/public/post/Ribbon-Scaling-De-mystified.aspx for more information.

Groups contain Layout Sections that can contain Buttons, Fly Out Anchors and Split Buttons. Groups can be dragged around to reposition, but cannot be moved between tabs.

Buttons are associated with a Command that is run when clicked. Buttons can be moved around within Groups, into a different Group or moved to another Tab by dragging onto the Tab Title.

Note: If you move a Button from one top level solution element to another, it will no longer be part of the customisations.

A Fly Out Anchor is essentially a drop down menu that can contain Menu Sections and Menu Items. Each Menu Item acts the same as a Button.

A default Menu Section is created for you when you drop a Fly Out Anchor on a Ribbon, but you can add more using the 'Right Click' 'Add Menu Section'

Menu Items can then be added by using the 'Right Click' on the Menu Section and using 'Add Menu Item':

Fly Out Anchor buttons can be dynamically populated with Menu Sections and Items at run time using JavaScript. See http://www.develop1.net/public/post/Add-Dynamic-Menu-to-Ribbon-Button.aspx for more information.

A Split Button is a cross between a Button and a Fly Out Anchor in that it can be clicked, or a sub-item selected from it's drop down menu.

If you are customising the Ribbon Jewel, The Menu Section acts like a Menu Item Group that contains Buttons. These are shown as drop down menus when the Jewel is clicked.