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设计模式。

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

我假设您知道如何在窗口中设置数据上下文。

此示例为您提供了有关如何通过创建在ViewModel中创建的一些属性以及将View中的命令绑定到ViewModel Command属性并通过传递Command Parameter来调用click命令的功能的认识。

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

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

1 个答案: