WPF Change button background image when clicked

Question

I have created a Button and set its background Image. What I want is when the Button is clicked, I want to replace the background Image with another one

How can I accomplish this?

Here is my code with the Button:

<Button x:Name="PopulationReporting" Click="PopulationReporting_Clicked" Width="172" 
       Height="60" Margin="57,170,57,184">
    <Button.Background >
        <ImageBrush ImageSource="images/img-2.png"  />
    </Button.Background>
</Button>

Answer 1

You can do this programmatically (see example here)

or

You can use DataTriggers, where the DataTrigger is bound to a bool value in your ViewModel and changes the Style of your Button. The Button is bound to a Command, so when executed, the Command will change the state of the image (the isPlaying property).

xaml:

<Button Height="23" HorizontalAlignment="Left" Margin="70,272,0,0" Name="buttonPlay" VerticalAlignment="Top" Width="75" Command="{Binding PlayCommand}" CommandParameter="{Binding ElementName=ButtonImage, Path=Source}" >
        <Image Name="ButtonImage">
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding isPlaying}" Value="True">
                            <Setter Property="Source" Value="Play.png" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding isPlaying}" Value="False">
                            <Setter Property="Source" Value="Stop.png" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
</Button>

c#:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }
}

public class ViewModel : INotifyPropertyChanged
{
    private bool _isPlaying = false;
    private RelayCommand _playCommand;

    public ViewModel() 
    {
        isPlaying = false;
    }

    public bool isPlaying
    {
        get { return _isPlaying; }
        set 
        { 
            _isPlaying = value;
            OnPropertyChanged("isPlaying");
        }
    }

    public ICommand PlayCommand
    {
        get
        {
            return _playCommand ?? new RelayCommand((x) => 
            {
                var buttonType = x.ToString();

                if (null != buttonType)
                {
                    if (buttonType.Contains("Play"))
                    {
                        isPlaying = false;
                    }
                    else if (buttonType.Contains("Stop"))
                    {
                        isPlaying = true;
                    }
                }
            });
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class RelayCommand : ICommand
{
   private readonly Predicate<object> _canExecute;
    private readonly Action<object> _execute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<object> execute) : this(execute, null) { }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {

        if (_canExecute == null)
        {
            return true;
        }

        return _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        if (CanExecuteChanged != null)
        {
            CanExecuteChanged(this, EventArgs.Empty);
        }
    }
}