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:

  XAML

  <dxc:DXToolbar>
      <!-- ... -->
      <dxc:ToolbarNavigationButton PageName="FontSettings" Content="Navigate"/>
      <dxc:ToolbarPage Name="FontSettings">
          <dxc:ToolbarPage.Items>
              <!-- ... -->
          </dxc:ToolbarPage.Items>
      </dxc:ToolbarPage>
  </dxc:DXToolbar>
  

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

  XAML

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

  C#

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

  Set the DXToolbar.SelectedPage property to null to navigate to a default page.

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

  XAML

  <dxc:DXToolbar SelectedPageName="FontSettings">
      <!-- ... -->
      <dxc:ToolbarPage Name="FontSettings">
          <dxc:ToolbarPage.Items>
              <!-- ... -->
          </dxc:ToolbarPage.Items>
      </dxc:ToolbarPage>
  </dxc:DXToolbar>
  

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:

Property	Description
ItemAlignment	Gets or sets how to align nested controls within this page. This is a bindable property.
ItemSpacing	Gets or sets the spacing value that is displayed between DXToolbar items of this page. This is a bindable property.
FixedLeftIndent	Gets or sets the right indent within this page between toolstrip items and toolbar items that are fixed to the left side. This is a bindable property.
FixedRightIndent	Gets or sets the left indent within this page between toolstrip items and toolbar items that are fixed to the right side. This is a bindable property.
FixedLeftItemSpacing	Gets or sets the indent between toolbar items that are fixed to the left side of this page. This is a bindable property.
FixedRightItemSpacing	Gets or sets the indent between toolbar items that are fixed to the right side of this page. This is a bindable property.

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

Next Steps

Items

Lists available toolbar items.

Layout

Describes how to change layout or fix toolbar items.

Customize Appearance and Animations

Lists appearance and animation customization properties.