Skip to main content

ToolbarButton Class

A button within a DXToolbar control.

Namespace: DevExpress.Maui.Controls

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 DevExpress Toolbar for .NET MAUI  - Default State of Outlined 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:

<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.

<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>
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 DevExpress Toolbar for .NET MAUI  - Default State of ToolbarButton
Pressed DevExpress Toolbar for .NET MAUI  - Pressed State of ToolbarButton
Disabled DevExpress Toolbar for .NET MAUI  - Disabled State of ToolbarButton

Accent

State Image
Default DevExpress Toolbar for .NET MAUI  - Default State of Accent Button
Pressed DevExpress Toolbar for .NET MAUI  - Pressed State of Accent Button
Disabled DevExpress Toolbar for .NET MAUI  - Disabled State of Accent Button

Filled

State Image
Default DevExpress Toolbar for .NET MAUI  - Default State of Filled Button
Pressed DevExpress Toolbar for .NET MAUI  - Pressed State of Filled Button
Disabled DevExpress Toolbar for .NET MAUI  - Disabled State of Filled Button

Outlined

State Image
Default DevExpress Toolbar for .NET MAUI  - Default State of Outlined Button
Pressed DevExpress Toolbar for .NET MAUI  - Pressed State of Outlined Button
Disabled DevExpress Toolbar for .NET MAUI  - Pressed State of Outlined Button

Text

State Image
Default DevExpress Toolbar for .NET MAUI  - Default State of Text Button
Pressed DevExpress Toolbar for .NET MAUI  - Pressed State of Text Button
Disabled DevExpress Toolbar for .NET MAUI  - Disabled State of Text Button

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.
See Also