Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 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

Toolbar Control

  • 2 minutes to read

The DevExpress DXToolbar control for .NET MAUI enables you to create compact and adaptive action bars in your application. This topic describes how to add this control to a project and lists available toolbar items.

Review our demo app on GitHub to try out Toolbar Control:

View Example: Replicate an HTML Edit's Built-In Toolbar

#Add a Toolbar to a Project

Follow the steps below to add a DXToolbar control to an application:

  1. Install the DevExpress.Maui.Controls NuGet package. Refer to the following topic for more information: Get Started.
  2. Reference the xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls" XML namespace in the ContentPage section.
  3. Add the <dxc:DXToolbar></dxc:DXToolbar> markup to a XAML page.
  4. Add toolbar pages, groups, and items.

The following code snippet adds a DXToolbar control to the page:

DevExpress Toolbar for .NET MAUI

<ContentPage ...
             xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
    <Grid>
        <dxc:DXToolbar x:Name="toolbar" Grid.Row="0">
            <dxc:ToolbarButton Icon="goto" Content="Go To Page" Placement="FixedLeft" />
            <dxc:ToolbarNavigationButton PageName="TocSettings" Icon="toc" Content="Open TOC"/>
            <dxc:ToolbarSeparator />

            <dxc:ToolbarToggleButton Content="Bookmark" IsChecked="True" Icon="bookmark"/>
            <dxc:ToolbarColorSelector/>
            <dxc:ToolbarSeparator />

            <dxc:ToolbarToggleButton GroupName="Layout" Icon="onepage" IsChecked="true" />
            <dxc:ToolbarToggleButton GroupName="Layout" Icon="titlepage" />
            <dxc:ToolbarToggleButton GroupName="Layout" Icon="twopages"/>
            <dxc:ToolbarSeparator />

            <dxc:ToolbarCustomItem>
                <dxe:CheckEdit IsChecked="True" Label="Light Theme" />
            </dxc:ToolbarCustomItem>

            <dxc:ToolbarToggleButton Icon="more" Placement="FixedRight" />

            <dxc:ToolbarPage Name="TocSettings">
                <dxc:ToolbarPage.Items>
                    <dxc:ToolbarButtonIcon="goto" />
                </dxc:ToolbarPage.Items>
            </dxc:ToolbarPage>
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

#Toolbar Structure

#Next Steps

Items
Lists available toolbar items.
Pages
Describes how to create and customize toolbar pages.
Layout
Describes how to change layout or fixed toolbar items.
Customize Appearance and Animations
Lists appearance and animation customization properties.

View Example: Replicate an HTML Edit's Built-In Toolbar