Pages

• Jul 12, 2024
• 3 minutes to read

With the DXToolbar control, you can combine items into pages (ToolbarPage). Only one page can be displayed at one time. DXToolbar allows you to switch between pages to show an extended set of items that meet your requirements.

This topic describes how to create pages, navigate between them, and customize layout of their items.

Create Toolbar Pages and Populate it with Items

Each page has a name specified with the ToolbarPage.Name property ( not x:Name ). This property is required to implement navigation to this page.

Populate the ToolbarPage.Items collection with toolbar items to display them within the page.

The following code snippet creates the FontSettings toolbar page and populates it with items (in XAML):

• XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <Grid>
        <dxc:DXToolbar>
            <!-- toolbar items -->
            <dxc:ToolbarPage Name="FontSettings">
                <dxc:ToolbarPage.Items>
                    <!-- toolbar items -->
                </dxc:ToolbarPage.Items>
            </dxc:ToolbarPage>
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

You can also add pages to the DXToolbar.Items collection in code behind. The following code sample creates the FontSettings page, populates it with the GoTo ToolbarButton item, and adds the page to DXToolbar:

• C#

ToolbarButton gotobutton = new ToolbarButton(){Content = "GoTo", Icon="gotoimage"};
ToolbarPage fontsettings = new ToolbarPage(){Name = "FontSettings"};
fontsettings.Items.Add(gotobutton);
toolbar.Items.Add(fontsettings);

• XAML

<dxc:DXToolbar x:Name="toolbar"/>

Navigate to ToolbarPages

You can navigate to a toolbar page in any of the following ways:

• Add ToolbarNavigationButton to toolbar. Pass the name of the toolbar page that you want to display to the ToolbarNavigationButton.PageName property. The navigation button will navigate you to the page on tap:

• Pass the required toolbar page instance to the DXToolbar.SelectedPage property (in code-behind):

• Pass the required toolbar page’s name to the DXToolbar.SelectedPageName property:

Obtain the Active Toolbar Page

Use the DXToolbar.SelectedPage property to get or set the ToolbarPage instance that is currently active. You can also use the DXToolbar.SelectedPageName property to get the name of that page.

Customize Page Layout

You can use the following properties to customize spacings, indents, and layout mode of toolbar items within a toolbar page:

Refer to the Layout topic for more information on fixed items and item alignment.

Next Steps

ItemsLists available toolbar items.LayoutDescribes how to change layout or fix toolbar items.Customize Appearance and AnimationsLists appearance and animation customization properties.