New to Telerik UI for WinUI? Download free 30-day trial

Overview

There is a specific set of buttons introduced with the RadRibbonView control. They all inherit and extend the functionality of the standard button controls i.e. RadRibbonToggleButton derives from Microsoft.UI.Xaml.Controls.ToggleButton, RadRibbonButton derives from Microsoft.UI.Xaml.Controls.Button, etc. The additional functionality which they provide allows you to easily implement MS-Office-Ribbon-like behavior in your application. This topic covers the common functionality for all ribbon buttons.

The RadRibbonButtons can be used outside the RadRibbonView control as well.

The following Ribbon buttons are available:

Button States

There are three button states:

Figure 1: Large: Displays the large icon and the text label defined for the button

WinUI RadRibbonView Large: Displays the large icon and the text label defined for the button

Figure 2: Medium: Displays the small icon and the text label defined for the button

WinUI RadRibbonView Medium: Displays the small icon and the text label defined for the button

Figure 3: Small: Displays the small icon defined for the button

WinUI RadRibbonView Small: Displays the small icon defined for the button

The state of the button depends on the state of the RadRibbonGroup and can be controlled via the CollapseToSmall, CollapseToMedium and the IsAutoSize properties of the ribbon buttons. To learn more about that take a look at the Common Functionality section of this topic.

To learn more about the states of the RadRibbonGroup take a look at this topic.

Common Functionality

As it was mentioned above all RadRibbonButtons derive from the base button controls. Each of them inherits the specifics of the respective button and implements additional functionality. Although they are different controls, there is a common set of properties explained below.

  • Text: A property ot type string that gets or sets the text label that is shown in Medium and Large button state.

  • SmallIcon: A property of type IconElement that gets or sets the icon that is shown in Medium and Small button state.

  • LargeIcon: A property of type IconElement that gets or sets the icon that is shown in Large button state.

  • Size: A property of type ButtonSize that gets or sets the button initial size. This will be the maximum size of the button as well.

  • SplitText: Enables or disables the text wrapping for the large-sized button. This property is available only for the RadRibbonSplitButton, RadRibbonDropDownButton, RadRibbonButton.

  • CollapseToSmall: Specifies when the button will be collapsed to its Small state, depending on the state of the RadRibbonGroup it belongs to.

  • CollapseToMedium: Specifies when the button will be collapsed to its Medium state, depending on the state of the RadRibbonGroup to which it belongs.

    The CollapseToSmall and CollapseToMedium properties use the CollapseThreshold enumeration. It has the following values:
    *Never: Indicates that the button will never collapse to Small/Medium state. This is the default value of the properties. *WhenGroupIsMedium: Indicates that the button will go to the Small/Medium state when its RadRibbonGroup is in Medium state. *WhenGroupIsSmall: Indicates that the button will go to the Small/Medium state when its RadRibbonGroup is in Small state.

  • IsAutoSize: Specifies whether the button Icon will be sized accordingly to the RibbonView guidance specification. If set to False, the button will display its icons (both Small and Large) in its original size. Otherwise the SmallIcon will be displayed with size of 16x16px and the LargeIcon will be displayed with size of 32x32px.

  • TextRow1: Gets the text that is shown in Medium and Large button state.

  • TextRow2: Gets the text that is shown in the Large button state.

Example

Here is an example of a RadRibbonButton with the following properties set.

Example 1: RadRibbonButton Example

    <telerik:RadRibbonButton CollapseToMedium="Never"   
                        CollapseToSmall="WhenGroupIsMedium" 
                        IsAutoSize="True"  
                        Size="Large"  
                        Text="Admin" > 
        <telerik:RadRibbonButton.SmallIcon> 
            <SymbolIcon Symbol="Admin"/> 
        </telerik:RadRibbonButton.SmallIcon> 
        <telerik:RadRibbonButton.LargeIcon> 
            <SymbolIcon Symbol="Admin"/> 
        </telerik:RadRibbonButton.LargeIcon> 
    </telerik:RadRibbonButton> 
This button has its initial size set to Large and its text label set to "Admin". As the IsAutoSize property is set to True, the button will change its size depending on the RadRibbonGroup's size. The button will also never collapse to its Medium size and will collapse to its Small size when the RadRibbonGroup collapses to Medium.

See Also

In this article
Not finding the help you need?