Getting started with the Infragistics Windows Forms Ribbon

So you want to build a flexible and highly functional Windows Forms app? Present your rich functionality to your users and create the best experience when you add our Toolbar Manager to your forms! It has all the tooling to help you create Office UI inspired apps that your users will feel immediately familiar with.

Completely in tune with its name, the Toolbars manager is a component with no visual elements that boasts a whole range of toolbars and tools that it can create and manage - You have your traditional strips with tools you can drag and dock around, then there's the Task pane that is usually meant to hold some controls for content and interaction. There's a main menu tool strip, the powerful Ribbon, and even a mini toolbar to supplement your context menus. Some of those work together, while the traditional toolbar (incl. the main menu bar) is replaced by the Ribbon in modern applications - and that's exactly what we'll build in this blog.

Getting Started

To start, create a new Windows Forms application and from the Toolbox drag the Ultra Toolbars manager on the form. While it doesn't look like much has happened, you are one step away from an office-inspired app! The manager will end up in the components box below the form, and from there you can bring up the smart tag for quick settings (toolbar layout and tools can be saved and loaded in multiple ways) both in design/runtime or by the user. Selecting the ultraToolbarsManager also activates the in-place designer on the top. From here you can use the first button to create standard toolbar strips; the next one opens the Ribbon. Hit that and a familiar sight is revealed:

And of course with a single setting, the Office 2013 theme can be applied for an instant modern feel.

Adding Tools

From here you can code away your tools, manage them from the custom property pages, and sketch them in place. You have the ability to add tools to 3 areas - the tabs in the main, Quick access bar, and the caption area (which is right here on the same row as tab headers). The Toolbars manager comes with a variety of tool types from simple buttons to often-used color and font pickers to containers for other tools and embedding any .NET control. More importantly every tool gets added to a collection in the manager so they can be reused throughout and for that reason all tools have both large and small image properties. For this sample we'll add a few, but you can find the full collection of tools in the Customize command on the Manager Properties tab in Visual Studio:

Quick Access + Touch

This area holds small sized tools that are always visible. Just like the touch mode in Office 2013, we can add a state button which can toggle the built-in touch support. The toolbars manager has its own touch support - so it can work both separately or in sync with Ultra Touch Provider. You can control by the TouchEnabled property:

if (btnTouch.Checked)

{

this.ultraToolbarsManager1.TouchEnabled = Infragistics.Win.DefaultableBoolean.True;

}

else

{

this.ultraToolbarsManager1.TouchEnabled = Infragistics.Win.DefaultableBoolean.False;

}

We'll see where that code goes later on, but it will let the user trigger modes just like in an Office app with the button:

Backstage

With the Ribbon you also get an Application Menu, also referred to as the Backstage. It's the place where file menu items and options would usually be. You actually get two styles - one resembling the traditional file menu and the new style that was introduced with 0ffice 2010. You can design those in place just like the tools on the tabs, but keep in mind the two menus are actually separate menus with separate tools collections. For a modern Office-inspired app, from the properties editor under "Ribbon > File Menu Style", pick the 2010 style. Since the left part of the backstage often includes navigational tools, I can add a popup menu, select it, and add tools to it.

Code generation

Now with some tooling ready, we need to assign actions. But that's extremely easy - the Toolbars manager will also generate code snippets for you – just right click and pick the generate option and you get a listing of all available tools. Select the ones you want to handle right now and copy the code:

This way you don't need to worry about typing in that tool key right and always know what kind of tool you're dealing with from the comment. It’s a very handy feature, and all that's left for you to do is handle the click event for the tools that is actually centralized with the manager, so I'll merely go to the events section and add tool click handler and paste the code in. Naturally, click event will handle mostly button-based tools, for list ones you can handle the value changed as well. This is the first time you'll have to write code case.

Task Panes, Contextual Tabs and menus

We'll add another tab that will be contextual, which is surprisingly just like a regular tab that's only visible under certain conditions which I control. In the Ribbon properties, create a new ContextTabGroup for Images with Visibility set to false, then create two new tabs and assign them to the context group:

Note that they are still visible in design so I can add tools to them in the designer as usual. To display the contextual tab you just need to change its visibility, and since one form has a rich text editor we can handle the edit-state change event and check if image tag is in the selection:

private void ultraFormattedTextEditor1_EditStateChanged(object sender, EditStateChangedEventArgs e)

{ 

UltraFormattedTextEditor editor = sender as UltraFormattedTextEditor;

if (editor.EditInfo.GetSelectedValueAsString(false).Contains("<img"))

{

this.ultraToolbarsManager1.Ribbon.ContextualTabGroups[0].Visible = true;

}

else

{

this.ultraToolbarsManager1.Ribbon.ContextualTabGroups[0].Visible = false;

}

}

There's quite a bit more you can do with the toolbar manager as it doesn’t just control the ribbon. For example you can have a task pane toolbar with built-in navigation between panes. Task panes themselves can hold any control, for example search controls and results or a tree to provide navigation in. There's one more piece to make the experience complete - context mini toolbar. It usually supplements selection or context menu, and you can show it programmatically, but you can also display it along a context menu automatically. Hit the Design Mini Toolbar button and select the tools to add. By default this is set to appear on context menu click.

You also make a popup menu tool to replace the standard. This is quickly done through the special designer and I'll again reuse tools to make this quick. Excluding the fact that the formatted edit has a special property to control its context menu, usually you would use the toolbars manager to replace that by calling the SetContextMenuUltra method.

Loading + Saving + MDI merging

The toolbars manager can load and save configurations. There's also an option to import which, unlike load, will merely add the tools to manager without touching the layout. If you have two forms with ribbon tabs, and the first one is with exactly the same key as in the parent - these will be matched by key and when the MDI child is loaded, its tools will be automatically merged with the parent's ribbon. Users get a single ribbon experience, but child forms can override and extend functionality while code for this particular form remains enclosed in it.

Summary

You can do so much more with the toolbars manager - users can always hit the Alt button and get shortcut key tips. The Toolbars Manager will auto-generate those for you and will try to avoid collisions, but in case you really want to make this the best possible experience you can define your own. And to make the app that much better, you can add the customization provider to the form so the user can edit the ribbon. Now, at runtime the dialog will offer the ability to show, and reposition toolbars, groups and separate tools, edit their settings and even import and export preferences.

With this full-fledged Ribbon with contextual tabs and menus will truly get you going on an Office-inspired UI in no time. With a few tools, a Ribbon, and a rich text editor, we've created a very functional editor with just a few lines of code! Take a look at the app itself by downloading the sample here – I hope you enjoy!