Quick Access Toolbar in WinUI Ribbon

10 Jan 202412 minutes to read

The Quick Access Toolbar (QAT) is used to render a set of ribbon items that are commonly used in applications. It renders at the top-left corner of a window or ribbon to make it more accessible. Users can place it above or below the ribbon, remove commands from it, or add commands to it.

Adding Quick Access Toolbar in Ribbon

To add Quick Access Toolbar in Ribbon control, set the QuickAccessToolBar property of Ribbon. The below code shows how to add the Quick Access Toolbar in Ribbon.

<ribbon:SfRibbon x:Name="ribbon" >
       <ribbon:SfRibbon.QuickAccessToolBar>
             <ribbon:QuickAccessToolBar />
       </ribbon:SfRibbon.QuickAccessToolBar>
       ...
</ribbon:SfRibbon>

WinUI Ribbon Quick Access Toolbar.

Adding items in Quick Access Toolbar

Ribbon items can be added in the Quick Access Toolbar (QAT) by following below ways:

  • Adding items through Code.
  • Adding items using ContextMenu.
  • Adding items using QAT MenuItems.
  • Adding items using QAT Customize dialog window

NOTE

Currently, Ribbon Gallery and RibbonItemHost are not supported as a QAT add-in.

Adding items through Code

To add the ribbon items in Quick Access Toolbar (QAT) through code behind, you need to populate the QuickAccessToolbar Items collection. The below code shows how to add the ribbon items in Quick Access Toolbar of Ribbon.

<ribbon:SfRibbon x:Name="ribbon" >
   <ribbon:SfRibbon.QuickAccessToolBar>
       <ribbon:QuickAccessToolBar>
         <ribbon:RibbonButton x:Name="SaveButton"
                              Content="Save"
                              Icon="Save"
                              Command="{Binding ButtonCommand}"
                              CommandParameter="Save"/>
         <ribbon:RibbonButton x:Name="undoButton"
                              Content="Undo"
                              Icon="Undo"
                              Command="{Binding ButtonCommand}"
                              CommandParameter="Undo"/>
         <ribbon:RibbonButton x:Name="printButton"
                              Content="Print"
                              Icon="Print"
                              Command="{Binding ButtonCommand}"
                              CommandParameter="Print"/>                       
        </ribbon:QuickAccessToolBar>
    </ribbon:SfRibbon.QuickAccessToolBar>
    ...
</ribbon:SfRibbon>

WinUI Ribbon QAT Items.

Adding items using ContextMenu

To add the ribbon items to the Quick Access Toolbar (QAT) through context menu, right-click the required ribbon item and select Add to Quick Access Toolbar. The respective item will be added to the QAT.

WinUI RibbonItem Context Menu.

WinUI Ribbon QAT Items added at run-time.

Adding items using QAT MenuItems

The Ribbon also supports adding items to the QAT Menu items. To add items to the drop-down menu of the Quick Access Toolbar, use the MenuItems property of the Quick Access Toolbar. Items can be added to the Quick Access Toolbar (QAT) by making the selection.

<ribbon:SfRibbon x:Name="ribbon">
    <ribbon:SfRibbon.QuickAccessToolBar>
       <ribbon:QuickAccessToolBar>
          <ribbon:RibbonButton x:Name="SaveButton"
                               Content="Save"
                               Icon="Save"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Save"/>
          <ribbon:RibbonButton x:Name="undoButton"
                               Content="Undo"
                               Icon="Undo"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Undo"/>
          <ribbon:RibbonButton x:Name="printButton"
                               Content="Print"
                               Icon="Print"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Print"/>
          <ribbon:QuickAccessToolBar.MenuItems>
              <ribbon:RibbonButton  x:Name="Share"     
                                    Icon="Share"
                                    Content="Share"/>
              <ribbon:RibbonToggleButton Content="Italic"/>
              <ribbon:RibbonSplitButton Content="Underline"/>
              <ribbon:RibbonDropDownButton  Content="Select"/>
              <ribbon:RibbonDropDownButton Content="New File"/>
          </ribbon:QuickAccessToolBar.MenuItems>
      </ribbon:QuickAccessToolBar>        
   </ribbon:SfRibbon.QuickAccessToolBar>
   ...
</ribbon:SfRibbon>

WinUI Ribbon QAT menu items.

Adding items using QAT Customize dialog window

To open the QAT customize dialog window, select the MoreCommands option from the ContextMenu of the QAT. This dialog window showcases all available commands within the Ribbon control.

Filter the command based on ribbon tabs by using the Choose commands from option. Then, select the desired command and click Add to add the command to the right Pane of the QAT dialog window. Finally, click OK.

MoreCommands option in QAT drop-down context menu.

Select commands in QAT dialog window.

Adding command to right pane of QAT dialog window.

Finally, the Items are displayed in the QAT.

Add commands to WinUI Ribbon QuickAccessToolbar.

NOTE

To avoid adding duplicate items in QAT, set Content property for ribbon items.

Removing QAT items

To remove an items from Quick Access Toolbar (QAT), right-click the required QAT item and select Remove from Quick Access Toolbar option.

WinUI Ribbon QAT item context menu.

WinUI Ribbon QAT item removed.

QAT items can also be removed by using the Customize window. Select the QAT item in the right panel, then select Remove.

WinUI Ribbon Items to QAT Customize Window.

WinUI Ribbon QAT item removed.

Change Position of Quick Access Toolbar

The position of Quick Access Toolbar (QAT) can be changed by using it Position property.

The Position enumeration comprises of following values: .

  • Above the Ribbon - Displays the Quick Access Toolbar above the ribbon.
  • Below the Ribbon - Displays the Quick Access Toolbar below the ribbon.
  • Hide - Hide the Quick Access Toolbar in the ribbon.

The default value is Above the Ribbon. The below code shows how to change the position of Quick Access Toolbar in Ribbon.

<ribbon:SfRibbon x:Name="ribbon">
   <ribbon:SfRibbon.QuickAccessToolBar>
      <ribbon:QuickAccessToolBar Position="BelowRibbon">
          <ribbon:RibbonButton x:Name="SaveButton"
                               Content="Save"
                               Icon="Save"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Save"/>
          <ribbon:RibbonButton x:Name="undoButton"
                               Content="Undo"
                               Icon="Undo"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Undo"/>
          <ribbon:RibbonButton x:Name="printButton"
                               Content="Print"
                               Icon="Print"
                               Command="{Binding ButtonCommand}"
                               CommandParameter="Print"/>                       
       </ribbon:QuickAccessToolBar>
    </ribbon:SfRibbon.QuickAccessToolBar>
    ...
</ribbon:SfRibbon>

WinUI Ribbon QAT below ribbon.

The position of the QAT can also be changed using its drop-down menu option.

WinUI Ribbon QAT drop-down menu.

Command Label

You can show or hide the command label in the Quick Access Toolbar using the Show Command Labels or Hide Command Labels QAT drop-down menu item.

WinUI Ribbon QAT show command label menu item.

WinUI Ribbon QAT commands with label.

NOTE

Show Command Labels or Hide Command Labels menu item will only be shown in QAT drop-down while placing QAT below the ribbon like in Microsoft Word.