L'animation fait en sorte que le bouton devienne invisible

Question

J'ai essayé de faire en sorte qu'un contrôle utilisateur s'anime lorsque IsEnabled change.

Librement inspiré de ce poste Button Blinking on DataTrigger

Cependant, quand j'inclus le style ControlTemplate le bouton est invisible. :)

<UserControl x:Class="View.UserControls.MainButton" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="40" d:DesignWidth="300"> 
<UserControl.Resources> 
    <Style TargetType="{x:Type Button}"> 
     <Setter Property="HorizontalAlignment" Value="Center" /> 
     <Setter Property="Cursor" Value="Hand" /> 
     <Setter Property="MinHeight" Value="24" /> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <SolidColorBrush Color="Transparent"/> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard Name="StartBlinking"> 
            <Storyboard> 
             <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Trigger.ExitActions> 
           <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
          </Trigger.ExitActions> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="{x:Type StackPanel}"> 
     <Setter Property="Orientation" Value="Horizontal" /> 
    </Style> 
    <Style TargetType="{x:Type Image}"> 
     <!--<Setter Property="Height" Value="32" /> 
     <Setter Property="Width" Value="32" />--> 
     <Setter Property="Stretch" Value="Uniform" /> 
    </Style> 
    <Style TargetType="{x:Type TextBlock}"> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="Margin" Value="5 0 0 0" /> 
    </Style> 
</UserControl.Resources> 
<Button Width="{Binding Width, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
     Command="{Binding Command, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
     ToolTip="{Binding ToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"> 
    <StackPanel> 
     <Image Source="{Binding ButtonImageSource, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" /> 
     <TextBlock Text="{Binding ButtonText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" /> 
    </StackPanel> 
</Button> 

Answer 1

Déplacer les déclencheurs du Style et éviter redéfinissant la ControlTemplate si vous voulez que le Button à regarder encore comme un Button:

<Style TargetType="{x:Type Button}"> 
    <Setter Property="HorizontalAlignment" Value="Center" /> 
    <Setter Property="Cursor" Value="Hand" /> 
    <Setter Property="MinHeight" Value="24" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <SolidColorBrush Color="Transparent"/> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsEnabled" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Name="StartBlinking"> 
        <Storyboard> 
         <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
      </Trigger.ExitActions> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

Answer 2

Le modèle définit l'aspect visuel du contrôle. Tout ce qui n'est pas mis là par le modèle n'est pas là. Votre modèle ne met aucun élément visuel dans le contrôle. Par conséquent, il n'y a rien de visuel à voir.

Si vous remplacez le modèle, au strict minimum, vous devrez donner un ContentPresenter dans un Border qui montrera la Background couleur du pinceau clignote:

<ControlTemplate TargetType="{x:Type Button}"> 
    <Border Background="{TemplateBinding Background}"> 
     <ContentPresenter 
      /> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsEnabled" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Name="StartBlinking"> 
        <Storyboard> 
         <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Orange" Duration="00:00:00.4" RepeatBehavior="3" AutoReverse="True"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Trigger.ExitActions> 
       <RemoveStoryboard BeginStoryboardName="StartBlinking"/> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Mais si vous êtes heureux Avec le modèle standard Button, utilisez l'approche de mm8 à la place, ce qui laisse cela en place. Réécrire des modèles standards s'avère généralement être beaucoup plus d'efforts que cela en vaut la peine, si vous pouvez trouver une autre façon de faire ce que vous devez faire.