Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

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

outlook_tut_les11_1

Add the following task bar buttons to the added service.

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

outlook_tut_les11_2

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.

See Also