ToolbarButton Class

A button within a DXToolbar control.

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

Declaration

public class ToolbarButton :
    ToolbarContentItemBase

Remarks

Create a ToolbarButton class instance to add a regular button to a DXToolbar control.

MAUI Toolbar - ToolbarButton DevExpress Toolbar for .NET MAUI - Default State of Accent Button

Specify the ToolbarContentItemBase.Content inherited property to display a text label or object next to the button icon.

The following code sample displays a ToolbarButton on the main page of a DXToolbar control:

XAML

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
    <Grid>
        <dxc:DXToolbar>
            <!-- ... -->
            <dxc:ToolbarButton Icon="goto" Content="Go To Page" />
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

Handle Taps

Use the Clicked event to handle a ToolbarButton tap.

You can also use the Command property to specify a command that is invoked when a user taps a ToolbarButton. You can define the CommandParameter property to specify a command’s parameter.

MainPage.xaml

<ContentPage ...
    xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
    xmlns:local="clr-namespace:ToolbarApplication">
    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>
    <Grid>
        <dxc:DXToolbar>
            <!-- ... -->
            <dxc:ToolbarButton x:Name="gotobutton" Content="Go To Page" Icon="goto" Command="{Binding TapButtonCommand}" 
                                  CommandParameter="{Binding ButtonType, Source={x:Reference gotobutton}}" />
        </dxc:DXToolbar>
    </Grid>
</ContentPage>

MainViewModel.cs

public class MainViewModel: INotifyPropertyChanged {
    public ICommand TapButtonCommand { get; set; }
    public MainViewModel() {
        this.TapButtonCommand = new Command<DXButtonType>(OnButtonTap);
    }
    private async void OnButtonTap(DXButtonType buttontype) {
        await Application.Current.MainPage.DisplayAlert("The item is tapped", "The button type is "+buttontype, "Ok");
    }
    // ...
}

You can customize button appearance in the pressed state. Use Pressed*Color properties to specify colors for various button elements (text, background, icon, and more).

Button Types

The ToolbarButton class includes the ButtonType property. The list below contains the available button types and corresponding button appearances in different states:

ToolButton (default)

State	Image
Default
Pressed
Disabled

Accent

State	Image
Default
Pressed
Disabled

Filled

State	Image
Default
Pressed
Disabled

Outlined

State	Image
Default
Pressed
Disabled

Text

State	Image
Default
Pressed
Disabled

Button Availability

Use the IsEnabled property to specify whether the ToolbarButton is enabled. You can customize button appearance in the disabled state. Use Disabled*Color properties to change the colors of button elements (text, background, icon, and more).

Handle Loading

You can use the following inherited member to handle the ToolbarButton loading:

Property	Description
IsLoaded	Gets or sets whether a DXElementBase descendant is loaded.
Loaded	Fires when the DXElementBase descendant is loaded.
Unloaded	Fires when the DXElementBase descendant is unloaded.

Customize Appearance

You can use the following properties to customize common ToolbarButton appearance settings:

Property	Description
ThemeSeedColor	Gets or sets the predefined color used to generate colors for ToolbarButton. This is a bindable property.
CornerRadius	Gets or sets a ToolbarContentItemBase descendant’s corner radius. This is a bindable property.
Margin	Gets or sets the margin value of a ToolbarContentItemBase descendant. This is a bindable property.
Padding	Gets or sets the padding of a ToolbarContentItemBase descendant. This is a bindable property.
ShowContent	Gets or sets whether a ToolbarContentItemBase descendant’s content is displayed. This is a bindable property.
Content	Gets or sets the custom content of the toolbar button. This is a bindable property.
ContentTemplate	Gets or sets a template that configures the content‘s appearance. This is a bindable property.
ViewStyle	Gets or sets the style that is applied to the DXButton that is displayed within the ToolbarButton. This is a bindable property.
Style	Gets or sets the style applied to a DXElementBase descendant. This is a bindable property.

Size and Alignment

You can use the following properties to customize common ToolbarButton size and alignment settings:

