Introducing the new .NET MAUI Button Control
Detailed Blog page Skeleton loader
Introducing the new .NET MAUI Button Control

Get ready to revolutionize your .NET MAUI applications with the all-new Syncfusion .NET MAUI Button control, unveiled in our latest release, 2023 Volume 3. It isn’t just a button; it’s a powerhouse of customization. With features that allow you to set icons, background images, and corner edge radii, you can create a button that truly represents your brand. Plus, you can tailor the appearance for different visual states with the Visual State Manager.

Let’s explore the key features of this groundbreaking .NET MAUI Button control and the steps to get started with it.

Key features

The .NET MAUI Button control supports many user-friendly features. Some of them are:

Image support

Incorporating images into your mobile app’s buttons can greatly enhance their visual appeal. The .NET MAUI Button control supports image integration, allowing you to create a sophisticated appearance that aligns perfectly with your app’s style.

ShowIcon

With the ShowIcon property, you can easily enable or disable the display of an icon image within the Button control. This provides flexibility in choosing when to show or hide the associated image.

ImageSource

The ImageSource property allows you to customize the Button icon image by adding a custom image, giving you complete control over the visual representation.

ImageSize and ImageAlignment

You can fine-tune the width and alignment of the icon image using the ImageSize and ImageAlignment properties, respectively. You can position the icon at the button’s start, end, top, bottom, left, or right positions, providing extensive design possibilities.

Customizing the Image Icon Position in the .NET MAUI Button
Customizing the Image Icon Position in the .NET MAUI Button Control
Customizing the Image Icon Position in the .NET MAUI Button Control

Background image support

The .NET MAUI Button control allows you to customize the background using the BackgroundImageSource property.

Adding a Background Image in the .NET MAUI Button Control
Adding a Background Image in the .NET MAUI Button Control

Custom content

With the .NET MAUI Button control, you can use any custom views as templates, enabling you to create buttons with unique and complex content.

Customizing Content in .NET MAUI Button Control
Customizing Content in .NET MAUI Button Control

Font customizations

Tailor the font style and appearance to your specific needs with the FontSize, FontFamily, FontAttributes, and TextColor properties. Whether you require pixel precision or standard options like small, medium, or large fonts, the choice is yours.

Font Customizations in .NET MAUI Button Control
Font Customizations in .NET MAUI Button Control

Border customizations

Buttons often need distinctive borders to stand out. The .NET MAUI Button control also supports customizing its various border elements.

Border color

The border color of the Button can easily be customized to any desired color.

Customizing Border Color in .NET MAUI Button Control
Customizing Border Color in .NET MAUI Button Control

Border thickness

Control the thickness of the Button’s border, allowing for variations in visual style. If a border is not needed, you can remove it altogether.

Customizing Border Width in .NET MAUI Button Control
Customizing Border Width in .NET MAUI Button Control

Corner radius

Create buttons with rounded edges by customizing the corner radii, adding a touch of elegance to your app’s design.

Customizing Corner Radii in .NET MAUI Button Control
Customizing Corner Radii in .NET MAUI Button Control

UI customizations

The .NET MAUI Button control offers various visual styles to cater to your app’s specific needs. Let’s see them.

Primary buttons

A primary button is the default button style with an accent color as the background.

.NET MAUI Primary Button
.NET MAUI Primary Button

Normal buttons

A normal button is a button with a traditional look and appearance.

.NET MAUI Normal Button
.NET MAUI Normal Button

Flat buttons

For a sleek and minimalistic design, you can customize the .NET MAUI Button control to be devoid of border or background color. This allows for a clean, uncluttered aesthetic that focuses on functionality.

.NET MAUI Flat Button
.NET MAUI Flat Button

Outline buttons

You can create a unique and crisp appearance for the Button by defining an outline with a border while opting for no background color.

.NET MAUI Outline Button
.NET MAUI Outline Button

Icon buttons

The .NET MAUI Button control empowers users to add icons and captions to it.

.NET MAUI Icon Button
.NET MAUI Icon Button

Circular buttons

You can craft a unique style by defining the shape of a button with rounded edges and incorporating font icons. This customization offers a distinctive and appealing aesthetic to your user interface.

.NET MAUI Circular Button
.NET MAUI Circular Button

Note: For more details, refer to the .NET MAUI Button documentation.

Getting started with the .NET MAUI Button control

We have seen the key features of the .NET MAUI Button control. Now let’s learn how to integrate it into your .NET MAUI app and utilize its features:

Step 1: Create a .NET MAUI app

First, create a .NET MAUI application.

Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available on the NuGet Gallery. To add the .NET MAUI Button control to your project, open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.Buttons and then install it.

Step 3: Register the handler

Register the handler for the Syncfusion core in the MauiProgram.cs file.

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();
        }
   }
}

Step 4: Add the namespace

Add the Syncfusion.Maui.Buttons namespace in your XAML page.

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

Step 5: Initialize the Syncfusion .NET MAUI Button control

Finally, initialize the Syncfusion .NET MAUI Button control. Refer to the following code example.

<buttons:SfButton x:Name="button" WidthRequest="100" Text = "Click me" TextColor ="White"/>

After executing these code examples, we’ll get a button control like the following image.

Integrating the Button Control in the .NET MAUI Application
Integrating the Button Control in the .NET MAUI Application

GitHub references

For more details, refer to the .NET MAUI Button Control demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion .NET MAUI Button control that rolled out in the 2023 Volume 3 release. You can learn more about the latest .NET MAUI advancements on our Release Notes and What’s New pages. Try them out and leave your feedback in the comments section below!

Download Essential Studio for .NET MAUI to start evaluating them immediately.

If you have any questions, you can also contact us through our support forumsupport portal, or feedback portal. We are always happy to help you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Be the first to get updates

Anandhan Rajagopal

Meet the Author

Anandhan Rajagopal

Anandhan Rajagopal is a software engineer/.NET developer since 2021, working on developing customized and feature-rich front-end UI components for .NET MAUI and Xamarin.Forms in Syncfusion.