How to Create a Loading Button

You can create a loading button using the Telerik .NET MAUI TemplatedButton. The loading indicator displays inside the button when users click or tap the button.

The following .gif shows the loading button:

Solution

To create a loading button, use a RadTemplatedButton with a ContentTemplate. Then inside the ContentTemplate define a RadBusyIndicator.

1. Define the button in XAML:

• XAML

<VerticalStackLayout HorizontalOptions="Center">
    <telerik:RadTemplatedButton Content="{Binding}"
                                TextColor="Black"
                                Background="#FAFAFA"
                                BorderBrush="LightGray"
                                BorderThickness="1"
                                Command="{Binding Command}"
                                HorizontalOptions="Center">
        <telerik:RadTemplatedButton.ContentTemplate>
            <DataTemplate>
                <Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
                    <telerik:RadBusyIndicator AnimationContentHeightRequest="16"
                                              AnimationContentColor="#80CBC4"
                                              AnimationContentWidthRequest="16"
                                              AnimationType="Animation4"
                                              IsBusy="{Binding IsLoading}"
                                              IsVisible="{Binding IsLoading}"
                                              Margin="0, 0, 10, 0" />
                    <Label Grid.Column="1"
                           Text="{Binding Text}"
                           TextColor="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadTemplatedButton}}, Path=TextColor}" />
                </Grid>
            </DataTemplate>
        </telerik:RadTemplatedButton.ContentTemplate>
    </telerik:RadTemplatedButton>
    <VerticalStackLayout.BindingContext>
        <local:LoadingButtonViewModel/>
    </VerticalStackLayout.BindingContext>
</VerticalStackLayout>

2. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Define the ViewModel:

• C#

public class LoadingButtonViewModel : NotifyPropertyChangedBase
{
    private const string NormalText = "Click to update data";
    private const string LoadingText = "Updating data";
    private Command command;
    private bool isLoading;
    private string text = NormalText;

    public LoadingButtonViewModel()
    {
        this.Command = new Command(ExecuteCommand, CanExecuteCommand);
    }

    public Command Command
    {
        get => this.command;
        set => UpdateValue(ref this.command, value);
    }

    public bool IsLoading
    {
        get => this.isLoading;
        set
        {
            if (this.UpdateValue(ref this.isLoading, value))
            {
                this.Text = this.isLoading ? LoadingText : NormalText;
                this.command.ChangeCanExecute();
            }
        }
    }

    public string Text
    {
        get => this.text;
        set => this.UpdateValue(ref this.text, value);
    }

    private async void ExecuteCommand()
    {
        this.IsLoading = true;
        await Task.Delay(TimeSpan.FromSeconds(5));
        this.IsLoading = false;
    }

    private bool CanExecuteCommand()
    {
        return !this.IsLoading;
    }
}

Additional Resources

• Configure the TemplatedButton
• Set Visual States
• Events
• Execute Command
• Style the TemplatedButton