Property	Description
HeightRequest	Gets or sets height of a ToolbarContentItemBase descendant. This is a bindable property.
MaximumHeightRequest	Gets or sets maximum height of a ToolbarContentItemBase descendant. This is a bindable property.
MinimumHeightRequest	Gets or sets minimum height of a ToolbarContentItemBase descendant. This is a bindable property.
WidthRequest	Gets or sets width of a ToolbarContentItemBase descendant. This is a bindable property.
MaximumWidthRequest	Gets or sets maximum width of a ToolbarContentItemBase descendant. This is a bindable property.
MinimumWidthRequest	Gets or sets minimum width of a ToolbarContentItemBase descendant. This is a bindable property.
HorizontalOptions	Gets or sets the horizontal alignment of a ToolbarContentItemBase descendant. This is a bindable property.
HorizontalContentAlignment	Gets or sets the horizontal alignment of a ToolbarContentItemBase descendant’s content. This is a bindable property.
VerticalOptions	Gets or sets the vertical alignment of a ToolbarContentItemBase descendant. This is a bindable property.
VerticalContentAlignment	Gets or sets the vertical alignment of a ToolbarContentItemBase descendant’s content. This is a bindable property.

Background Color

You can use the following properties to change the background color for a ToolbarButton:

Property	Description
BackgroundColor	Gets or sets a ToolbarContentItemBase descendant’s background color. This is a bindable property.
DisabledBackgroundColor	Gets or sets the background color of the ToolbarButton when it is disabled. This is a bindable property.
PressedBackgroundColor	Gets or sets the background color of the ToolbarButton when it is pressed. This is a bindable property.

Border

You can use the following properties to customize the border for a ToolbarButton:

Property	Description
BorderColor	Gets or sets a ToolbarContentItemBase descendant’s border color. This is a bindable property.
BorderThickness	Gets or sets a ToolbarContentItemBase descendant’s border thickness. This is a bindable property.
PressedBorderColor	Gets or sets the border color of the ToolbarButton when it is pressed. This is a bindable property.
DisabledBorderColor	Gets or sets the border color of a ToolbarButton when it is disabled. This is a bindable property.

Icon

You can use the following properties to display and customize an icon within a ToolbarButton:

Property	Description
Icon	Gets or sets the icon that is displayed within a ToolbarContentItemBase descendant. This is a bindable property.
ShowIcon	Gets or sets whether a ToolbarContentItemBase descendant’s icon is displayed. This is a bindable property.
IconAspect	Gets or sets the aspect of the icon that is displayed within a ToolbarContentItemBase descendant. This is a bindable property.
IconHeight	Gets or sets the icon height of a ToolbarContentItemBase descendant. This is a bindable property.
IconWidth	Gets or sets the icon width of a ToolbarContentItemBase descendant. This is a bindable property.
IconPlacement	Gets or sets the icon placement within a ToolbarContentItemBase descendant. This is a bindable property.
IconIndent	Gets or sets the icon indent of a ToolbarContentItemBase descendant. This is a bindable property.
IconColorizationEnabled	Gets or sets whether the toolbar item’s icon should change its colors in pressed and disabled states. This is a bindable property.
IconColor	Gets or sets the icon color of a ToolbarContentItemBase descendant. This is a bindable property.
PressedIconColor	Gets or sets the icon color of the ToolbarButton when it is pressed. This is a bindable property.
DisabledIconColor	Gets or sets the icon color of the ToolbarButton when it is disabled. This is a bindable property.

Text and Font Settings

You can use the following properties to customize font settings for a ToolbarButton:

Property	Description
FontAttributes	Gets or sets a ToolbarContentItemBase descendant’s font attributes. This is a bindable property.
FontFamily	Gets or sets a ToolbarContentItemBase descendant’s font family. This is a bindable property.
FontSize	Gets or sets a ToolbarContentItemBase descendant’s font size. This is a bindable property.
FontAutoScalingEnabled	Gets or sets whether the toolbar item’s text is scaled according to the operating system’s text scale setting. This is a bindable property.
TextColor	Gets or sets the text color of a ToolbarContentItemBase descendant. This is a bindable property.
DisabledTextColor	Gets or sets the text color of the ToolbarButton when it is disabled. This is a bindable property.
PressedTextColor	Gets or sets the text color of the ToolbarButton when it is pressed. This is a bindable property.
TextCharacterSpacing	Gets or sets the spacing between characters of a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextDecorations	Gets or sets text decorations applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextHorizontalAlignment	Gets or sets the horizontal alignment applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextVerticalAlignment	Gets or sets the vertical alignment applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextLineBreakMode	Gets or sets the line breaking mode for a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextLineHeight	Gets or sets line height applied to a ToolbarContentItemBase descendant’s text. This is a bindable property.
TextMaxLines	Gets or sets the maximum number of a ToolbarContentItemBase descendant’s text. This is a bindable property.

Customize Animation

The ToolbarButton displays the animation when you tap it. You can use the following properties to customize this animation:

Property	Description
PressedScale	Gets or sets the toolbar button scale when it is pressed. This is a bindable property.
AnimationDuration	Gets or sets the duration of the ToolbarButton‘s scale animation. This is a bindable property.