Icons in DevExpress Buttons for .NET MAUI

Dec 12, 2023
2 minutes to read

A button’s icon helps users understand the purpose of this button. DXButton and DXToggleButton controls allow you to specify a custom icon, configure its color, position, size, indent, and visibility.

Use the following API to configure the button’s icon:

IconGets or sets the icon image within the button’s content. This is a bindable property.ShowIconGets or sets whether to show an icon within the button’s content. This is a bindable property.IconAspectGets or sets the icon scale within the button’s content. This is a bindable property.IconColorizationEnabledGets or sets whether to change the icon color within the button’s content. This is a bindable property.IconColorGets or sets the icon color within the button’s content. This is a bindable property.CheckedIconColorGets or sets the icon color of the toggle button in the checked state. This is a bindable property.PressedIconColorGets or sets the icon color of the button in the pressed state. This is a bindable property.CheckedPressedIconColorGets or sets the icon color of the toggle button in checked and pressed states. This is a bindable property.DisabledIconColorGets or sets the icon color of the button in the disabled state. This is a bindable property.CheckedDisabledIconColorGets or sets the icon color of the toggle button in checked and disabled states. This is a bindable property.IconHeightGets or sets the icon height within the button’s content. This is a bindable property.IconWidthGets or sets the icon width within the button’s content. This is a bindable property.IconPlacementGets or sets the icon position within the button’s content. This is a bindable property.IconIndentGets or sets the distance between icon and text within the button’s content. This is a bindable property.

You can also specify and customize an icon as button content.

XAML

xml

<dxc:DXButton 
    BackgroundColor="White" 
    BorderThickness="1" 
    BorderColor="Gray" 
    CornerRadius="10" 
    WidthRequest="300" 
    Padding="0" 
    HeightRequest="60">
    <Grid ColumnDefinitions="*, 50">
        <Label 
            Text="Delete" 
            FontSize="18" 
            FontAttributes="Bold" 
            HorizontalOptions="Center"
            VerticalOptions="Center"/>
        <Border Grid.Column="1"
            BackgroundColor="Orange" 
            StrokeShape="RoundRectangle 0,15,0,15" 
            StrokeThickness="0">
            <Image 
                Source="bookmark1" 
                VerticalOptions="Center" 
                HorizontalOptions="Right"/>
        </Border>
    </Grid>
</dxc:DXButton>