c# - 单击同一 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>

score 1 · Accepted Answer

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

假设您遵循 MVVM 设计模式。

在 .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 中添加要添加的按钮数量。

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

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

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

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

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

这是绑定到 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;
     }
 }

这是我的 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 属性并通过传递命令参数来调用单击命令来实现功能。

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

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

1 回答 1

Related

Reference