Simplified Layout in Windows Forms Ribbon (RibbonControlAdv)

29 Apr 20216 minutes to read

The RibbonControlAdv is available in simplified layout which is designed to display the most commonly 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 are located under the overflow menu. It also provides option to switch back and forth between the simplified and the normal layout using the minimize button.

The LayoutMode enumeration property provides an option to load the Ribbon control in simplified layout. It contains the following options like:

• Normal - The Ribbon items are arranged in the standard layout. This is the default value.
• Simplified - The Ribbon items are arranged in the simplified layout.

C#

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

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

 this.Controls.Add(ribbonControlAdv1);

Switching between simplified and normal layouts

The RibbonControlAdv allows to switch between simplified and normal layouts at runtime using the Ribbon minimize button located in the lower right corner of the Ribbon. To enable this option, set the EnableSimplifiedLayoutMode property to True. By default, its value is False.

C#

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

 this.ribbonControlAdv1 = new RibbonControlAdv();
 this.ribbonControlAdv1.EnableSimplifiedLayoutMode = true;

 this.Controls.Add(ribbonControlAdv1);

Visibility of the Ribbon items between normal and simplified layout

The Ribbon items can be set common between different layouts or can be made visible only in a particular layout using the SetDisplayMode function in the RibbonControlAdv. By default, items will be displayed in both normal and simplified layout. The SetDisplayMode function accepts two parameters, one is the item for which the display mode needs to be set and the second is the RibbonItemDisplayMode value. The SetDisplayMode function is of ExtenderProviderProperty which also enables us to set the display mode in the designer for the Ribbon items. The RibbonItemDisplayMode is a flag enumeration type that contains the following values.

• Normal - The item will be displayed only in the normal layout.
• Simplified - The item will be displayed only in the simplified layout.
• OverflowMenu - The item will be displayed only inside the overflow menu when simplified layout is enabled.

Also, the RibbonItemDisplayMode enumeration allows the following value combinations as well.

• Normal, Simplified – The item will be displayed in both normal and simplified layout.
• Normal, OverflowMenu – The item will be displayed in both normal layout and inside overflow menu during simplified layout.
• Simplified, OverflowMenu – The item will be displayed in simplified layout.
• Normal, Simplified, OverflowMenu – The item will be displayed in both normal and simplified layout.

In the below code snippet, the RibbonItemDisplayMode for Paste option is set to “Simplified” in the SetDisplayMode function, so it will only be displayed only in the simplified layout. The RibbonItemDisplayMode for Underline option is set to “Normal, Overflow”, so it will be displayed in the normal layout and will also be displayed inside the overflow menu in the simplified layout.

C#

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

Setting image for Ribbon items

For “Normal” layout mode, the images from the item’s image property and the images set using the SetSmallItemImage and SetLargeItemImage functions of ToolStripExImageProvider are used inside the Ribbon items based on the display style and image scaling. However, the “simplified” layout mode uses 20 * 20 image size for the Ribbon items as standard and it can be set using the SetMediumItemImage function in ToolStripExImageProvider.

C#

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);

The following screenshot shows the simplified layout within the Ribbon control.

NOTE

View sample in GitHub.

Customizing the Ribbon during runtime through the QAT window

The RibbonControlAdv allows to customize the Ribbon and Ribbon items through the QAT window, where user can add the Ribbon items to a new ToolStripTabItem or ToolStripEx. The newly added ToolStripTabItem or ToolStripEx will only be visible in the respective layout in which items were added originally. In the below example, the LayoutMode is set as “Simplified” and a new ToolStripTabItem 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 which is the default behavior.

Normal layout

Simplified layout

In the meantime, the RibbonControlAdv also allows to add items to the Quick Access Toolbar (QAT) with the help of the QAT window or through the context menu shortcut. Items added during normal or simplified layout will always be visible even when switching between layouts. In the below example, the LayoutMode is set as “Simplified” and the Paste item is added to the QAT through the context menu. This item will now be constantly visible in both normal and simplified layouts.

Normal layout

Simplified layout

Resizing Ribbon in simplified layout

While re-sizing the RibbonControlAdv, 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.