How to customize the appearance of the Button using datatemplate in .NET MAUI (SfButton)?

This section explains how to customize the appearance of the .NET MAUI Button using DataTemplate, Can be achieved by adding your custom view in the Content property. Follow the given steps:
Step 1: Add DataTempate in XAML
First, add the initial and loaded content for loading action in DataTemplate with appropriate properties. For example, I add BusyIndicator and Label for performing loading appearance.
Step 2: Add dynamic DataTemplate update in cs file
In your cs file, Add an event for loading appearance when you click the button and update initial and loaded templates dynamically.
The following code sample demonstrates how to apply the busy indicator control as a custom view for a button.

XAML:

   <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="loadingTemplate" >
            <HorizontalStackLayout>
                <busy:SfBusyIndicator x:Name="busy" 
                                      AnimationType="CircularMaterial" 
                                      IsRunning="True" 
                                      WidthRequest="80" 
                                      HeightRequest="60" 
                                      IndicatorColor="White" 
                                      VerticalOptions="Center" 
                                      HorizontalOptions="Start"/>
                <Label x:Name="label" 
                       Text="Loading..." 
                       FontSize="20" 
                       HorizontalOptions="End" 
                       VerticalOptions="Center" 
                       TextColor="White" />
            </HorizontalStackLayout>
        </DataTemplate>
            <DataTemplate x:Key="initialTemplate">
                        <Label x:Name="label" 
                               Text="Submit" 
                               FontSize="20" 
                               HorizontalOptions="Center" 
                               VerticalOptions="Center" 
                               TextColor="White" />
            </DataTemplate>
    </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <buttons:SfButton   x:Name="button"
                            Text="Button" 
                            Content="{StaticResource initialTemplate}"
                            Clicked="button_Clicked"
                            Background="Orange"
                            WidthRequest="200"
                            HeightRequest="50"/>
    </ContentPage.Content>
    

C#:

private void button_Clicked(object sender, EventArgs e)
{
    var template = (DataTemplate)Resources["initialTemplate"];
    var itemTemplate = (DataTemplate)Resources["loadingTemplate"];
    if(button.Content == template)
    {
        button.Content = itemTemplate;
        button.Background = Colors.Gray;
    }
    else
    {
        button.Content = template;
        button.Background = Colors.Orange;
    }
}

Output:

Conclusion
I hope you enjoyed learning how to customize the appearance of the button using DataTemplate in .NET MAUI Button (SfButton).

Refer to our .NET MAUI Button’s feature tour page for 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!