Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail

• Sep 27, 2023
• 2 minutes to read

In this lesson, you will learn how to use the TaskBarButtonService to add taskbar thumb buttons that are displayed when the taskbar button is hovered.

Open the DevAVDbView.xaml file in the designer and invoke the Document Outline window (VIEW | Other Windows | Document Outline). In the Document Outline window, select the root UserControl, open its smart tag and select the MVVM Behaviors and Services tab. Click the Add Service item and choose the TaskBarButtonService from the menu.

Add the following task bar buttons to the added service.

XAML

<dxmvvm:TaskbarButtonService>
        <dxmvvm:TaskbarThumbButtonInfo ImageSource="pack://application:,,,/DevExpress.OutlookInspiredApp;component/Resources/Modules/icon-nav-employees-32.png"
Command="{Binding ShowCommand}" CommandParameter="{Binding Modules[0]}" Description="Employees" />
        <dxmvvm:TaskbarThumbButtonInfo ImageSource="pack://application:,,,/DevExpress.OutlookInspiredApp;component/Resources/Modules/icon-nav-customers-32.png"
Command="{Binding ShowCommand}" CommandParameter="{Binding Modules[1]}" Description="Customers" />
        <dxmvvm:TaskbarThumbButtonInfo ImageSource="pack://application:,,,/DevExpress.OutlookInspiredApp;component/Resources/Modules/icon-nav-products-32.png"
Command="{Binding ShowCommand}" CommandParameter="{Binding Modules[2]}" Description="Products" />
        <dxmvvm:TaskbarThumbButtonInfo ImageSource="pack://application:,,,/DevExpress.OutlookInspiredApp;component/Resources/Modules/icon-nav-sales-32.png"
Command="{Binding ShowCommand}" CommandParameter="{Binding Modules[3]}" Description="Sales" />
        <dxmvvm:TaskbarThumbButtonInfo ImageSource="pack://application:,,,/DevExpress.OutlookInspiredApp;component/Resources/Modules/icon-nav-opportunities-32.png"
Command="{Binding ShowCommand}" CommandParameter="{Binding Modules[4]}" Description="Opportunities" />
    </dxmvvm:TaskbarButtonService>

In the code above, the task bar buttons are bound to a navigation command. In a real application, you can bind it to any action of your own, for example, to provide quick access to the Save All command.

Run the application and hover the application taskbar button.

Click on the task bar button item to switch the application to the corresponding module.

Applications that contain the result of this lesson are available here: DevExpress.OutlookInspiredApp and DevExpress.HybridApp.