Dealing with Ribbon in WinUI Ribbon

28 Apr 20212 minutes to read

The below section describes more information about Ribbon and its features.

Ribbon tab selection

The SelectedTab property returns the value of the currently selected RibbonTab and the SelectedIndex property returns the index of the SelectedTab in Ribbon.

// Setting of Selected Index
<ribbon:SfRibbon SelectedIndex="2">
    <ribbon:SfRibbon.Tabs>
        <ribbon:RibbonTab Header="Home"/>
        <ribbon:RibbonTab Header="Insert" />
        <ribbon:RibbonTab Header="View" />
        <ribbon:RibbonTab Header="Layout" />
    </ribbon:SfRibbon.Tabs>
</ribbon:SfRibbon>

// Selected Tab Binding
<ribbon:SfRibbon x:Name="ribbon"
                         SelectedTab="{Binding ElementName=view}">
    <ribbon:SfRibbon.Tabs>
        <ribbon:RibbonTab Header="Home" />
            <ribbon:RibbonTab Header="Insert" />
            <ribbon:RibbonTab x:Name="view" Header="View" />
        <ribbon:RibbonTab Header="Layout" />
    </ribbon:SfRibbon.Tabs>
</ribbon:SfRibbon>

RibbonTab selection with Selected tab and Selected index

NOTE

The selected index value should not exceed the child count of the Tabs collection in the Ribbon.

Detecting selection changes in the Ribbon tab

The SelectedTabChanged event triggers when a user attempts to switch the RibbonTab in a Ribbon.

  • The sender argument contains the SfRibbon. This argument is of type object but can be casted to the SfRibbon type.
  • The second argument is a SelectionChangedEventArgs that receives the old and newly selected ribbon tabs in an argument.
<ribbon:SfRibbon x:Name="ribbon"
                 SelectedTabChanged="ribbon_SelectedTabChanged">
    <ribbon:SfRibbon.Tabs>
        <ribbon:RibbonTab Header="Home" />
        <ribbon:RibbonTab Header="Insert" />
        <ribbon:RibbonTab Header="View" />
        <ribbon:RibbonTab Header="Layout" />
    </ribbon:SfRibbon.Tabs>
</ribbon:SfRibbon>
private void ribbon_SelectedTabChanged(object sender, SelectionChangedEventArgs e)
{
    // Write your code here
}