Quick Access Toolbar in WinUI Ribbon

14 Jul 202612 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. By default, the QAT is not shown; it must be added via the QuickAccessToolBar property.

Adding the Quick Access Toolbar to the Ribbon

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

XAML

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

Adding items to the Quick Access Toolbar

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

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

NOTE

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

Adding items through code

To add ribbon items to the Quick Access Toolbar (QAT) via code-behind, you need to populate the Quick Access Toolbar Items collection. The following code shows how to add ribbon items to the Quick Access Toolbar of the Ribbon.

XAML

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

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.

Adding items using QAT MenuItems

The Ribbon also supports adding items to the QAT MenuItems collection. 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.

XAML

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

Adding items using the QAT Customize dialog window

To open the QAT customize dialog window, select the More Commands option from the context menu of the QAT. This dialog window displays all available commands within the Ribbon control.

Filter the commands 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.

Finally, the Items are displayed in the QAT.

NOTE

To avoid adding duplicate items to the QAT, set the Content property on ribbon items. The Content value is used as the unique key when the QAT checks for duplicates.

Removing QAT items

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

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

Changing the Position of the Quick Access Toolbar

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

The Position enumeration comprises the following values:

• AboveRibbon - Displays the Quick Access Toolbar above the ribbon.
• BelowRibbon - Displays the Quick Access Toolbar below the ribbon.
• Hide - Hides the Quick Access Toolbar in the ribbon.

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

XAML

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

C#

using Syncfusion.UI.Xaml.Ribbon;

if (ribbon.QuickAccessToolBar != null)
{
    ribbon.QuickAccessToolBar.Position = QATPosition.BelowRibbon;
}

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

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.

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.