Toolbar Control

• Jul 30, 2024
• 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:

XAML

<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

• DXToolbar
  • ToolbarPage (optional)
    • ToolbarButton
    • ToolbarNavigationButton
    • ToolbarToggleButton
    • ToolbarCustomItem
    • ToolbarColorSelector
    • ToolbarSeparator
    • ToolbarText

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.

Related Example

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