Button Control

The .NET MAUI Button control is a push-button that displays text or an image, and signals that an action should occur when the user clicks or taps it.

Basic Button Example

Here's how to create a simple Button:

XAML:
<Button Text="Click Me" Clicked="OnButtonClicked" />
C#:
// In your code-behind file (e.g., MainPage.xaml.cs)
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        // Handle button click event
        DisplayAlert("Button Clicked", "You tapped the button!", "OK");
    }
}

This code creates a button with the text "Click Me". When the button is clicked, the OnButtonClicked event handler is executed, which displays a simple alert.

Button Properties

The Button control has several properties that allow you to customize its appearance and behavior:

Property Description Default
Text The text to display on the button. Empty string.
ImageSource The image to display on the button. Can be a URI, embedded resource, or file path. null.
TextColor The color of the button's text. Default system color.
FontAttributes The font attributes (Bold, Italic, None) of the button's text. FontAttributes.None.
FontSize The size of the button's text. Default system font size.
BackgroundColor The background color of the button. Default system color.
CornerRadius The radius of the button's corners. Platform dependent (often 0).
Padding The internal spacing of the button. Platform dependent.
Margin The external spacing of the button. Platform dependent.
Clicked The event that is raised when the button is clicked. None.
Command A command to execute when the button is clicked (used with MVVM). null.
CommandParameter A parameter to pass to the Command. null.

Customized Button

Here's an example of a button with custom styling:

XAML:
<Button Text="Submit"
                    TextColor="White"
                    BackgroundColor="#28A745"
                    FontSize="Large"
                    CornerRadius="5"
                    Padding="15,10"
                    Margin="10"
                    Clicked="OnSubmitClicked" />
Output Preview:

Button Events

The primary event for a Button is Clicked, which fires when the user taps or clicks the button.

You can handle this event in your code-behind:

C#:
private void OnSubmitClicked(object sender, EventArgs e)
{
    // Logic to handle form submission
    Console.WriteLine("Submit button was clicked!");
}

Using Commands (MVVM)

For Model-View-ViewModel (MVVM) scenarios, you can bind the Command property to an ICommand implementation in your ViewModel.

XAML:
<Button Text="Save" Command="{Binding SaveCommand}" CommandParameter="{Binding SelectedItem}" />
C# (ViewModel):
public ICommand SaveCommand { get; }

public MyViewModel()
{
    SaveCommand = new Command<object>(ExecuteSaveCommand, CanExecuteSaveCommand);
}

private void ExecuteSaveCommand(object parameter)
{
    // Save logic using the parameter
    var itemToSave = parameter as MyItemType;
    if (itemToSave != null)
    {
        // ... perform save operation ...
        Console.WriteLine($"Saving item: {itemToSave.Name}");
    }
}

private bool CanExecuteSaveCommand(object parameter)
{
    // Determine if the command can be executed
    return parameter != null;
}

API Reference

Microsoft.Maui.Controls.Button

Inherits from <base_class>.

Provides a tappable button that can display text or an image and trigger an action.

Properties

Events

< Previous: Editor Next: Image >