Edit this page

Collapsible Panel

One of the most important features of the RadRibbonView 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 makes your life easier by providing you with two built-in layout containers - RadOrderedWrapPanel and RadCollapsiblePanel. You should use one of these panels to specify how you would like the resizing to occur.

The purpose of this tutorial is to introduce you the RadCollapsiblePanel.

Consider reading the Resizing topic, which is tightly connected with the RadCollapsiblePanel.

RadCollapsiblePanel - Fundamentals

The RadCollapsiblePanel is very similar to the StackPanel. However, it has one distinctive feature - this panel is not aware about the active size variant. Instead, it always tries to lay out its children in the small space provided. If it is not possible, it lays them horizontally.

RadCollapsiblePanel arranges itself automatically according to the RibbonGroup size.

The panel has three states, which are quite self-explanatory:

  • Large

  • Medium

  • Small

If you refer to the Microsoft Office Word product, you will note that a similar layout behavior is used at the "Insert" tab. It is full of groups of three large buttons (e.g. the "Illustrations" group), laid out horizontally, which then become small buttons laid out vertically, when the group is shrunk. You could use the RadRibbonCollapsible panel to achieve such an effect, combined with the resizing characteristics of the RadRibbonButtons.

Buttons per Column in Small and Medium State

By default the RadCollapsiblePanel displays 3 buttons while in Medium or Small state. However, you can change that number through the RadCollapsiblePanel.SmallButtonsPerColumn attached property.

XAML

<telerik:RadRibbonView Title="Sample"
                       ApplicationButtonImageSource="AppIcon.png"
                       telerik:RadCollapsiblePanel.SmallButtonsPerColumn="2">
    <telerik:RadRibbonTab Header="Home">
        <telerik:RadRibbonGroup Header="Clipboard">
            <telerik:RadCollapsiblePanel>
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium"
                                         CollapseToSmall="WhenGroupIsSmall"
                                         SmallImage="/Images/RibbonView/FirstLook/cut.png"
                                         Text="Cut" />
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium"
                                         CollapseToSmall="WhenGroupIsSmall"
                                         SmallImage="/Images/RibbonView/FirstLook/copy.png"
                                         Text="Copy" />
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium"
                                         CollapseToSmall="WhenGroupIsSmall"
                                         SmallImage="/Images/RibbonView/FirstLook/formatpainter.png"
                                         Text="Format Painter" />
            </telerik:RadCollapsiblePanel>
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
</telerik:RadRibbonView>

Rad Ribbon View Collapsible Panel Buttons Per Column

Please have in mind that this property should be applied in the RadRibbonView definition and therefore it affects all RadCollapsiblePanels throughout your ribbon UI.

It is important to note that if the height of the RibbonView cannot display the number of buttons indicated by the RadCollapsiblePanel.SmallButtonsPerColumn property, the property will be disregarded. In this case the RadCollapsiblePanel will display as many buttons as the RibbonView Height allows.

ItemSpacing

In RadRibbonView you can also control the space between every two buttons in the RadCollapsiblePanel while they are in Small or Medium states. This can be done through the RadCollapsiblePanel.ItemSpacing attached property. It is of type Int and its default value is 0.
Rad Ribbon View Collapsible Panel Item Spacing

Using RadCollapsiblePanel

The next example demonstrates the usage of the RadCollapsiblePanel.

XAML

<telerik:RadRibbonView x:Name="radRibbonView" 
                        Title="My Title"
                        ApplicationButtonContent="File"
                        ApplicationName="My Application">
    <telerik:RadRibbonTab Header="Insert">
        <telerik:RadRibbonGroup Header="Illustrations">
            <telerik:RadCollapsiblePanel>
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium" 
                                            CollapseToSmall="WhenGroupIsSmall"
                                            LargeImage="/RadRibbonViewSample;component/Images/IconMSOffice/32/Shapes.png"
                                            Size="Large"
                                            Text="Shapes" />
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium" 
                                            CollapseToSmall="WhenGroupIsSmall"
                                            LargeImage="/RadRibbonViewSample;component/Images/IconMSOffice/32/SmartArt.png"
                                            Size="Large"
                                            Text="SmartArt" />
                <telerik:RadRibbonButton CollapseToMedium="WhenGroupIsMedium" 
                                            CollapseToSmall="WhenGroupIsSmall"
                                            LargeImage="/RadRibbonViewSample;component/Images/IconMSOffice/32/chart.png"
                                            Size="Large"
                                            Text="Chart" />
            </telerik:RadCollapsiblePanel>
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
</telerik:RadRibbonView>

See Also