Changing Button Color On Click in MVVM pattern

Question

I have an ICommand that fires when a Button is pushed. I need to change the Background color of this Button when this happens. How can I do this using the MVVM pattern?

private DelegateCommand asioMuted;

public ICommand AsioMuted
{
    get
    {
        if (asioMuted == null)
        {
            asioMuted = new DelegateCommand(MuteAsio);
        }

        return asioMuted;
    }
}

XAML:

<Button Content="Mute" 
        Command="{Binding AsioMuted}"
        HorizontalAlignment="Left" 
        Margin="29,282,0,0"  
        VerticalAlignment="Top" 
        Width="42" 
        RenderTransformOrigin="-0.273,1.818" />

Answer 1

Bind the button's background color to a brush property on your ViewModel. Then, have the ICommand change the color of the brush on the view model. Some might also suggest binding the color to an IsMuted property on the ViewModel and then using a converter to translate true/false to a brush. This approach removes any UI specific details from the ViewModel.

Answer 2

@Quanta code-behind may contain UI logic code that implements visual behavior, so change the color of the brush on the viewModel is against the mvvm pattern.

The view defines and handles UI visual behavior, such as animations or transitions that may be triggered from a state change in the view model or via the user's interaction with the UI. for support of my words: http://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx