How to Add a C# .NET Ribbon Control to Your WinForms App

A Ribbon interface is considered to be more user-friendly than traditional menus and toolbars because it allows commands to be more easily discovered by users.

• The most commonly used commands can be centralized to a single "Home" tab, which the user will most often see
• Less commonly used commands can remain easily found but yet not clutter the screen on secondary tabs
• Grouping commands by similar functions allow for a beautifully organized application

This blog demonstrates how to build a Ribbon UI for a .NET desktop Windows Forms application using Visual Studio 2022, .NET 8, and the ComponentOne Ribbon control. Plus, we share some key design tips to help you build the best ribbon UI for your application. Check out the video below to follow along:

Ready to Try it Out? Download ComponentOne Today!

Download the .NET Ribbon Package

Begin by opening or creating a .NET 8 Windows Forms application in Visual Studio (a .NET Framework version also works).

Open the NuGet Package Manager and install the C1.Win.Ribbon package to your application. Make sure to take the latest package version, regardless of which version of .NET or .NET Framework you use. This ribbon package uses multi-targeting to support every version of .NET 4.6.2 and higher.

Alternatively, you can run the following NuGet script:

> dotnet add package C1.Win.Ribbon

Add the .NET Ribbon to Your Form

Open your Form in design view, and you should now see a few new controls in your toolbox, including C1Ribbon, C1BackstageView, and C1StatusBar. To begin, drag and drop the C1Ribbon control to your form.

Notice the ribbon automatically docks to the top of the form, as this is the most standard design approach for ribbon UIs.

Set Up Ribbon Tabs and Groups

What makes the ComponentOne Ribbon control a really fun control to work with is that you can design the ribbon completely on the form without writing any code. Begin by creating tabs and groups through the context (>>) actions menu. The top menu allows you to add tabs.

You can edit the ribbon labels directly on the design surface to easily rename your tabs and groups.

TIP: Name the first tab "Home" and place the most commonly used commands here.

The tab actions menu allows you to add groups.

Add Controls to the Ribbon

Select a group to begin adding controls (ribbon elements). The C1Ribbon supports a bunch of different built-in elements, including buttons, textboxes, dropdowns, trackbars, color pickers, galleries, and more. These work similarly to C# .NET and VB.NET controls of the same names. Let’s work with a button, for example.

Add a button to any ribbon group. You can modify the visible text directly on the designer. You can select the icon through the context menu by clicking the “Change Image” button.

Since C1Ribbon supports collapsing and resizing automatically, you can provide multiple-sized icons and allow the ribbon to best display the buttons depending on how much space is available.

• If the form is resized to a smaller size, the ribbon group will automatically hide labels and downsize large buttons (32x32) to small buttons (16x16), depending on the available space
• If the ribbon is collapsed into the “simplified” view, the button labels will be hidden, and the 20x20 icons will be used

Tip: To support all button sizes, it’s recommended to set the 32x32, 20x20, and 16x16 icons. To force a large button, you can just set the 32x32 icon.

The ComponentOne Ribbon library includes hundreds of icons you can choose from (royalty-free). It also supports Windows 11 font-based icons; you can even add custom images.

Tips:

• When working with more complex Ribbon elements, such as Galleries, look for the “Items” property to manage its children. This is also useful for managing these items in C# and VB.NET code
• Don’t forget to set each ribbon group’s icon, which gets displayed when the group is collapsed during form resizing

A completed ribbon UI with collapsing behavior

Configure the Simplified Ribbon

At runtime, users may collapse the ribbon to display a simplified version, which is a different behavior than when the form is resized.

You can restrict or initialize the simplified ribbon by setting the ViewMode and AllowSimplifiedView properties.

// initialize as simplified and restrict user from expanding
c1Ribbon1.ViewMode = ViewMode.Simplified;
c1Ribbon1.AllowSimplifiedView = false;

You can also configure which buttons are displayed by setting each element’s ShowInSimplified property.

Configure the QAT - Quick Access Toolbar

Users can customize the Quick Access Toolbar (QAT), located above or below the ribbon, to suit their particular style and need by choosing which commands to display. Commands can be repeated in the QAT without repeating functionality in your C# event handlers.

Every button can be added to the QAT at runtime by default. You can restrict this by setting any element's CanBeAddedToQAT property to false. To display a button in the QAT initially, you can set its ShowInQAT property to true. To disable the QAT completely, you can set the Qat.Enabled property to false.

Tips:

• Use the QatItemNames property to preserve the customized toolbar between runs of your application
• The QAT is best utilized with a C1RibbonForm (see next topic)

Set the Ribbon Form Border and Status Bar

One of the best and sometimes overlooked features of C1Ribbon is the C1RibbonForm class. This class extends the standard .NET Form enabling the C1Ribbon control to fully integrate itself and the QAT with the form header.

See the result before and after converting the Form to C1RibbonForm:

Tip: Use the C1StatusBar control to complete your form by displaying additional elements along the bottom - such as labels for application status and trackbars for zooming.

Set the Ribbon Backstage View

The final step is integrating the Ribbon UI with the backstage view element. This is the term used to describe the “File” menu system in Office 365 applications.

Drag a C1BackstageView component to the form, which will be added to your component tray (the area below the form for non-UI controls). Open its smart tag and attach it to the C1Ribbon on your form.

Then, set the Text and/or IconSet of the C1BackstageView to determine what displays on the ribbon UI to activate the view. For example, just set the C1BackstageView Text value to “File”.

Tips: 

• To edit items on the right panel, first, add a BackstageViewTab to the left panel, and then you can modify its Items that will display on the right
• For a simpler application menu, you can just set the ApplicationMenu.LeftPanelItems and ApplicationMenu.RightPanelItems to display a shorter list of actions. This is the older Windows 7 style, but hey - it works

Conclusion

Ribbons contain more visual cues than traditional menus, where all commands are mostly text-based. In general, Ribbons increase the visual appeal of any application that uses them. You can design your entire UI without writing any code using a C# .NET ribbon control like C1Ribbon. Just add your custom business logic within the button click events as you would with any .NET button UI.

You can download the C1Ribbon control as part of the WinForms Edition and try it out for 30 days. The quickest way to get started is to download our .NET 8 WordPad sample on GitHub. Just unzip, build, and run!