.NET MAUI Button Custom Appearance
- 6 minutes to read
DXButton and DXToggleButton contain a set of properties that you can use to customize button appearance:
- ThemeSeedColor
- Gets or sets the primary key color of the applied theme. This is a bindable property.
- CornerRadius
- Gets or sets the corner radius of the button. This is a bindable property.
- Padding
- Gets or sets the amount of space around the button. This is a bindable property.
Alignment
You can use the following properties to customize the button’s 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.
Background
You can use the following properties to change the button’s background color:
- CheckedBackgroundColor
- Gets or sets the background color of the toggle button in the checked 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.
- CheckedPressedBackgroundColor
- Gets or sets the background color of the toggle button in checked and pressed states. This is a bindable property.
- DisabledBackgroundColor
- Gets or sets the background color of the button in the disabled state. This is a bindable property.
- CheckedDisabledBackgroundColor
- Gets or sets the background color of the toggle button in checked and disabled states. This is a bindable property.
Border
You can use the following properties to customize the button’s border:
- BorderColor
- Gets or sets the border color of the button. This is a bindable property.
- BorderThickness
- Gets or sets the border thickness of the button. This is a bindable property.
- CheckedBorderColor
- Gets or sets the border color of the toggle button in the checked state. This is a bindable property.
- PressedBorderColor
- Gets or sets the border color of the button in the pressed state. This is a bindable property.
- CheckedPressedBorderColor
- Gets or sets the border color of the toggle button in checked and pressed states. This is a bindable property.
- DisabledBorderColor
- Gets or sets the border color of the button in the disabled state. This is a bindable property.
- CheckedDisabledBorderColor
- Gets or sets the border color of the toggle button in checked and disabled states. This is a bindable property.
Icon
You can use the following properties to display and customize the button’s icon:
- 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.
- CheckedIconColor
- Gets or sets the icon color of the toggle button in the checked 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.
- CheckedPressedIconColor
- Gets or sets the icon color of the toggle button in checked and pressed states. This is a bindable property.
- DisabledIconColor
- Gets or sets the icon color of the button in the disabled state. This is a bindable property.
- CheckedDisabledIconColor
- Gets or sets the icon color of the toggle button in checked and disabled states. 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.
Text and Font Settings
You can use the following properties to display and customize the text font of a button:
- 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.
- TextColor
- Gets or sets the text color within the button’s content. This is a bindable property.
- CheckedTextColor
- Gets or sets the text color of the toggle button in the checked 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.
- CheckedPressedTextColor
- Gets or sets the text color of the toggle button in checked and pressed states. This is a bindable property.
- DisabledTextColor
- Gets or sets the text color of the button in the disabled state. This is a bindable property.
- CheckedDisabledTextColor
- Gets or sets the text color of the toggle button in checked and disabled states. This is a bindable property.
- TextCharacterSpacing
- Gets or sets the distance between text characters within the button’s content. This is a bindable property.
- TextDecorations
- Gets or sets whether the text decoration within the button’s content is strikethrough, underline, or unmodified. This is a bindable property.
- 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.
- TextLineBreakMode
- Gets or sets the line breaking mode for text within the button’s content. This is a bindable property.
- TextLineHeight
- Gets or sets the vertical distance between lines of text within the button’s content. This is a bindable property.
- TextMaxLines
- Gets or sets the maximum number of text lines within the button’s content. This is a bindable property.
Animation
Buttons display an animation when you tap them. You can use the following properties to customize this animation:
- AnimationDuration
- Gets or sets the duration of the button click animation. This is a bindable property.
- PressedScale
- Gets or sets the scale for the button in the pressed state.