Designer Support

Ribbon has designer support for both Visual Studio and Expression Blend. This enhanced functionality makes it much easier to quickly create your ribbon user interfaces.

General Notes

All public properties on classes used in this product are categorized and have descriptions assigned to them that help you out in the Properties windows for both Visual Studio and Blend.

Visual Studio Designer Interaction

Task Panes

Whenever you select the ribbon or a ribbon control in the designer, a task pane adorner appears in the upper right area of the control. By clicking the adorner, a task pane popup appears, providing quick access for configuring the control.

Task panes are different based on the control that is selected. For instance, in the screenshot above, the SplitButton task pane allows for entry of the control's label, images (via the handy image pickers), key and screen tip data, and more.

Almost all of the task panes have little "i" characters with a circle around them (see the screenshot below within the red circle). If you hover over these information icons with your mouse, helpful tooltips appear that explain more about the controls next to them.

The Ribbon's task pane allows for one-click addition of new tabs, QAT items, and more. You can navigate directly to a tab by clicking on it in the task pane's tabs list. All collection items can be reordered too.

The RowPanel's task pane is an excellent example of why task panes are so handy. Not only does it allow you to quickly add child controls, visually display and reorder them for the default two-row layout, it does the same for the three-row layout as well. You can easily configure your RowPanel controls in seconds using the task pane.

The StackPanel's task pane displays a preview of how parent Group variant sizes affect the layout of its child items based on its current settings.

Use the Tab's task pane to not only configure the Tab itself but optionally quickly define its child Group variant size transitions that should take place as available width decreases. Things like this that can be difficult to write in XAML are easy to configure in a task pane.

Changing the Selected Tab

The Ribbon. SelectedTab property in the Properties window has a special drop-down list that allows for selection of a tab within the Ribbon. This allows you to jump directly to a specific tab clicking on it in the list.

But actually the easier way to change the currently selected tab is to simply click on another tab in the designer. The tab you click on will become selected both in the ribbon and in the designer.

Moving Controls Within the Ribbon

Many ribbon controls have a four way arrow adorner that appears near their upper left corner when they are selected in the designer.

By clicking on this adorner and dragging it, you can move the control around within the ribbon. If there is a Group on another Tab, you can even hover over the Tab for a brief period of time and then the selected Tab will switch and the control will be dropped in the new Tab.

Groups can be moved to any Tab by hovering over the target Tab for a brief period of time. Tabs can be reordered via dragging them to a new location as well.

Modifying the Ribbon UI Using the Property Grid

The property grid is very flexible and we've engineered Ribbon so that a lot of the Ribbon can be designed via the property grid and its various collection editor dialogs.

Toolbox Icons

This product's installer automatically adds appropriate control icons into the Visual Studio toolbox under a toolbox group for the product.

Expression Blend Designer Interaction

Changing the Selected Tab

The Ribbon.SelectedTab property in the Properties window has a special drop-down list that allows for selection of a tab within the Ribbon. This allows you to jump directly to a specific tab by clicking on it in the list.

Modifying the Ribbon UI Using the Property Grid

The property grid is very flexible and we've engineered Ribbon so that a lot of the Ribbon can be designed via the property grid and its various collection editor dialogs.