Is it possible to realize this loading button with the built-in methods？

[MatthewGuo93]

Hi, I want to realize loading buttons like below, what should I do? thanks.

[Keboo]

So here is a working example.

Here is the code for it:

<Button Command="{Binding ClickCommand}">
  <Button.Resources>
    <!--
    This is a Material Design converter 
    Under normal circumstances, it should be declared higher up (at the UserControl/Window/App level). 
    The xmlns should be declared at the higher level too.
    -->
    <converters:BooleanToVisibilityConverter 
      xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
      x:Key="InverseBooleanToVisibilityConverter" FalseValue="Visible" TrueValue="Collapsed" />
  </Button.Resources>
  <Button.Content>
    <StackPanel Orientation="Horizontal">
      <!-- 
      Sets the foreground of the ProgressBar to match the text of the button 
      Sets the Visibily of the progress bar to only show when the button is disabled
      -->
      <ProgressBar IsIndeterminate="True"
                   Style="{StaticResource MaterialDesignCircularProgressBar}"
                   Foreground="{Binding Foreground, ElementName=Text}"
                   Visibility="{Binding IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Converter={StaticResource InverseBooleanToVisibilityConverter}}"
                   Margin="0,0,4,0"/>
      <TextBlock Text="Click Me" x:Name="Text"/>
    </StackPanel>
  </Button.Content>
</Button>

The ViewModel for this then looks like this:

public partial class MainWindowViewModel : ObservableObject
{

    //This is using the source generators from CommunityToolkit.Mvvm to generate a RelayCommand
    //See: https://learn.microsoft.com/dotnet/communitytoolkit/mvvm/generators/relaycommand
    //and: https://learn.microsoft.com/windows/communitytoolkit/mvvm/relaycommand
    [RelayCommand]
    private async Task Click()
    {
        await Task.Delay(2_000);
    }
}

I left several comments in the code, but there is a lot of subtlety in there so let me explain the interaction.
The button's Command property is bound to a generated ICommand property in the view model. This is done using the CommunityToolkit.MVVM package (but any MVVM setup will work). Because of how the community toolkit generates async commands, by default it will only allow a single execute of the command at a time. To enable this, the generated command, will have its "CanExecute" method return false while there is an existing execution running. For my example, I simply set the execution to a delay to simulate some work being done. In WPF when a command's "CanExecute" returns false, the button disables itself. I used this built-in behavior as the trigger to show/hide the progress spinner.

[MatthewGuo93]

Hi, @Keboo. Thank you for the answer.