单击同一 StackPanel 中的另一个按钮时，WPF 按钮背景更改并重置为原始按钮。

Question

我有一个带有几个按钮的 StackPanel。我想在单击时更改按钮的颜色，并在单击 StackPanel 中的另一个按钮时将其重置为原始颜色。是否可以在 StackPanel 上应用单一样式，或者我必须为每个按钮创建样式？如果是，那么如何。

这是应用于 StackPanel 的样式代码，但这会更改按钮的颜色，但不会在单击另一个按钮时重置它。

<Style TargetType="StackPanel" x:Key="GlobalStackPanelStyle" BasedOn="{StaticResource FlatStackPanel}">
      <Style.Resources>
            <Style TargetType="Button">
                <Setter Property="Button.Background" Value="Blue"/>
                <Style.Triggers> 
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Green"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>                           
                    </Trigger>                        
                </Style.Triggers>
            </Style>
        </Style.Resources>
    </Style>

Answer 1

抱歉，回复延迟。以下是您可以获得所需输出的步骤。

假设您遵循 MVVM 设计模式。

1. 在 .xaml 中创建按钮并将命令绑​​定到每个按钮，如下所示，

        <Button Height="32" Width="180" Grid.Column="1" Content="Button 1"
                Command="{Binding ClickCommand}" CommandParameter="Button 1">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsButton1Active}" Value="True">
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="Foreground" Value="White" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsButton1Active}" Value="False">
                            <Setter Property="Background" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
   
        <Button Height="32" Width="180" Grid.Column="2" Content="Button 2"
                Margin="5,0,0,0" 
                Command="{Binding ClickCommand}" CommandParameter="Button 2">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsButton2Active}" Value="True">
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="Foreground" Value="White" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsButton2Active}" Value="False">
                            <Setter Property="Background" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
   

注意：您可以在上面的 xaml 中添加要添加多少个按钮。

1. 创建 2 个布尔属性并通过 ClickCommand 方法设置这些布尔属性的值。

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

2. 这是命令代码 - 将其添加到您的 ViewModel 中

    private UICommand _clickCommand;
    public UICommand ClickCommand
    {
        get { return _clickCommand; }
    }
   

3. 在您的视图模型构造函数中编写以下语句

    public YourViewModelConstructor()
    {
        _clickCommand = new UICommand(OnClick);
    }
   

4. 这里是绑定到 ClickCommand 的方法

    private void OnClick(object parameter)
    {
        switch(parameter.ToString())
        {
            case "Button 1":
                IsButton1Active = true;
                IsButton2Active = false;
                break;
   
            case "Button 2":
                IsButton2Active = true;
                IsButton1Active = false;
                break;
        }
    }
   

5. 这是我的 UICommand 类的代码

    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; }
   
      #region ICommand Members
   
    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;
    }
   
    #endregion
   
    public void RaiseCanExecuteChanged()
    {
        CommandManager.InvalidateRequerySuggested();
    }
    }
   

我假设您知道如何将 datacontext 设置到您的窗口。

此示例让您了解如何通过创建在 ViewModel 中创建的一些属性并将 View 中的命令绑定到 ViewModel Command 属性并通过传递命令参数调用单击命令来实现功能。

实施解决方案后仍有疑问，请告诉我们。