How to resize Ribbon layout when window gets resize in WinUI?
Ribbon Resizing
The WinUI Ribbon control allows users to expand and collapse ribbon elements while resizing the control. It can resize elements based on group size or in custom order using the AllowedSizeModes property.
AllowedSizeModes
AllowedSizeModes property which allows users to specify the size of the ribbon elements. It is a flagged enum that arranges the elements in varying sizes depending on the available space. The property has values for Small, Normal, and Large, which can be customized with combinations of these values. The default combination of values is Small, Normal, and Large.
Default Resizing
It resizes the ribbon elements based on the ribbon group size. It takes smallest group for expanding ribbon elements and takes largest group for collapsing ribbon elements.
XAML
<ribbon:SfRibbon> <ribbon:SfRibbon.Tabs> <ribbon:RibbonTab Header="Home"> <ribbon:RibbonGroup Header="Clipboard"> <ribbon:RibbonSplitButton Content="Paste" Icon="Paste" AllowedSizeModes="Large"/> <ribbon:RibbonButton Content="Cut" Icon="Cut"/> <ribbon:RibbonButton Content="Copy" Icon="Copy"/> // Add more elements here... </ribbon:RibbonGroup> <ribbon:RibbonGroup Header="File"> <ribbon:RibbonDropDownButton Content="New File" AllowedSizeModes="Large"/> <ribbon:RibbonButton Content="Open"/> <ribbon:RibbonButton Content="Share" Icon="Share"/> // Add more elements here... </ribbon:RibbonGroup> // Add more groups here... </ribbon:RibbonTab> // Add more tabs here... </ribbon:SfRibbon.Tabs> </ribbon:SfRibbon>
Output
Custom Resizing
It resizes the ribbon elements based on the ribbon group priority. It takes the highest priority group for expanding ribbon elements and collapses the elements in reverse order. We can specify the resizing order by using the Priority property in RibbonGroup.
XAML
<ribbon:SfRibbon> <ribbon:SfRibbon.Tabs> <ribbon:RibbonTab Header="Home"> <ribbon:RibbonGroup Header="Clipboard" Priority="1"> <ribbon:RibbonSplitButton Content="Paste" Icon="Paste" AllowedSizeModes="Large"/> <ribbon:RibbonButton Content="Cut" Icon="Cut"/> <ribbon:RibbonButton Content="Copy" Icon="Copy"/> // Add more elements here... </ribbon:RibbonGroup> <ribbon:RibbonGroup Header="File" Priority="2"> <ribbon:RibbonDropDownButton Content="New File" AllowedSizeModes="Large"/> <ribbon:RibbonButton Content="Open"/> <ribbon:RibbonButton Content="Share" Icon="Share"/> // Add more elements here... </ribbon:RibbonGroup> // Add more groups here... </ribbon:RibbonTab> // Add more tabs here... </ribbon:SfRibbon.Tabs> </ribbon:SfRibbon>
Output
Conclusion
I hope you enjoyed learning about how to resize Ribbon layout when window gets resize in WinUI.
You can refer to our WinUI Ribbon feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Ribbon documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
