Buttons react to touch events and follow Material Design Guidelines. See more.
Namespace: HorusStudio.Maui.MaterialDesignControls
Inherits from: MaterialButton → ContentView
xmlns:material="clr-namespace:HorusStudio.Maui.MaterialDesignControls;assembly=HorusStudio.Maui.MaterialDesignControls"
<material:MaterialButton
Type="Elevated"
Text="Confirm"
Command="{Binding ButtonCommand}"
IsBusy="{Binding ButtonCommand.IsRunning}"/>var button = new MaterialButton
{
Type = MaterialButtonType.Filled,
Text = "Save",
Command = ButtonCommand,
IsBusy = ButtonCommand.IsRunning
};Gets or sets the if the icon applies the tint color. This is a bindable property.
Property type: Boolean
Default value: true
Gets or sets a value that allows the automation framework to find and interact with this element.
Property type: String
Remarks: This value may only be set once on an element.
When set on this control, the AutomationId is also used as a base identifier for its internal elements:
- The Button control uses the same AutomationId value.
- The button's busy indicator uses the identifier "{AutomationId}_BusyIndicator".
This convention allows automated tests and accessibility tools to consistently locate all subelements of the control.
Gets or sets a Brush that describes the background of the button. This is a bindable property.
Property type: Brush
Gets or sets a color that describes the background color of the button. This is a bindable property.
Property type: Color
Default value: Light: MaterialLightTheme.Primary - Dark: MaterialDarkTheme.Primary
Gets or sets a color that describes the border stroke color of the button. This is a bindable property.
Property type: Color
Remarks: This property has no effect if IBorderElement.BorderWidth is set to 0. On Android this property will not have an effect unless VisualElement.BackgroundColor is set to a non-default color.
Gets or sets the width of the border, in device-independent units. This is a bindable property.
Property type: Double
Remarks: Set this value to a non-zero value in order to have a visible border.
Gets or sets the color for the busy indicator. This is a bindable property.
Property type: Color
Gets or sets the size for the busy indicator. This is a bindable property.
Property type: Double
Gets or sets the spacing between each of the characters of Text when displayed on the button. This is a bindable property.
Property type: Double
Gets or sets the command to invoke when the button is activated. This is a bindable property.
Property type: ICommand
Remarks: This property is used to associate a command with an instance of a button. This property is most often set in the MVVM pattern to bind callbacks back into the ViewModel. VisualElement.IsEnabled is controlled by the Command.CanExecute(object) if set.
Gets or sets the parameter to pass to the Command property.
Property type: Object
Default value: null
Gets or sets an object that controls the position of the button image and the spacing between the button's image and the button's text. This is a bindable property.
Property type: ButtonContentLayout
Gets or sets the corner radius for the button, in device-independent units. This is a bindable property.
Property type: Int32
Gets or sets a custom View for busy indicator. This is a bindable property.
Property type: View
Gets or sets a value that indicates whether the font for the text of this button is bold, italic, or neither. This is a bindable property.
Property type: FontAttributes
Determines whether or not the font of this entry should scale automatically according to the operating system settings. This is a bindable property.
Property type: Boolean
Default value: True
Remarks: Typically this should always be enabled for accessibility reasons.
Gets or sets the font family for the text of this entry. This is a bindable property.
Property type: String
Gets or sets the size of the font for the text of this entry. This is a bindable property.
Property type: Double
Gets or sets the desired height override of this element. This is a bindable property.
Property type: Double
Default value: -1
Remarks:
-
which means the value is unset; the effective minimum height will be zero.
- HeightRequest does not immediately change the Bounds of an element; setting the HeightRequest will change the resulting height of the element during the next layout pass.
Gets or sets the icon size. This is a bindable property.
Property type: Size
Default value: Size.Zero.
Remarks: With a default value of Size.Zero, the icon will be handled automatically by each platform's native behavior. If a size is specified, that size will be applied to the icon on all platforms.
Gets or sets the color for the icon of the button. This is a bindable property.
Property type: Color
Allows you to display a bitmap image on the Button. This is a bindable property.
Property type: ImageSource
Remarks: For more options have a look at ImageButton.
Internal implementation of the Button control.
Property type: Button
Remarks: This property can affect the internal behavior of this control. Use only if you fully understand the potential impact.
This property is for internal use by the control. The IconTintColor property should be used instead.
Property type: Color
Gets or sets if button is on busy state (executing Command). This is a bindable property.
Property type: Boolean
Default value: false
Determines how Text is shown when the length is overflowing the size of this button. This is a bindable property.
Property type: LineBreakMode
Gets or sets the padding for the button. This is a bindable property.
Property type: Thickness
Gets or sets the shadow effect cast by the element. This is a bindable property.
Property type: Shadow
Gets or sets the text displayed as the content of the button.
Property type: String
Default value: null
Remarks: Changing the text of a button will trigger a layout cycle.
Gets or sets the color for the text of the button. This is a bindable property.
Property type: Color
Default value: Light: MaterialLightTheme.OnPrimary - Dark: MaterialDarkTheme.OnPrimary
Gets or sets decorations for Button text. This is a bindable property.
Property type: TextDecorations
Applies text transformation to the Text displayed on this button. This is a bindable property.
Property type: TextTransform
Gets or sets a custom touch animation to be executed when Button is clicked. This is a bindable property.
Property type: ITouchAnimation
Default value: null
Gets or sets an animation to be executed when Button is clicked. This is a bindable property.
Property type: TouchAnimationTypes
| Name | Value | Description |
|---|---|---|
| None | 0 | None: no animation runs. |
| Fade | 1 | Fade: Represents an animation that simulates a "fade" effect by changing the opacity over the target element. |
| Scale | 2 | Scale: Represents an animation that simulates a "sink" or "sunken" effect by scaling the target element. |
| Bounce | 3 | Bounce: Represents an animation that simulates a "sink" or "sunken" effect with a "bounce" effect when the user releases the target element. |
Default value: TouchAnimationTypes.Fade.
Gets or sets the button type according to MaterialButtonType. This is a bindable property.
Property type: MaterialButtonType
| Name | Value | Description |
|---|---|---|
| Elevated | 0 | Elevated button |
| Filled | 1 | Filled button |
| Tonal | 2 | Filled tonal button |
| Outlined | 3 | Outlined button |
| Text | 4 | Text button |
| Custom | 5 | Custom button |
Default value: MaterialButtonType.Filled
Occurs when the button is clicked/tapped.
Occurs when the button is focused.
Occurs when the button is pressed.
Occurs when the button is released.
Occurs when the button is touched.
Occurs when the button is unfocused.
- [iOS] IconTintColor doesn't react to VisualStateManager changes.
- Shadow doesn't react to VisualStateManager changes.
- ContentLayout is buggy.
- Add default Material behavior for pressed state on default styles (v2).
- [iOS] FontAttributes and SupportingFontAttributes don't work (MAUI issue)
- [Android] When placed inside a ScrollView, it will fire Command on drag event as well. This behavior is totally inherited from MAUI Button. If you need to avoid that, we recommend using MaterialCard, MaterialChip, or MaterialViewButton instead.