Skip to main content
ON

DXButton Class

A button control.

Namespace: DevExpress.Maui.Core

Assembly: DevExpress.Maui.Core.dll

NuGet Package: DevExpress.Maui.Core

Declaration

public class DXButton :
    DXButtonBase

Remarks

DXButton performs the assigned action when a user taps it. The control can display a caption string (Content), icon (Icon), or both.

DevExpress MAUI DXButton - Content

Use the following events to define how the button should respond to taps:

Clicked
Fires when a user taps a DXButtonBase descendant.
Tap
Fires when a user taps a DXButtonBase descendant. This event allows you to pass additional event data.
TapPressed
Fires when a user taps a DXButtonBase descendant and a finger is not released.
TapReleased
Fires when a user taps a DXButtonBase descendant and a finger is released.

Button Types

You can use the ButtonType property to specify one of the following appearance types:

Button Type

Appearance

Accent

DevExpress MAUI DXButton - Accent Type

Filled

DevExpress MAUI DXButton - Filled Type

Outlined

DevExpress MAUI DXButton - Outlined Type

Text

DevExpress MAUI DXButton - Text Type

ToolButton

DevExpress MAUI DXButton - ToolButton Type

Visual States

The button has a different appearance in each state and you can use the following properties to customize its colors:

Default

DevExpress MAUI DXButton - Unfocused State

BorderColor
Gets or sets the border color of the button. This is a bindable property.
TextColor
Gets or sets the text color within the button’s content. This is a bindable property.
IconColor
Gets or sets the icon color within the button’s content. This is a bindable property.

Pressed

DevExpress MAUI DXButton - Pressed State

PressedBorderColor
Gets or sets the border color of the button in the pressed state. This is a bindable property.
PressedBackgroundColor
Gets or sets the background color of the button in the pressed state. This is a bindable property.
PressedTextColor
Gets or sets the text color of the button in the pressed state. This is a bindable property.
PressedIconColor
Gets or sets the icon color of the button in the pressed state. This is a bindable property.

Disabled

DevExpress MAUI DXButton - Disabled State

DisabledBorderColor
Gets or sets the border color of the button in the disabled state. This is a bindable property.
DisabledBackgroundColor
Gets or sets the background color of the button in the disabled state. This is a bindable property.
DisabledTextColor
Gets or sets the text color of the button in the disabled state. This is a bindable property.
DisabledIconColor
Gets or sets the icon color of the button in the disabled state. This is a bindable property.

Font Settings

FontFamily
Gets or sets the button’s text font. This is a bindable property.
FontSize
Gets or sets the text font size within the button’s content. This is a bindable property.
FontAttributes
Gets or sets whether the button’s text font style is bold, italic, or unmodified. This is a bindable property.
FontAutoScalingEnabled
Gets or sets whether the button’s text reflects font scaling preferences set in the operating system. This is a bindable property.

Icons

Icon
Gets or sets the icon image within the button’s content. This is a bindable property.
ShowIcon
Gets or sets whether to show an icon within the button’s content. This is a bindable property.
IconAspect
Gets or sets the icon scale within the button’s content. This is a bindable property.
IconColor
Gets or sets the icon color within the button’s content. This is a bindable property.
PressedIconColor
Gets or sets the icon color of the button in the pressed state. This is a bindable property.
DisabledIconColor
Gets or sets the icon color of the button in the disabled state. This is a bindable property.
IconColorizationEnabled
Gets or sets whether to change the icon color within the button’s content. This is a bindable property.
IconHeight
Gets or sets the icon height within the button’s content. This is a bindable property.
IconWidth
Gets or sets the icon width within the button’s content. This is a bindable property.
IconIndent
Gets or sets the distance between icon and text within the button’s content. This is a bindable property.
IconPlacement
Gets or sets the icon position within the button’s content. This is a bindable property.

Alignment

TextHorizontalAlignment
Gets or sets the text horizontal alignment within the button’s content. This is a bindable property.
TextVerticalAlignment
Gets or sets the text vertical alignment within the button’s content. This is a bindable property.
VerticalContentAlignment
Gets or sets the vertical alignment of the button’s content (icon and text). This is a bindable property.
HorizontalContentAlignment
Gets or sets the horizontal alignment of the button’s content (icon and text). This is a bindable property.
IconPlacement
Gets or sets the icon position within the button’s content. This is a bindable property.

Ripple Effects

UseRippleEffect
Gets or sets whether to show ripple effects when a users taps the button. This is a bindable property.
RippleEffectPosition
Gets or sets whether to show ripple effects in front of button content or behind it. This is a bindable property.

Example

This example shows how to customize button appearance and handle the button click event.

Button State

Default Appearance

Custom Appearance

Default

DevExpress MAUI DXButton - Unfocused State

DevExpress MAUI DXButton - Unfocused State Custom Appearance

Pressed

DevExpress MAUI DXButton - Pressed State

DevExpress MAUI DXButton - Pressed State Custom Appearance

Disabled

DevExpress MAUI DXButton - Disabled State

DevExpress MAUI DXButton - Disabled State Custom Appearance

  1. Add the clear.png icon file to the Resources/Images folder.

  2. Use the following properties to adjust the button’s appearance and handle the Clicked event to clear label on button tap:

    <dx:DXButton 
                ButtonType="Accent"
                Content="CLEAR" 
                TextColor="Black"
                DisabledTextColor="DarkGray"
                PressedTextColor="White"
    
                Icon="clear"
                IconColor="Black"
                DisabledIconColor="DarkGray"
                PressedIconColor="White"  
    
                BorderThickness="2"
                BorderColor="Black"
                DisabledBorderColor="DarkGray"
                PressedBorderColor="DarkOrange"
                CornerRadius="25"
    
                BackgroundColor="Beige"
                DisabledBackgroundColor="Brown"
                PressedBackgroundColor="Gray"
    
                Clicked="Button_Clicked"/>
    
    private void Button_Clicked(object sender, EventArgs e) {
        label.Text = "";
    }
    

You can also handle the Tap event to specify an action that occurs when a user taps a DXButtonBase descendant. The Tap event allows you to pass additional event data.

The following featured scenarios show how you can use the DXButton class:

Expandable Cards with Lists Expandable Cards with Lists Featured Scenario

Cards with Custom Content Cards with Custom Content Featured Scenario

Context Menu Actions in Popup Featured Scenario

Master-Detail View with BottomSheet Control Bottom Sheet Featured Scenario

Infinite Collection View Scrolling Infinite Collection View Scrolling Featured Scenario

Display Filtering UI Elements in a BottomSheet Filtering UI Elements in BottomSheet Featured Scenario

Inheritance

Show 16 items
See Also