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>

Answer 1

您可以通过编程方式执行此操作（请参阅示例here）

或

您可以使用DataTriggers DataTrigger绑定bool ViewModel的{{1}}并更改Style Button }。 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);
        }
    }
}

单击时WPF更改按钮背景图像

1 个答案: