# Resizing One of the most important features of the **RadRibbonView** control is the dynamic layout resizing. It refers to the **RadRibbonView**'s ability to optimize its layout depending on how much space is available. This process can't be automated, however, the **RadRibbonView**'s API gives you the ability to specify how you would like the resizing to occur. > You can access the **RadRibbonView** control through an alias pointing to the **Telerik.UI.Xaml.Controls** namespace: `xmlns:telerik="using:Telerik.UI.Xaml.Controls"` E The resizing of the elements is defined per **RadRibbonTab**. The resizing behavior of one tab is **independent** from the resizing behavior of the rest of the tabs. A **RadRibbonTab** control can contains many **RadRibbonGroups**. Each group in your tabs can have four distinct sizes: * **Large**: This is the default size. * **Medium** * **Small** * **Collapsed** ## DefaultVariant The **RadRibbonGroups** assume the size of their **DefaultVariant** whenever they can. By default the value of this property is **Large**, but you can easily change it: #### **Example 1: Change DefaultVariant** ```XAML ``` ![WinUI RadRibbonView Rad Ribbon View Resizing Default Variant](https://www.telerik.com/winui/documentation/assets/91331c2f3b8659bed5b4288fb9815c55/radribbonview_resizing_defaultvariant.png) The **DefaultVariant** is always available and is always with highest priority. For example, if you set **DefaultVariant** to **Small** as demonstrated above, the group will be initially in **Small** state and its state can only change to **Collapsed** when the width of the **RibbonView** control gets smaller. Moreover, this **RibbonGroup** will never enter its **Medium** or **Large** states as the **DefaultVariant** is **Small**. ## Variants The resizing behavior of **RadRibbonGroup** is specified through the RadRibbonGroup's **Variants** collection. The collection is populated with **GroupVariant** objects. > You can access the **GroupVariant** control through an alias pointing to the **Telerik.UI.Xaml.Controls.RibbonView** namespace: `xmlns:ribbonView="using:Telerik.UI.Xaml.Controls.RibbonView"` The **GroupVariant** object has two important properties: * **Variant**: Defines the variant in which the group can be. The values for this property are predefined in the **RibbonGroupVariant** enumeration, which exposes the following fields: * **Priority**: The priority for the specified **Variant**. Although the **Variants** collection is defined on **RadRibbonGroup** level, the **Priority** properties for each **GroupVariant** are applied throughout the **RadRibbonTab** as a whole - for all of the groups. And it is important to remember that the **Variants** are applied based on the value of their **Priority** following the rule: The highest number is with the highest priority. By default if no priorities are set for the **RadRibbonGroups Variants** they will be resized from right to left going through all 4 variants - e.g. when the size of the **RadRibbonView** is smaller the right-most **RibbonGroup** will be first set to a smaller size. However, the groups will only go through each of their 4 Variants, if every smaller variant actually takes less space. Otherwise, if for example the groups are empty, they will skip variants and will be resized from **Large** to **Collapsed** state directly. If you want to customize the resizing order, you should specify a **Priority** for each of the **RibbonGroup** **Variants**. Once you do so, the priorities are applied from the top-priority Variant to the least - meaning that when the **RibbonView** tries to resize, it will try to fit the top-priority variant among all groups. However, a top-priority variant will be applied on a **RibbonGroup** only if the size of the group in that variant is smaller than the size of the group in the current variant. Usually the variant and the size of a single **RadRibbonGroup** can be described like so: **Collapsed < Small < Medium < Large** > tip If there are multiple **Variants** with equal priorities among the **RibbonGroups** of a **RibbonTab**, the variants are applied from right to left. You can create a **RibbonView** definition where only a few **RibbonGroups** have a predefined **Variants** collection. In this case those groups that don't have any Variants settings are considered with lowest priority. Therefore the **RibbonView** will first apply the **Variants** of the **RadRibbonGroups** that define a custom variants collection and only then it will change the state of the other **RibbonGroups** applying each of the 4 variants (from the largest to the smallest) from right to left. > tip You have the ability to customize the layout of the **RibbonGroups** when they are in large, medium or small state. In collapsed state, they look the same - only image and text are shown. For more information about the groups' customization, take a look at the [Ribbon Group](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-group) topic. ## Example The next example demonstrates how to set the **RadRibbonGroup**'s **Variants** collection. > A size variant can only be specified once per group. #### **Example 2: Specify Variants** ```XAML ``` ![WinUI RadRibbonView Rad Ribbon View Resizing Example Layout](https://www.telerik.com/winui/documentation/assets/2f72de6229fad3ff8e970a412b1914f7/radribbonview_resizing_examplelayout.png) In the previous example the demo would change the size of the groups following the order defined by the Variants collection and the priority of each variant. In our case when the **RibbonView Width** is decreased the Groups will be resized going through each variant following this order: 1. Styles 2. Editing 3. Font 4. Paragraph 5. Clipboard ![WinUI RadRibbonView Rad Ribbon View Resizing Example Resized](https://www.telerik.com/winui/documentation/assets/7d1ced112d6e47caf3aa07ce8b3446d7/radribbonview_resizing_exampleresized.png) Please keep in mind that when the group changes its **Size**, the elements inside are automatically resized. And in order to customize the resizing behavior of the elements you can wrap them in the panels that Telerik supports. For more information, take a look at the [Ordered Wrap Panel](https://www.telerik.com/winui/documentation/controls/radribbonview/layout-controls/ordered-wrap-panel) and [Collapsible Panel](https://www.telerik.com/winui/documentation/controls/radribbonview/layout-controls/collapsible-panel) topics. Developers can also choose to create a custom logic for the resizing by using the **RadRibbonButtons** and by defining how they will behave when the group changes its size. For more information, please take a look at the [Ribbon Buttons](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-buttons/overview) topic. ## See Also * [Ribbon Group](https://www.telerik.com/winui/documentation/controls/radribbonview/ribbon-controls/ribbon-group) * [Collapsing](https://www.telerik.com/winui/documentation/controls/radribbonview/features/collapsing)