WPF ColorAnimation semble conserver une partie de la couleur d'origine?

Question

J'ai un problème étrange avec une animation en couleur.

J'ai une liste d'éléments liés à une zone de liste. Ces éléments possèdent une propriété enum qui peut avoir l'une des trois valeurs suivantes: NoRemarks, RemarksFound et RemarksUpdated.

Sur le datatemplate pour cette zone de liste, j'ai un rectangle qui affiche une couleur liée à l'état de l'élément - Rouge, Orange ou Vert. Il y a un déclencheur de données dans le modèle pour animer la boîte, mais à chaque fois que l'animation se déclenche, il semble conserver les anciennes couleurs. Si j'anime du rouge au vert, j'obtiens une sorte de couleur orangée vert foncé. Si j'anime de l'orange au vert, j'obtiens une couleur similaire, bien que je puisse voir que la couleur est légèrement différente de celle que j'anime du rouge au vert.

Voici le XAML - Je n'ai inclus les pièces nécessaires:

Le rectangle:

<Rectangle x:Name="HeaderRemarkStatusRectangle" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" 
     RadiusX="1" RadiusY="1" Width="10" Margin="3" StrokeThickness="1" > 
    <Rectangle.Stroke> 
     <SolidColorBrush Color="#FFDC5A5A" x:Name="RectangleStroke" /> 
    </Rectangle.Stroke> 
    <Rectangle.Fill> 
     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
     <GradientStop Color="#ff7a7a" Offset="0.5" x:Name="GradientStop1" /> 
     <GradientStop Color="#ff5653" Offset="0.5" x:Name="GradientStop2" /> 
     </LinearGradientBrush> 
    </Rectangle.Fill> 
    </Rectangle> 

Les déclencheurs:

<DataTrigger Binding="{Binding Path=ItemStatus}" Value="RemarksUpdated"> 
    <DataTrigger.EnterActions> 
     <BeginStoryboard> 
     <BeginStoryboard.Storyboard> 
      <Storyboard Duration="0:0:0.5" > 
      <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" /> 
      <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" /> 
      <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" /> 
      </Storyboard> 
     </BeginStoryboard.Storyboard> 
     </BeginStoryboard> 
    </DataTrigger.EnterActions> 
    </DataTrigger> 
</DataTemplate.Triggers> 

J'ai essayé quelques choses à corriger le problème ...

J'ai essayé de placer les Datatrigger.exitactions pour chaque déclencheur pour retourner la couleur au blanc (un peu d'un fudge mais je voulais voir si la section manquante "De" était le problème). Lorsque l'animation s'est déclenchée, j'ai fini avec une boîte semi-transparente, même si c'était la bonne couleur.

J'ai également essayé de définir la propriété "from" - encore une fois, pas vraiment pratique car je ne sais pas quelle serait la couleur d'origine pour le déclencheur mais je voulais voir l'effet. J'ai obtenu un résultat similaire à celui ci-dessus.

Vous avez également essayé de modifier la propriété FillBehaviour, mais en la définissant sur «stop», la couleur revenait à la couleur d'origine dès que l'animation était terminée (comme prévu). Je pensais que l'animation serait animée à partir de la couleur courante (soit à partir du datatemplate, soit à partir de l'animation en cours s'il y en a une), et serait animée à la nouvelle couleur. Je ne sais pas pourquoi je semble avoir une couleur entre l'original et la nouvelle couleur. Est-ce un problème connu avec l'animation de couleur ou est-ce un problème avec mes déclencheurs?

Merci à tous

Answer 1

Vous devez définir la durée sur les objets ColorAnimation. La valeur par défaut Duration pour les animations est de 1 seconde, donc votre storyboard de 0,5 seconde ne fait tourner que la moitié de l'animation.

<Storyboard> 
    <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" Duration="0:0:0.5"/> 
    <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" Duration="0:0:0.5"/> 
    <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" Duration="0:0:0.5"/> 
</Storyboard>