How to set keytip in the WinUI Ribbon Control?

69 mins read

The WinUI Ribbon control supports the keyboard navigation to activate the ribbon elements via KeyTipService, which represents the service that provides the attached properties to enable and manage the Key Tips to the ribbon control.

The key tip service can be enabled on the ribbon by setting the attached property KeyTipService.EnableKeyTip to True.

The ribbon key tip service can be activated through the keyboard by pressing the Alt or F10 keys, and the KeyTip for the ribbon elements will be displayed.

XAML

xmlns:ribbon="using:Syncfusion.UI.Xaml.Ribbon"

<ribbon:SfRibbon ribbon:KeyTipService.EnableKeyTip="True" />

Create a key Tip for ribbon:
The access text can be attached to the ribbon elements by using the KeyTipService.AccessText attached property.

XAML

       <ribbon:SfRibbon x:Name="ribbon" ribbon:KeyTipService.EnableKeyTip="True"
                                        BackstageMenuButtonContent="File">
           <ribbon:SfRibbon.Tabs>
               <ribbon:RibbonTab Header="Home" ribbon:KeyTipService.AccessText="H">
                   <ribbon:RibbonGroup Header="Clipboard"
                                       ribbon:KeyTipService.LauncherButtonAccessText="FO"
                                       LauncherButtonClick="RibbonGroup_LauncherButtonClick">
                       <ribbon:RibbonSplitButton Command="{Binding ButtonCommand}"
                                                 CommandParameter="Paste"
                                                 IsEnabled="False"
                                                 Content="Paste"
                                                 DisplayOptions="Normal,Simplified"
                                                 Icon="Paste"
                                                 ribbon:KeyTipService.AccessText ="V"
                                                 AllowedSizeModes="Large">
                           <ribbon:RibbonSplitButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                   CommandParameter="Paste ->Paste Special"
                                                   Text="Paste Special"  
                                                   ribbon:KeyTipService.AccessText="S"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                   CommandParameter="Paste -&gt; Set Default Paste"
                                                   Text="Set Default Paste" 
                                                   ribbon:KeyTipService.AccessText="A"/>
                               </MenuFlyout>
                           </ribbon:RibbonSplitButton.Flyout>
                       </ribbon:RibbonSplitButton>

                       <ribbon:RibbonButton  x:Name="cutButton" 
                                                            Command="{Binding ButtonCommand}"
                                                            CommandParameter="Undo"
                                                            Content="Cut"
                                                            DisplayOptions="Normal,Overflow"
                                                            Icon="Cut"
                                                            AllowedSizeModes="Normal, Small"
                                                            ribbon:KeyTipService.AccessText="X"/>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Copy"
                                                            Content="Copy"
                                                            DisplayOptions="Normal,Overflow"
                                                            Icon="Copy"
                                                            AllowedSizeModes="Normal, Small" 
                                                            ribbon:KeyTipService.AccessText="C"/>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Format Painter"
                                                            Content="Format Painter"
                                                            DisplayOptions="Normal,Simplified"
                                                            AllowedSizeModes="Normal, Small"
                                                            ribbon:KeyTipService.AccessText="FP">
                           <ribbon:RibbonButton.Icon>
                               <FontIcon Glyph="&#xF0E3;" />
                           </ribbon:RibbonButton.Icon>
                       </ribbon:RibbonButton>
                   </ribbon:RibbonGroup>
                   <ribbon:RibbonGroup Header="File"
                                     ShowLauncherButton="False">
                       <ribbon:RibbonDropDownButton Content="New File"
                                                    DisplayOptions="Normal,Simplified"
                                                    AllowedSizeModes="Large"
                                                    ribbon:KeyTipService.AccessText="N">
                           <ribbon:RibbonDropDownButton.Icon>
                               <FontIcon Glyph="&#xE7C3;" />
                           </ribbon:RibbonDropDownButton.Icon>
                           <ribbon:RibbonDropDownButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                   CommandParameter="New File -&gt; Empty File"
                                                   Text="Empty File" 
                                                   ribbon:KeyTipService.AccessText="EF"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                   CommandParameter="New File -&gt; Template File"
                                                   Text="Template File" 
                                                   ribbon:KeyTipService.AccessText="TF"/>
                               </MenuFlyout>
                           </ribbon:RibbonDropDownButton.Flyout>
                       </ribbon:RibbonDropDownButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Open"
                                                            Content="Open"
                                                            DisplayOptions="Normal,Simplified"
                                                            AllowedSizeModes="Normal, Small"
                                                            ribbon:KeyTipService.AccessText="O">
                           <ribbon:RibbonButton.Icon>
                               <FontIcon FontFamily="Segoe MDL2 Assets"
                                                     Glyph="&#xED25;" />
                           </ribbon:RibbonButton.Icon>
                       </ribbon:RibbonButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Share"
                                                            Content="Share"
                                                            IsEnabled="False"
                                                            DisplayOptions="Normal,Overflow"
                                                            Icon="Share"
                                                            AllowedSizeModes="Normal, Small"
                                                            ribbon:KeyTipService.AccessText="SR"/>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Print"
                                                            Content="Print"
                                                            DisplayOptions="Normal,Overflow"
                                                            Icon="Print"
                                                            AllowedSizeModes="Normal, Small" 
                                                            ribbon:KeyTipService.AccessText="PR"/>
                   </ribbon:RibbonGroup>
                   <ribbon:RibbonGroup Header="Font"
                                       ribbon:KeyTipService.LauncherButtonAccessText="FN"
                                                       LauncherButtonClick="RibbonGroup_LauncherButtonClick"
                                                       OverflowItemDisplayMode="GroupLevel">
                       <ribbon:RibbonSplitButton Command="{Binding ButtonCommand}"
                                                                     CommandParameter="Underline"
                                                                     Content="Underline"
                                                                     DisplayOptions="Normal,Simplified"
                                                                     Icon="Underline"
                                                                     ribbon:KeyTipService.AccessText="3">
                           <ribbon:RibbonSplitButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Underline -&gt; Underline command"
                                                                   Text="Underline" 
                                                                   ribbon:KeyTipService.AccessText="UL"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Underline -&gt; Double underline"
                                                                   Text="Double underline" 
                                                                   ribbon:KeyTipService.AccessText="DL"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Underline -&gt; Thick underline"
                                                                   Text="Thick underline" 
                                                                   ribbon:KeyTipService.AccessText="TL"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Underline -&gt; Dotted underline"
                                                                   Text="Dotted underline" 
                                                                   ribbon:KeyTipService.AccessText="DUL"/>
                               </MenuFlyout>
                           </ribbon:RibbonSplitButton.Flyout>
                       </ribbon:RibbonSplitButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="FontSize"
                                                                Content="FontSize"
                                                                DisplayOptions="Normal,Overflow"
                                                                Icon="FontSize"
                                                                ribbon:KeyTipService.AccessText="4"/>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Font Increase"
                                                                Content="Font Increase"
                                                                DisplayOptions="Normal,Overflow"
                                                                Icon="FontIncrease"
                                                                ribbon:KeyTipService.AccessText="5"/>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Font Decrease"
                                                                Content="Font Decrease"
                                                                DisplayOptions="Normal,Overflow"
                                                                Icon="FontDecrease"
                                                                ribbon:KeyTipService.AccessText="6"/>
                       <ribbon:RibbonDropDownButton Command="{Binding ButtonCommand}"
                                                                     CommandParameter="Underline"
                                                                     Content="Underline"
                                                                     DisplayOptions="Normal,Simplified"
                                                                     Icon="Font"
                                                                     ribbon:KeyTipService.AccessText="7">
                           <ribbon:RibbonDropDownButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Sentence case"
                                                                   Text="Sentence case" 
                                                                   ribbon:KeyTipService.AccessText="S"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="lowercase"
                                                                   Text="lowercase" 
                                                                   ribbon:KeyTipService.AccessText="L"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="UPPER CASE"
                                                                   Text="UPPERCASE" 
                                                                   ribbon:KeyTipService.AccessText="U"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="Capitalize Each Word"
                                                                   Text="Capitalize Each Word" 
                                                                   ribbon:KeyTipService.AccessText="C"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                                   CommandParameter="tOGGLE cASE"
                                                                   Text="tOGGLE cASE" 
                                                                   ribbon:KeyTipService.AccessText="T"/>
                               </MenuFlyout>
                           </ribbon:RibbonDropDownButton.Flyout>
                       </ribbon:RibbonDropDownButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Font Erase"
                                                                Content="Font Erase"
                                                                Icon="ClearSelection"
                                                                DisplayOptions="Normal,Overflow"
                                                                ribbon:KeyTipService.AccessText="E">
                       </ribbon:RibbonButton>
                   </ribbon:RibbonGroup>
                   <ribbon:RibbonGroup Header="Editing"
                                                       ShowLauncherButton="False">
                       <ribbon:RibbonSplitButton Command="{Binding ButtonCommand}"
                                                                 CommandParameter="Find"
                                                                 Content="Find"
                                                                 DisplayOptions="Normal,Simplified"
                                                                 Icon="Find"
                                                                 ribbon:KeyTipService.AccessText="FD">
                           <ribbon:RibbonSplitButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Find -&gt; Find command"
                                                               Icon="Find"
                                                               Text="Find" 
                                                               ribbon:KeyTipService.AccessText="F"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Find -&gt; Advanced Find"
                                                               Icon="Find"
                                                               Text="Advanced Find" 
                                                               ribbon:KeyTipService.AccessText="AF"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Find -&gt; Go to"
                                                               Icon="GoToStart"
                                                               Text="Go to" 
                                                               ribbon:KeyTipService.AccessText="G"/>
                               </MenuFlyout>
                           </ribbon:RibbonSplitButton.Flyout>
                       </ribbon:RibbonSplitButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                            CommandParameter="Replace"
                                                            IsEnabled="False"
                                                            Content="Replace"
                                                            DisplayOptions="Normal,Overflow"
                                                            Icon="RepeatOne"
                                                            ribbon:KeyTipService.AccessText="RP"/>
                       <ribbon:RibbonDropDownButton Content="Select"
                                                                    DisplayOptions="Normal,Overflow"
                                                                    Icon="SelectAll"
                                                                    ribbon:KeyTipService.AccessText="SL">
                           <ribbon:RibbonDropDownButton.Flyout>
                               <MenuFlyout>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Select -&gt; Select All"
                                                               Icon="SelectAll"
                                                               Text="Select All" 
                                                               ribbon:KeyTipService.AccessText="SA"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Select -&gt; Select Objects"
                                                               Icon="SelectAll"
                                                               Text="Select Objects" 
                                                               ribbon:KeyTipService.AccessText="SO"/>
                                   <MenuFlyoutItem Command="{Binding ButtonCommand}"
                                                               CommandParameter="Select -&gt; Selection Pane"
                                                               Icon="ClearSelection"
                                                               Text="Selection Pane" 
                                                               ribbon:KeyTipService.AccessText="SP"/>
                               </MenuFlyout>
                           </ribbon:RibbonDropDownButton.Flyout>
                       </ribbon:RibbonDropDownButton>
                   </ribbon:RibbonGroup>
                   <ribbon:RibbonGroup Header="Paragraph"
                                   ribbon:KeyTipService.LauncherButtonAccessText="PG"
                                   LauncherButtonClick="RibbonGroup_LauncherButtonClick">
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Bold List"
                                                                Content="Bullet list"
                                                                DisplayOptions="Normal,Overflow"
                                                                ribbon:KeyTipService.AccessText="UL">
                           <ribbon:RibbonButton.Icon>
                               <FontIcon Glyph="&#xE8FD;" />
                           </ribbon:RibbonButton.Icon>
                       </ribbon:RibbonButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Check List"
                                                                Content="Checked list"
                                                                DisplayOptions="Normal,Overflow"
                                                                ribbon:KeyTipService.AccessText="CL">
                           <ribbon:RibbonButton.Icon>
                               <FontIcon Glyph="&#xE9D5;" />
                           </ribbon:RibbonButton.Icon>
                       </ribbon:RibbonButton>
                       <ribbon:RibbonButton Command="{Binding ButtonCommand}"
                                                                CommandParameter="Group List"
                                                                Content="Group List"
                                                                DisplayOptions="Normal,Overflow"
                                                                ribbon:KeyTipService.AccessText="GL">
                           <ribbon:RibbonButton.Icon>
                               <FontIcon Glyph="&#xF168;" />
                           </ribbon:RibbonButton.Icon>
                       </ribbon:RibbonButton>
                   </ribbon:RibbonGroup>
               </ribbon:RibbonTab>
               <ribbon:RibbonTab Header="Insert" ribbon:KeyTipService.AccessText="N"/>
               <ribbon:RibbonTab Header="View" 
                                     ribbon:KeyTipService.AccessText="W"/>
           </ribbon:SfRibbon.Tabs>
           <ribbon:SfRibbon.Backstage>
               <ribbon:RibbonBackstage Target="{Binding ElementName=rootGrid}"
                                           ribbon:KeyTipService.AccessText="F">
                   <ribbon:BackstageView>
                       <ribbon:BackstageView.Items>
                           <ribbon:BackstageViewTabItem Header="New"
                                                            ribbon:KeyTipService.AccessText="N"
                                                            Icon="NewFolder">
                           </ribbon:BackstageViewTabItem>
                           <ribbon:BackstageViewTabItem Header="Open"
                                                           ribbon:KeyTipService.AccessText="O"
                                                           Icon="OpenWith">
                           </ribbon:BackstageViewTabItem>
                           <ribbon:BackstageViewItemSeparator />
                           <ribbon:BackstageViewTabItem Header="Info"
                                                            ribbon:KeyTipService.AccessText="I">
                           </ribbon:BackstageViewTabItem>
                           <ribbon:BackstageViewButtonItem Header="Save"
                                                               Command="{Binding SaveCommand}"
                                                               CommandParameter="{Binding ElementName=ribbon}" 
                                                               ribbon:KeyTipService.AccessText="S"/>
                           <ribbon:BackstageViewButtonItem Header="Close"
                                                               Command="{Binding CloseButtonCommand}" 
                                                               CommandParameter="{Binding ElementName=ribbon}" 
                                                               ribbon:KeyTipService.AccessText="C"/>
                       </ribbon:BackstageView.Items>
                       <ribbon:BackstageView.FooterItems>
                           <ribbon:BackstageViewItemSeparator />
                           <ribbon:BackstageViewTabItem Header="Account"
                                                            ribbon:KeyTipService.AccessText="D">

                           </ribbon:BackstageViewTabItem>
                           <ribbon:BackstageViewTabItem Header="Feedback"
                                                            ribbon:KeyTipService.AccessText="K">
                           </ribbon:BackstageViewTabItem>
                           <ribbon:BackstageViewButtonItem Header="Option"
                                                               ribbon:KeyTipService.AccessText="T"
                                                               Command="{Binding OptionCommand}"
                                                               CommandParameter="{Binding ElementName=ribbon}" />
                       </ribbon:BackstageView.FooterItems>
                   </ribbon:BackstageView>
               </ribbon:RibbonBackstage>
           </ribbon:SfRibbon.Backstage>
           <ribbon:SfRibbon.RightPane>
               <StackPanel Orientation="Horizontal">
                   <ribbon:RibbonButton x:Name="undoButton"
                                                        Command="{Binding ButtonCommand}"
                                                        CommandParameter="Undo"
                                                        Content="Undo"
                                                        Icon="Undo" 
                                                        ribbon:KeyTipService.AccessText="UD"/>
                   <ribbon:RibbonButton x:Name="redoButton"
                                                        Command="{Binding ButtonCommand}"
                                                        CommandParameter="Redo"
                                                        Content="Redo"
                                                        Icon="Redo" 
                                                        ribbon:KeyTipService.AccessText="RD"/>
               </StackPanel>
           </ribbon:SfRibbon.RightPane>
       </ribbon:SfRibbon>

Launcher button key tip

The access text for the launcher button can be attached by using the KeyTipService.LauncherButtonAccessText attached property in a ribbon group.

XAML

<ribbon:RibbonGroup Header="Clipboard"
                   ribbon:KeyTipService.LauncherButtonAccessText="FO"
                   LauncherButtonClick="RibbonGroup_LauncherButtonClick"/>
<ribbon:RibbonGroup Header="Font"
                   ribbon:KeyTipService.LauncherButtonAccessText="FN"
                   LauncherButtonClick="RibbonGroup_LauncherButtonClick"/>
<ribbon:RibbonGroup Header="Paragraph"
                   ribbon:KeyTipService.LauncherButtonAccessText="PG"
                   LauncherButtonClick="RibbonGroup_LauncherButtonClick"/>

Conclusion

I hope you enjoyed learning about how to get started easily with WinUI Ribbon .

You can refer to our WinUI Ribbon feature tour page to know about its other groundbreaking feature representations and Documentation, and how to quickly get started for configuration specifications.

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 triall 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!

Did you find this information helpful?

Yes

Comments (0)

How to set keytip in the WinUI Ribbon Control?

Launcher button key tip

Access denied