Comment animer du contenu d'image dans WPF?

Question

J'ai un contrôle utilisateur vraiment basique avec un bouton qui a une image. Je veux animer l'image du bouton, en le changeant en une image différente.

<UserControl.Resources> 
    <Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" /> 
    <Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8" /> 

</UserControl.Resources> 
    <Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup Name="MouseStates"> 
      <VisualState Name="MouseHover" > 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="GlyphButton" 
           Storyboard.TargetProperty="Content" 
           Duration="0:0:1" > 
         <ObjectAnimationUsingKeyFrames.KeyFrames> 
          <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
           <DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" /> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames.KeyFrames> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState Name="MouseNotHover" > 
      </VisualState> 
     </VisualStateGroup> 

    </VisualStateManager.VisualStateGroups> 
    <Button x:Name="GlyphButton" 
      MouseLeave="GlyphButton_MouseLeave" 
      MouseEnter="GlyphButton_MouseEnter" 
      Content="{StaticResource GlyphDefault}" 
      /> 
</Grid> 

Malheureusement, quand je lance cela, et survolez le bouton que je reçois exception « Freezable ne peut pas être gelé » (les gestionnaires d'événements de souris changent les états). Il semble qu'il essaie de figer l'image actuelle, mais ne peut pas pour une raison quelconque.

J'ai essayé de le faire sans utiliser une ressource statique (juste en mettant Image en ligne), mais la même erreur. Curieusement, je peux trouver très peu de documentation ou de blogs sur la façon de faire des animations sur la propriété Content. Je devrais imaginer que ce serait un scénario commun. Des idées sur ce que je fais mal?

J'apprécie grandement votre aide à ce sujet!

Answer 1

Ce n'est probablement pas la meilleure (ou la plus facile) façon d'y parvenir. La propriété Content n'est certainement pas ce que les concepteurs WPF avaient en tête pour les animations. Voici comment je ferais ceci:

1. Réglez le Button.Content être un Grid avec les deux images placées à l'intérieur (donc, superposant les uns des autres).
2. Définissez le Opacity sur le Image que vous voulez être initialement visible à 1.0 et 0.0 sur Image pour être initialement masqué.
3. Animer le Opacity en utilisant un DoubleAnimation plutôt qu'un ObjectAnimation - vous pouvez changer les images en animant son opacité jusqu'à 0.0 tout en amenant simultanément l'autre jusqu'à 1.0. En outre, en fonction de la durée, cela vous donnera une belle transition de fondu.