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.
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 | ![]() |
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 |
---|---|
Is |
Gets or sets whether a DXElement |
Loaded | Fires when the DXElement |
Unloaded | Fires when the DXElement |
#Customize Appearance
You can use the following properties to customize common ToolbarButton appearance settings:
Property | Description |
---|---|
Theme |
Gets or sets the predefined color used to generate colors for Toolbar |
Corner |
Gets or sets a Toolbar |
Margin | Gets or sets the margin value of a Toolbar |
Padding | Gets or sets the padding of a Toolbar |
Show |
Gets or sets whether a Toolbar |
Content | Gets or sets the custom content of the toolbar button. This is a bindable property. |
Content |
Gets or sets a template that configures the content‘s appearance. This is a bindable property. |
View |
Gets or sets the style of the DXButton control within the Toolbar |
Style | Gets or sets the style applied to a DXElement |
#Size and Alignment
You can use the following properties to customize common ToolbarButton size and alignment settings:
Property | Description |
---|---|
Height |
Gets or sets height of a Toolbar |
Maximum |
Gets or sets maximum height of a Toolbar |
Minimum |
Gets or sets minimum height of a Toolbar |
Width |
Gets or sets width of a Toolbar |
Maximum |
Gets or sets maximum width of a Toolbar |
Minimum |
Gets or sets minimum width of a Toolbar |
Horizontal |
Gets or sets the horizontal alignment of a Toolbar |
Horizontal |
Gets or sets the horizontal alignment of a Toolbar |
Vertical |
Gets or sets the vertical alignment of a Toolbar |
Vertical |
Gets or sets the vertical alignment of a Toolbar |
#Background Color
You can use the following properties to change the background color for a ToolbarButton:
Property | Description |
---|---|
Background |
Gets or sets a Toolbar |
Disabled |
Gets or sets the background color of the Toolbar |
Pressed |
Gets or sets the background color of the Toolbar |
#Border
You can use the following properties to customize the border for a ToolbarButton:
Property | Description |
---|---|
Border |
Gets or sets a Toolbar |
Border |
Gets or sets a Toolbar |
Pressed |
Gets or sets the border color of the Toolbar |
Disabled |
Gets or sets the border color of a Toolbar |
#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 Toolbar |
Show |
Gets or sets whether a Toolbar |
Icon |
Gets or sets the aspect of the icon that is displayed within a Toolbar |
Icon |
Gets or sets the icon height of a Toolbar |
Icon |
Gets or sets the icon width of a Toolbar |
Icon |
Gets or sets the icon placement within a Toolbar |
Icon |
Gets or sets the icon indent of a Toolbar |
Icon |
Gets or sets whether the toolbar item’s icon should change its colors in pressed and disabled states. This is a bindable property. |
Icon |
Gets or sets the icon color of a Toolbar |
Pressed |
Gets or sets the icon color of the Toolbar |
Disabled |
Gets or sets the icon color of the Toolbar |
#Text and Font Settings
You can use the following properties to customize font settings for a ToolbarButton:
Property | Description |
---|---|
Font |
Gets or sets a Toolbar |
Font |
Gets or sets a Toolbar |
Font |
Gets or sets a Toolbar |
Font |
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. |
Text |
Gets or sets the text color of a Toolbar |
Disabled |
Gets or sets the text color of the Toolbar |
Pressed |
Gets or sets the text color of the Toolbar |
Text |
Gets or sets the spacing between characters of a Toolbar |
Text |
Gets or sets text decorations applied to a Toolbar |
Text |
Gets or sets the horizontal alignment applied to a Toolbar |
Text |
Gets or sets the vertical alignment applied to a Toolbar |
Text |
Gets or sets the line breaking mode for a Toolbar |
Text |
Gets or sets line height applied to a Toolbar |
Text |
Gets or sets the maximum number of a Toolbar |
#Customize Animation
The ToolbarButton displays the animation when you tap it. You can use the following properties to customize this animation:
Property | Description |
---|---|
Pressed |
Gets or sets the toolbar button scale when it is pressed. This is a bindable property. |
Animation |
Gets or sets the duration of the Toolbar |