Change color when the button is active (WPF in MVVM architecture)

Question

<Button Command="{Binding LanguageChangeCommand}" CommandParameter="English" Content="English" Background="{Binding Button0}" Width="80" Grid.Column="3" Grid.Row="3"  Margin="8,15,162,21"/>     
<Button Command="{Binding LanguageChangeCommand}" CommandParameter="China" Content="中国" Background="{Binding Button1}" Width="80" Grid.Column="3" Grid.Row="3"  Margin="78,19,77,21" />
<Button Command="{Binding LanguageChangeCommand}" CommandParameter="Tamil" Content="தமிழ்" Background="{Binding Button2}" Width="80" Grid.Column="3" Grid.Row="3" Margin="165,15,10,21" />

I want to change the color of button when An active button. Please help me I want to change my button colors when one button clicked the color should be change as different from other buttons. and after clicking an another button the button clicked previously should be colored as normal an just clicked button should as mentioned.

Answer 1

You can easily achieve this using RadioButton grouping.

<Window.Resources>
    <Style x:Key="GroupToggleStyle" TargetType="RadioButton" 
           BasedOn="{StaticResource {x:Type ToggleButton}}">
        <Setter Property="Foreground" Value="Blue"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" 
                         Value="True">
                <DataTrigger.Setters>
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger.Setters>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
                 CommandParameter="English" Content="English" Width="80" 
                 Style="{StaticResource GroupToggleStyle}"/>
    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
                 CommandParameter="China" Content="中国" Width="80" 
                 Style="{StaticResource GroupToggleStyle}"/>
    <RadioButton GroupName="LanguageGroup" Command="{Binding LanguageChangeCommand}" 
                 CommandParameter="Tamil" Content="தமிழ்" Width="80" 
                 Style="{StaticResource GroupToggleStyle}"/>
</StackPanel>

Answer 2

You could try to refer to the following code.

MainWindow.xaml:

<StackPanel>
    <Button Height="50" Width="100" Content="Button1" Command="{Binding LanguageChangeCommand}" CommandParameter="English">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Orange"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsButton1Active}" Value="True">
                        <Setter Property="Background" Value="LightSeaGreen" />
                        <Setter Property="Foreground" Value="White" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
    <Button Height="50" Width="100"   Content="Button2"  Command="{Binding LanguageChangeCommand}" CommandParameter="China">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Orange"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsButton2Active}" Value="True">
                        <Setter Property="Background" Value="LightSeaGreen" />
                        <Setter Property="Foreground" Value="White" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
</StackPanel>

MainWindow.xaml.cs:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Input;

namespace ButtonCommand
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      DataContext=new ViewModel();
    }
  }
  public class ViewModel:INotifyPropertyChanged
  {
    public ViewModel()
    {
      languageChangeCommand = new UICommand(OnClick);
    }
    private UICommand languageChangeCommand;
    public UICommand LanguageChangeCommand
    {
      get { return languageChangeCommand; }
    }
    private void OnClick(object parameter)
    {
      switch (parameter.ToString())
      {
        case "English":
          IsButton1Active = true;
          IsButton2Active = false;
          break;

        case "China":
          IsButton2Active = true;
          IsButton1Active = false;
          break;
      }
    }
    private bool isButton1Active;
    private bool isButton2Active;
    public bool IsButton1Active
    {
      get { return isButton1Active; }
      set { isButton1Active = value; OnPropertyChanged(); }
    }
    public bool IsButton2Active
    {
      get { return isButton2Active; }
      set { isButton2Active = value; OnPropertyChanged(); }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
  }
  public class UICommand : ICommand
  {
    private readonly Action<object> _execute;
    private readonly Func<bool> _canExecute;
    public UICommand(Action<object> onExecuteMethod, Func<bool> onCanExecuteMethod = null)
    {
      _execute = onExecuteMethod;
      _canExecute = onCanExecuteMethod;
    }
    public bool IsCanExecute { get; set; }
    public event EventHandler CanExecuteChanged
    {
      add { if (_canExecute != null) CommandManager.RequerySuggested += value; }
      remove { if (_canExecute != null) CommandManager.RequerySuggested -= value; }
    }
    public void Execute(object parameter)
    {
      _execute(parameter);
    }
    public bool CanExecute(object parameter)
    {
      IsCanExecute = (_canExecute == null || _canExecute());
      return IsCanExecute;
    }
    public void RaiseCanExecuteChanged()
    {
      CommandManager.InvalidateRequerySuggested();
    }
  }
}