Ribbon ToggleButton

The RadRibbonToggleButton represents an extension of the Microsoft.UI.Xaml.Controls.ToggleButton. It provides an easier interaction with the RadRibbonView control. What is special about the RadRibbonToggleButton is that it has two states: checked and unchecked. To switch between these states just click on it.

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

Example 1: Declare RibbonToggleButton

• XAML

<telerik:RadRibbonView> 
    <telerik:RadRibbonTab Header="Home"> 
        <telerik:RadRibbonGroup Header="Home group"  > 
            <telerik:RadRibbonGroup.Variants> 
                <ribbonView:GroupVariant Variant="Small"/> 
                <ribbonView:GroupVariant Variant="Medium"/> 
                <ribbonView:GroupVariant Variant="Large"/> 
            </telerik:RadRibbonGroup.Variants> 
            <telerik:RadRibbonToggleButton CollapseToSmall="WhenGroupIsSmall" 
                                    CollapseToMedium="WhenGroupIsMedium" 
                                    IsAutoSize="True"  
                                    Size="Large"  
                                    Text="Admin" > 
                        <telerik:RadRibbonToggleButton.SmallIcon> 
                    <SymbolIcon Symbol="Admin"/> 
                </telerik:RadRibbonToggleButton.SmallIcon> 
                        <telerik:RadRibbonToggleButton.LargeIcon> 
                    <SymbolIcon Symbol="Admin"/> 
                </telerik:RadRibbonToggleButton.LargeIcon> 
            </telerik:RadRibbonToggleButton> 
        </telerik:RadRibbonGroup> 
    </telerik:RadRibbonTab> 
</telerik:RadRibbonView>     

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.

Figure 1: RadRibbonToggleButton Example

Handling Changes in the the Button's Checked State

Besides the Click event, the RadRibbonToggleButton control exposes two additional events - Checked and Unchecked. They are meant to notify for changes in the checked state of the toggle button.

Example 2: Subscribe to Checked/UnChecked event of the RibbonToggleButton

• XAML

<telerik:RadRibbonToggleButton Checked="RadRibbonToggleButton_Checked" 
                               Unchecked="RadRibbonToggleButton_Unchecked"/>                        

Example 3: Checked/UnChecked event handler

• C#

private void RadRibbonToggleButton_Checked(object sender, RoutedEventArgs e) 
{ 
} 
private void RadRibbonToggleButton_Unchecked(object sender, RoutedEventArgs e) 
{ 
}