Анимировать цвет фона кнопки при ошибке

Question

Чтобы указать на ошибку, я бы хотел временно изменить цвет фона кнопки.Я новичок в WPF-анимации и не могу найти простой пример для продолжения.И чтобы еще больше усложнить ситуацию, я использую триггер для уведомления об ошибках.

Итак, вот мой XAML, и я хотел бы знать, как заменить Background Setter анимацией (скажем, мигать краснымтри раза за пять секунд или что-то в этом роде.

<UserControl>
  <UserControl.Resources>
    <Style x:Key="ErrorStyle" TargetType="Button">
      <!--Clear the default error template (a red border)-->
      <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
          <ControlTemplate>
            <AdornedElementPlaceholder />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
          <Setter Property="ToolTip" 
              Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
          <!--TODO: Replace with animation-->
          <Setter Property="Background" Value="Orange"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </UserControl.Resources>
  <Grid>
    <Button Command="{Binding ProgramCommand, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}" 
        Style="{StaticResource ErrorStyle}">
      _Program
    </Button>
  </Grid>
</UserControl>

Я также открыт для предложений по улучшению (простого) уведомления об ошибках.

Answer 1

Для этого можно использовать Trigger.EnterActions.

<Trigger Property="Validation.HasError" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color" Duration="0:0:0.3"
                                From="White" To="Red" RepeatBehavior="3x" AutoReverse="True"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

( Предполагается, что фоном является SolidColorBrush, поскольку Storyboard.TargetProperty указывает на его Color property )

---

Для градиентов вы также можете анимировать цвет определенного стопа, например

<TextBox Text="{Binding TestInt}">
    <TextBox.Background>
        <LinearGradientBrush>
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </TextBox.Background>
    <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" Duration="0:0:0.3"
                                                From="White" To="Red" RepeatBehavior="3x" AutoReverse="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

Answer 2

Благодаря ответу @ HB вот мой окончательный код.Вы заметите, что вместо установки фона кнопки в SolidColor я добавлял изменение цвета при каждом градиенте кисти по умолчанию для кнопки.Это создает эффект, который превращает всю кнопку в красный цвет, но позволяет ей вернуться к своему обычному градиентному виду.

<UserControl>
  <UserControl.Resources>
    <Style Key="ErrorStyle" TargetType="Button">
      <!--Clear the default error template (a red border)-->
      <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
          <ControlTemplate>
            <AdornedElementPlaceholder />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
          <Setter Property="ToolTip"
              Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="Red" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="3x" />
                <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="Red" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="3x" />
                <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="Red" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="3x" />
                <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="Red" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="3x" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
        </Trigger>
      </Style.Triggers>
    </Style>
  </UserControl.Resources>
  <Grid>
    <Button Command="{Binding ProgramCommand, ValidatesOnExceptions=True, ValidatesOnDataErrors=True}"
        Style="{StaticResource ErrorStyle}">
      _Program
    </Button>
  </Grid>
</UserControl>

Answer 3

<Trigger Property="Validation.HasError" Value="True">
   <BeginStoryboard>
      <Storyboard>
         <ColorAnimation Storyboard.TargetProperty="Background" From="White" 
            To="Red" Duration="0:0:1" AutoReverse="True" RepeatBehavior="3x"/>
      </Storyboard>
   </BeginStoryboard>
</Trigger>