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:
<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:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Define the ViewModel:
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;
}
}