ContextQMD
Back to Devexpress

Toolbar Control

maui-404604-dialogs-menu-and-navigation-toolbar-toolbar-overview.md

latest4.1 KB
Original Source

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

Next Steps

ItemsLists available toolbar items.PagesDescribes how to create and customize toolbar pages.LayoutDescribes how to change layout or fixed toolbar items.Customize Appearance and AnimationsLists appearance and animation customization properties.

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