Hình nền của nút thay đổi WPF khi nhấp vào

Question

Tôi đã tạo một Button và đặt nền của nó là Image. Những gì tôi muốn là khi nhấp vào Button, tôi muốn thay thế nền Image bằng một số khác

Làm cách nào để thực hiện điều này?

Đây là mã của tôi với 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

Bạn có thể làm điều này theo chương trình (xem ví dụ here)

hoặc

Bạn có thể sử dụng DataTriggers, nơi DataTrigger được ràng buộc với một Giá trị bool trong số ViewModel và thay đổi Style trong số Button của bạn. Các Button được ràng buộc với một Command, vì vậy khi thực hiện, Command sẽ thay đổi trạng thái của image (thuộc tính 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); 
     } 
    } 
}