Getting Started with .NET MAUI Button

6 Dec 20234 minutes to read

This section explains the steps required to work with the .NET MAUI Button control.

Creating an application with .NET MAUI Button

This section explains the steps required to work with the SfButton control for .NET MAUI.

To get start quickly with our .NET MAUI Button, you can check the below video.

Adding a .NET MAUI Button reference

The Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Button to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Buttons, and install it.

Handler registration

In the MauiProgram.cs file, register the handler for the Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace ButtonSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Adding the .NET MAUI Button control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"

C#

using Syncfusion.Maui.Buttons;

Initialize Button

Now, add the SfButton control with a required optimal name using the included namespace.

XAML

<buttons:SfButton x:Name="button" />

C#

SfButton button = new SfButton();

Button icon

The button icon can be defined using the ImageSource and ShowIcon properties of SfButton.

XAML

<buttons:SfButton x:Name="SfButton" 
                    Text="Button"
                    TextColor="White" 
                    ShowIcon="True" 
                    ImageSource="button_Heart.png"/>

C#

SfButton button = new SfButton();
button.Text = "Button";
button.TextColor = Colors.White;
button.ImageSource = "button_Heart.png";
button.ShowIcon = true;

Button background image

The button background image can be defined using the BackgroundImageSource property of SfButton.

XAML

<buttons:SfButton x:Name="SfButton" 
                    Text="Nature"
                    FontAttributes="Bold" 
                    BackgroundImageSource="button_background.png" 
                    CornerRadius="10" 
                    WidthRequest="150"/>

C#

SfButton button = new SfButton();
button.Text = "Nature";
button.FontAttributes = FontAttributes.Bold;
button.BackgroundImageSource = "button_background.png";
button.CornerRadius = 10;
button.WidthRequest = 150;

Find the complete getting started sample of the .NET MAUI Button from this link.