The goal of the design time experience is to make it quick and easy to setup the ribbon. Here is my first attempt at making it simple to add new tabs, groups and items.
When you drag and drop a ribbon onto a form you get the a bare ribbon with no tabs. However, you do get a design time element on the tabs area called ‘Tab’ that can be pressed to add a new tab instance.
Press the ‘Tab’ element a couple of times and you get the following.
Inside each tab is a ‘Group’ element. Click it twice to get two groups.
Inside each group is a ‘New’ element. When pressed this presents a context menu so you can select the type of element to add into the group. Here you can see the three choices.
We select the ‘Triple’ which causes a new triple group container to be added and populated with three button instances.
I decided that it made sense to automatically populate the group containers with items rather than add them empty. You’re not going to add a container without then adding items inside so it makes sense to give you some to start with. You can always delete ones you don’t need.
For the second group we will select the ‘Lines’ option.
You will notice that the triple container does not have a design element inside it. This is because the triple container can only have three items and three are present. But if you removed one it would then show a design element making it easy to add an item.
The lines container can have any number of items and so you will always see the ‘Item’ design element inside it. Clicking the element gives a context menu that can be seen below.
Selecting the ‘Cluster’ option creates a group cluster populated with two items and an ‘Item’ design element. As the cluster can have any number of contained buttons this element is always present.
Having all these design element makes it quick to create the contents of the ribbon, but make it hard to visualize how the ribbon will appear at runtime. So the ribbon has two display modes, the default that shows all the design elements and another that hides them. You can use the smart tag for the control to turn off the design elements.
When you turn them off you can see how the ribbon will appear at runtime.
I’m not sure about the colors and text used on the design elements, do they look distinct enough that it is easy to see what is happening? If you have any feedback on how it could be improved then feel free to pipe up!
