# Collapsible Panel

RadRibbonView's dynamic layout resizing allows you to optimize the layout depending on the available space. This feature is enabled with the **RadCollapsiblePanel** (described in this article) and the [RadOrderedWrapPanel](https://www.telerik.com/winui/documentation/controls/radribbonview/layout-controls/ordered-wrap-panel).

> You can access the **RadCollapsiblePanel** control through an alias pointing to the **Telerik.UI.Xaml.Controls** namespace: `xmlns:telerik="using:Telerik.UI.Xaml.Controls"`

**RadCollapsiblePanel** behaves similarly to the UniformGrid panel. You can define the number of buttons per column (3 by default) and also the vertical spacing between them. The child buttons are ordered in columns when in **Small** and **Medium** size. Each button with **Large** size will be positioned alone in a separate column.

> tip Read the [Resizing](https://www.telerik.com/winui/documentation/controls/radribbonview/features/resizing) topic, which is tightly connected with the RadCollapsiblePanel behavior.

If there is not enough height to draw the buttons in the corresponding number of rows (buttons per column), the panel will try to order the buttons in less rows. For example, if you define the rows to be 3, but there is only space for 2 rows, then 2 rows will be used. The minimum number of rows that can be reached is 1, after this the buttons will start clipping.

> tip The height of the panel can be changed by changing the height of the RadRibbonView's content. To do this, set the **ContentHeight** property of RadRibbonView.

#### **Example 1: Setting up RadRibbonView with RadCollapsiblePanel**

```XAML
<telerik:RadRibbonView>
	<telerik:RadRibbonTab Header="Home">
		<telerik:RadRibbonGroup Header="Empty Group"/>
		<telerik:RadRibbonGroup Header="Empty Group"/>                
		<telerik:RadRibbonGroup Header="Options">
			<telerik:RadCollapsiblePanel>
				<telerik:RadRibbonButton Text="Save" 
									Size="Large" 
									CollapseToSmall="WhenGroupIsSmall"  
									CollapseToMedium="WhenGroupIsMedium" >
					<telerik:RadRibbonButton.SmallIcon>
						<controls:SymbolIcon Symbol="Save"/>
					</telerik:RadRibbonButton.SmallIcon>
					<telerik:RadRibbonButton.LargeIcon>
						<controls:SymbolIcon Symbol="Save"/>
					</telerik:RadRibbonButton.LargeIcon>
				</telerik:RadRibbonButton>
				<telerik:RadRibbonButton Text="Paste" 
									CollapseToSmall="WhenGroupIsSmall"  
									CollapseToMedium="WhenGroupIsMedium">
					<telerik:RadRibbonButton.SmallIcon>
						<controls:SymbolIcon Symbol="Paste"/>
					</telerik:RadRibbonButton.SmallIcon>
				</telerik:RadRibbonButton>
				<telerik:RadRibbonButton Text="Open"  
									CollapseToSmall="WhenGroupIsSmall"  
									CollapseToMedium="WhenGroupIsMedium">
					<telerik:RadRibbonButton.SmallIcon>
						<controls:SymbolIcon Symbol="OpenFile"/>
					</telerik:RadRibbonButton.SmallIcon>
				</telerik:RadRibbonButton>
				<telerik:RadRibbonButton Text="Help"  
									CollapseToSmall="WhenGroupIsSmall"  
									CollapseToMedium="WhenGroupIsMedium">
					<telerik:RadRibbonButton.SmallIcon>
						<controls:SymbolIcon Symbol="Help"/>
					</telerik:RadRibbonButton.SmallIcon>
				</telerik:RadRibbonButton>
				<telerik:RadRibbonButton Text="Cut"  
									CollapseToSmall="WhenGroupIsSmall"  
									CollapseToMedium="WhenGroupIsMedium">
					<telerik:RadRibbonButton.SmallIcon>
						<controls:SymbolIcon Symbol="Cut"/>
					</telerik:RadRibbonButton.SmallIcon>
				</telerik:RadRibbonButton>
			</telerik:RadCollapsiblePanel>
		</telerik:RadRibbonGroup>
		
		<telerik:RadRibbonGroup Header="Empty Group"/>
	</telerik:RadRibbonTab>
</telerik:RadRibbonView>
```

#### Figure 1: Large Group Variant

![WinUI RadRibbonView Large Group](https://www.telerik.com/winui/documentation/assets/db29c87a453e2c91f75afd730bb7a392/radribbonview-collapsible-panel-group-0.png)

#### Figure 2: Medium Group Variant

![WinUI RadRibbonView Large Group](https://www.telerik.com/winui/documentation/assets/b8c4fc05f22fe52ea2e314c8eae6582d/radribbonview-collapsible-panel-group-1.png)

#### Figure 3: Small Group Variant

![WinUI RadRibbonView Large Group](https://www.telerik.com/winui/documentation/assets/58e0762411361db928dd961a4f05943e/radribbonview-collapsible-panel-group-2.png)

## Defining Number of Rows

By default the RadCollapsiblePanel is using **3 rows**. To change this behavior, set the **telerik:RadCollapsiblePanel.SmallButtonsPerColumn** attached property on the RadRibbonView element.

#### **Example 2: Setting the number of rows**

```XAML
<telerik:RadRibbonView telerik:RadCollapsiblePanel.SmallButtonsPerColumn="2"/>
```

> This setting affects all RadCollapsiblePanel instances within the RadRibbonView instance.

## Defining Items Vertical Spacing

By default the RadCollapsiblePanel does not apply additional vertical spacing between the buttons. To change this and increase the distance between the rows, set the **RadCollapsiblePanel.ItemSpacing** attached property on the RadRibbonView element.

#### **Example 3: Setting the vertical spacing**

```XAML
<telerik:RadRibbonView ContentHeight="110" Margin="10" telerik:RadCollapsiblePanel.ItemSpacing="10" />
```

> This setting affects all RadCollapsiblePanel instances within the RadRibbonView instance.

## See Also

* [Backstage Menu](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-backstage)
* [Ribbon Gallery](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-gallery)
* [Ribbon Group](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-group)
* [Quick Access ToolBar](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/qat)
* [Ribbon Tab](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-tab)