WPF点击按钮时如何更改背景图像

Question

我创建了一个名为Button的按钮，并设置了它的背景Image。我的目标是，当用户点击此Button时，我想用另一张图片来替换原来的背景Image。

我该如何实现这个功能？

以下是包含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>

- Ehsan Sajjad

Answer 1

您可以以编程方式实现此操作（请参见此处的示例）。

或者，您可以使用DataTriggers，其中DataTrigger绑定到ViewModel中的bool值，并更改Button的Style。Button绑定到Command，因此在执行时，Command将更改image（即isPlaying属性）的状态。

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);
        }
    }
}

- d.moncada

---

我尝试跟随这个例子。第一次运行时，图像被正确加载。当我更改状态（调用绑定属性）时，新的图标不再加载。有什么建议吗？ - Ștefan Blaga

我试着按照这个例子操作。刚开始运行时，图片加载得很正常。但是当我改变状态（调用绑定属性）时，新的图标就不再加载了。有什么建议吗？ - Ștefan Blaga