How to add an image in .NET MAUI Button (SfButton)?

This section explains How to add an image to the .NET MAUI Button. You can create an image button by customizing the appearance of a Button control to display an image as its content. The following is a step-by-step guide on how to create an image button:

Step 1: Add Images to Your Project

First, make sure you have the images you want to use as buttons in your .NET MAUI project. You can place the images in the project’s resources folder or any other location that suits your project structure.

Step 2: Create a Button with an Image

In your XAML layout, you can create a Button element and set its Text property to an empty string. Then, set the ImageSource property to the path of the image you want to use. Here’s an example:

XAML

   <buttons:SfButton WidthRequest="50"
                     HeightRequest="50" 
                     ImageSource="heart.png" 
                     ShowIcon="True"                       
                     TextColor="Black"                      
                     Background="White">
  </buttons:SfButton>

Output

You can create an image button that includes both text and an image by utilizing the Text and ImageSource properties.

XAML

  <buttons:SfButton  WidthRequest="100"
                     HeightRequest="50" 
                     ImageSource="heart.png" 
                     ShowIcon="True" 
                     Text="Heart" 
                     TextColor="Black"                     
                     Background="White">
  </buttons:SfButton>

Output

You can adjust the image alignment within the button by utilizing the ImageAlignment property, as demonstrated in the example below.

XAML

  <buttons:SfButton WidthRequest="100"
                    HeightRequest="50" 
                    ImageSource="heart.png" 
                    ShowIcon="True" 
                    Text="Heart" 
                    TextColor="Black" 
                    ImageAlignment="End" 
                    Background="White">
 </buttons:SfButton>

Output

Conclusion

I hope you enjoyed learning how to create an image button in the .NET MAUI Button.

You can refer to our .NET MAUI Button feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Button documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Button and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!