Изменение фона кнопки WPF при нажатии и сброс к исходному состоянию при нажатии другой кнопки в той же панели StackPanel. - PullRequest
0 голосов
/ 07 октября 2018

У меня есть 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>

1 Ответ

0 голосов
/ 13 октября 2018

Извините за задержку ответа.Вот шаги, которые вы можете выполнить, чтобы получить требуемый вывод.

Предполагается, что вы следуете шаблону проектирования 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.

Создайте 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 и вызвать команду click, передав параметр командной строки.

По-прежнемуЛюбые сомнения после внедрения решения, пожалуйста, сообщите нам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...