Design Office-Inspired Simplified Ribbon in WinForms
Tags: winforms, dotnet, csharp, productivity
Published: 2021-01-29 09:57:07

---
title: Design Office-Inspired Simplified Ribbon in WinForms
published: true
date: 2021-01-28 11:00:04 UTC
tags: winforms, dotnet, csharp, productivity
canonical_url: https://www.syncfusion.com/blogs/post/design-office-inspired-simplified-ribbon-in-winforms.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Design-Office-Inspired-Simplified-Ribbon-in-WinForms-1-672x372.png
---

The [Syncfusion WinForms Ribbon control](https://www.syncfusion.com/winforms-ui-controls/ribbon) is now available with a simplified layout. It displays the most-used ribbon commands in a single-line interface, allowing more screen space for compact viewing of the content.

For the best user experience, the other ribbon commands can be placed in the overflow menu. You can switch back and forth between the simplified and the normal layouts using the minimize button. This feature became available in our [Essential Studio 2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download).

## Why should you prefer the simplified ribbon layout?

The simplified layout:

- Provides a touch-friendly design.
- Shows the ribbon items in a single line, providing more vertical space.
- Allows users to choose ribbon items with less distraction than the normal layout.
- Shows the exact commands that the user wants, so it’s simple and straightforward to use.

In this blog, we will look at the new simplified ribbon layout feature in the WinForms Ribbon control and the steps to enable its custom features.

## Setting up the simplified ribbon layout

Follow these steps to set up the simplified layout in the WinForms Ribbon control:

### Step 1: Enable the simplified layout mode in Ribbon control

WinForms Ribbon control renders its items in simplified layout when the [**LayoutMode**](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonControlAdv.html#Syncfusion_Windows_Forms_Tools_RibbonControlAdv_LayoutMode) property is set to [Simplified](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonLayoutMode.html#Syncfusion_Windows_Forms_Tools_RibbonLayoutMode_Simplified). The user can switch between simplified and normal layouts at runtime using the built-in minimize button located in the lower-right corner of the Ribbon control. To enable the minimize button, set the [**EnableSimplifiedLayoutMode**](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonControlAdv.html#Syncfusion_Windows_Forms_Tools_RibbonControlAdv_EnableSimplifiedLayoutMode) property to  **true** as shown in the code example.

```csharp
private Syncfusion.Windows.Forms.Tools.RibbonControlAdv ribbonControlAdv1;

 this.ribbonControlAdv1 = new RibbonControlAdv();
 this.ribbonControlAdv1.LayoutMode = RibbonLayoutMode.Simplified; 
this.ribbonControlAdv1.EnableSimplifiedLayoutMode = true;

 this.Controls.Add(ribbonControlAdv1);
```

Refer to the following GIF image.

![Switching between normal and simplified layouts](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Switching-between-normal-and-simplified-layouts.gif)<figcaption>Switching between normal and simplified layouts</figcaption>

### Step 2: Set up items for different layouts

Moving ahead, the Ribbon items can be either set as the same among different layouts or can be made visible only in a particular layout by using the [**SetDisplayMode**](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonControlAdv.html#Syncfusion_Windows_Forms_Tools_RibbonControlAdv_SetDisplayMode_System_ComponentModel_Component_Syncfusion_Windows_Forms_Tools_RibbonItemDisplayMode_) function in the Ribbon.

By default, the items will be displayed in both normal and simplified layouts. The [**RibbonItemDisplayMode**](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonItemDisplayMode.html) is a flag of enumeration type that contains the following values:

- Normal: Displays items in normal layout.
- Simplified: Displays items in simplified layout.
- OverflowMenu: Displays items inside the OverflowMenu when the simplified layout is enabled.

Also, the [RibbonItemDisplayMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonItemDisplayMode.html) enumeration property allows the following value combinations:

- Normal, Simplified: Displays items in both normal and simplified layout.
- Normal, OverflowMenu: Displays items in both normal layout and inside the overflow menu during the simplified layout.
- Simplified, OverflowMenu: Displays items in simplified layout.
- Normal, Simplified, OverflowMenu: Displays items in both normal and simplified layouts along with the overflow menu.

Refer to the following code examples.

```csharp
// To display an item only in simplified layout.
 ToolStripButton pasteButton = new System.Windows.Forms.ToolStripButton();
 pasteButton.Text = "Paste";
 ribbonControlAdv1.SetDisplayMode(pasteButton, RibbonItemDisplayMode.Simplified);
 
 // To display an item only in normal layout.
 ToolStripButton boldButton = new System.Windows.Forms.ToolStripButton();
 boldButton.Text = "Bold";
 ribbonControlAdv1.SetDisplayMode(boldButton, RibbonItemDisplayMode.Normal);
 
 // To display an item in normal layout and inside an overflow menu during the simplified layout.
 ToolStripButton underlineButton = new System.Windows.Forms.ToolStripButton();
 underlineButton.Text = "Underline";
 ribbonControlAdv1.SetDisplayMode(underlineButton, RibbonItemDisplayMode.Normal | RibbonItemDisplayMode.OverflowMenu);
 
 // To display an item both in normal and simplified layout by default.
 ToolStripButton italicButton = new System.Windows.Forms.ToolStripButton();
 italicButton.Text = "Italic";
```

### Step 3: Setting images for Ribbon items

For **Normal** layout mode, images will be loaded from the item’s image property and their size values can be set using the [SetSmallItemImage](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripExImageProvider.html#Syncfusion_Windows_Forms_Tools_ToolStripExImageProvider_SetSmallItemImage_System_Object_System_Int32_) and [SetLargeItemImage](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripExImageProvider.html#Syncfusion_Windows_Forms_Tools_ToolStripExImageProvider_SetLargeItemImage_System_Object_System_Int32_) functions of the [ToolStripExImageProvider](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripExImageProvider.html) class. So, the images will fit inside the Ribbon items based on the display style and image scaling.

The **simplified** layout mode uses the 20 \* 20 image size for the Ribbon items as standard. You can also set the size by using the [SetMediumItemImage](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripExImageProvider.html#Syncfusion_Windows_Forms_Tools_ToolStripExImageProvider_SetMediumItemImage_System_Object_System_Int32_) function in the [ToolStripExImageProvider](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripExImageProvider.html) class like in the following code.

```csharp
ToolStripButton pasteButton = new System.Windows.Forms.ToolStripButton();
 pasteButton.Text = "Paste";
 toolStripEx1.Items.Add(pasteButton);
 
 // Add image for the Paste button for simplified layout to image list.
 ImageListAdv imageListAdv1 = new ImageListAdv(this.components);
 imageListAdv1.Images.Add(Image.FromFile("..//..//Images/Medium Icons/Paste20.png"));
 
 ToolStripExImageProvider toolStripExImageProvider1 = new ToolStripExImageProvider(toolStripEx1);
 // Setting image list to the MediumImageList for the toolStripEx1.
 toolStripExImageProvider1.MediumImageList = imageListAdv1;
 toolStripExImageProvider1.SetMediumItemImage(pasteButton, 0);
```

Refer to the following screenshot.

![Simplified layout of Ribbon with medium size images](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Simplified-layout-of-Ribbon-with-medium-size-images.png)<figcaption>Simplified layout of Ribbon with medium size images</figcaption>

### Step 4: Add a new RibbonTab or RibbonBar

The Ribbon control allows you to customize the Ribbon and its items through the QAT (quick access toolbar) window, where users can add the Ribbon items to a new [ToolStripTabItem](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripTabItem.html) or [ToolStripEx](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripEx.html) class. The newly added [ToolStripTabItem](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripTabItem.html) or [ToolStripEx](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripEx.html) will only be visible in the layout in which the items were added originally.

In the following example, the [LayoutMode](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.RibbonControlAdv.html#Syncfusion_Windows_Forms_Tools_RibbonControlAdv_LayoutMode) is set to **Simplified** and a new [ToolStripTabItem](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Tools.ToolStripTabItem.html) named **Folder** is created and added using the QAT window. This tab will now be visible only in the simplified layout and not in the normal layout that is the default behavior.

Refer to the following screenshots.

![Simplified layout with newly added Folder tab](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Simplified-layout-with-newly-added-Folder-tab.png)<figcaption>Simplified layout with newly added Folder tab</figcaption>

![Normal layout without the newly added Folder tab](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Normal-layout-without-the-newly-added-Folder-tab.png)<figcaption>Normal layout without the newly added Folder tab</figcaption>

### Step 5: Add new items to the QAT

The Ribbon control also allows you to add items to the QAT with the help of the QAT window or through the context menu shortcut. The items added in the normal or simplified layout will always be visible even when switching between layouts.

In the following reference image, the LayoutMode is set to **Simplified** and the **Bold** item was added to the QAT through the context menu. This item will now be constantly visible in both normal and simplified layouts.

![Simplified layout with the newly added Bold item](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Simplified-layout-with-the-newly-added-Bold-item.png)<figcaption>Simplified layout with the newly added Bold item</figcaption>

![Normal layout with the newly added Bold item](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Normal-layout-with-the-newly-added-Bold-item.png)<figcaption>Normal layout with the newly added Bold item</figcaption>

### Step 6: Resize the Ribbon control

While resizing the Ribbon, when the width of the window decreases and touches the last positioned item in the Ribbon, the appropriate item will be moved inside the overflow menu automatically. The same behavior will continue for each item when the window is resized continuously.

Refer to the following .gif image.

![Resizing the Ribbon](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Resizing-the-Ribbon.gif)<figcaption>Resizing the Ribbon</figcaption>

## References

**Documentation link:** [https://help.syncfusion.com/windowsforms/ribbon/simplifiedlayout](https://help.syncfusion.com/windowsforms/ribbon/simplifiedlayout)

**Demo link:** [https://github.com/SyncfusionExamples/How-to-customize-the-simplified-layout-in-WinForms-RibbonControlAdv](https://github.com/SyncfusionExamples/How-to-customize-the-simplified-layout-in-WinForms-RibbonControlAdv)

## Conclusion

Thanks for reading! In this blog, we have looked at the newly introduced simplified layout and how to enable its custom features in the Syncfusion WinForms [Ribbon control](https://www.syncfusion.com/winforms-ui-controls/ribbon). These features will provide different UI layout options and they are available in our [Essential Studio 2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download).

For existing customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features.

If you wish to send us feedback or ask any questions, please use the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/winforms). We are always happy to assist you!

If you like this blog post, we think you’ll like the following blog posts, too:

- [Why Should You Integrate Syncfusion WinForms Spell Checker into Your Text Editor?](https://dev.to/syncfusion/why-should-you-integrate-syncfusion-winforms-spell-checker-into-your-text-editor-2akm)
- [An Easy Way to Handle Images in Different DPIs in WinForms](https://dev.to/kartik110895/an-easy-way-to-handle-images-in-different-dpis-in-winforms-50lp-temp-slug-1555781)
- [How to Use Icon Fonts in WinForms (Windows Forms) Applications](https://www.syncfusion.com/blogs/post/how-to-use-icon-fonts-in-winforms-windows-forms-applications.aspx)