# Group Collapsing

## Content



Ribbons are control-rich UIs that take up a good amount of screen real estate in comparison to menu applications. By default, the ribbon groups collapse left to right one by one individually into small rectangles. Also, in place of their constituent controls, these rectangles display a drop-down arrow, which when clicked shows the controls from the collapsed group in the dropdown menu.

![Resizing ribbon app with mouse](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/ribbon-collapseindex-default.gif)

To let you efficiently use the space while horizontally resizing a form containing a Ribbon, the Ribbon control provides the [CollapseIndex](/componentone/docs/win/online-ribbon/) property in the [RibbonGroup](/componentone/docs/win/online-ribbon/) class. This property sets the priority index of the groups for resizing and collapsing. The higher the number, the lower the priority for resizing.

Let's say you have controls in the right half of the ribbon that are 'less important' than some groups in the left half and want the right group to collapse first in the application. For this, you have to set the **CollapseIndex** of the Styles and Paragraph groups to a value that is higher than the CollapseIndex numbers of Clipboard and Font groups.

![Resizing ribbon app with mouse](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/ribbon-collapseindex1.gif)

Likewise, if you want to initially collapse the Font and Paragraph groups while resizing the ribbon, you have to set their Collapse Indices to a values much higher than for the other groups, Clipboard and Styles.

![Resizing ribbon app with mouse](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/ribbon-collapseindex2.gif)

So, now you can easily collapse or resize groups as per the priority you want to set in the Ribbon control using the CollaspeIndex property.

### Resizing Gallery in Expanded Ribbon

The <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/docs/win/online-ribbon/\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-ribbon/\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="RibbonGallery" data-popup-theme="ui-tooltip-green qtip-green">RibbonGallery</span> class provides the [Expanded](/componentone/docs/win/online-ribbon/) property to indicate whether the gallery can appear expanded or collapsed within a group in the Ribbon. The gallery normally appears as expanded as the **Expanded** property is set to **True** by default. However, you can display the collapsed gallery in Ribbon by setting the **Expanded** property to **False**.

You can set the minimum number of items to be displayed in the expanded gallery by using the [MinVisibleItems](/componentone/docs/win/online-ribbon/) property of **RibbonGallery** class. Let's say you want to view at least three items in the gallery, then you can set the value of the MinVisibleItems property to 3. But note that the value of the MinVisibleItems property should be greater than zero but less than the value of the [VisibleItems](/componentone/docs/win/online-ribbon/) property.

The GIF below shows how the **MinVisibleItems** property works in Ribbon Gallery. Here, we have set the values of MinVisibleItems property and VisibleItems property to 3 and 5 respectively.

![Resizing ribbon app with mouse](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/resize-gallery-expand-ribbon.gif)

The **MinVisibleItems** property can be set directly via the **Properties** window as well as using the code. Let's see how to configure this property using the following code:

```csharp
// Set the minimum gallery visible items in ribbon's expanded mode
ribbonGallery1.MinVisibleItems = 3;
// Set the number of visible items in ribbon's expanded mode
ribbonGallery1.VisibleItems = 5;
```

To support the **MinVisibleItems** property of the RibbonGallery control, the [IGalleryItemsPanel](/componentone/docs/win/online-ribbon/) interface provides the [GetItemWidth](/componentone/docs/win/online-ribbon/) and [SetVisibleItems](/componentone/docs/win/online-ribbon/) methods. The **GetItemWidth** method gets the width of an item in the gallery with child spacing, while the **SetVisibleItems** method sets the number of actually visible items in the gallery.