Comment animer un objet au centre d'une mise en page fluide dans Silverlight

Question

Bonjour et merci de votre lecture.

Je construis une simple page silverlight et j'ai du mal à animer les éléments au centre de l'écran.

L'exemple ...

MouseLeftButtonDown> Animer le rectangle au centre de l'écran.

Existe-t-il un moyen de le faire?

Answer 1

La façon dont je gère cela dans mon application MVVM consiste à lier l'emplacement du rectangle à un objet ViewModel. Lorsque cette position est mise à jour, le rectangle se déplace. J'ai alors un comportement lié à l'événement LayoutUpdated du rectangle lui-même qui utilise une transformation de traduction pour déplacer l'élément à son emplacement d'origine, puis exécute une animation sur cette transformation traduire pour déplacer les valeurs X et Y à 0, de sorte que item anime son emplacement "réel".

   <Border Width="{Binding PositionRectangle.Width}" 
         Height="{Binding PositionRectangle.Height}" 
         BorderBrush="{Binding OptionColorBrush}" 
         BorderThickness="3"> 
        <Border.RenderTransform> 
         <TransformGroup> 
          <TranslateTransform/> 
          <ScaleTransform/> 
         </TransformGroup> 
        </Border.RenderTransform> 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="LayoutUpdated"> 
          <ic:AnimationTriggerAction LocationPropertyName="Location"/> 
         </i:EventTrigger> 
         <i:EventTrigger EventName="Loaded"> 
          <ic:AnimationTriggerAction LocationPropertyName="Location"/> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
        <TextBlock Text="{Binding Name}" 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
           TextWrapping="Wrap"/> 
       </Border> 

Le Trigger J'utilise (AnimationTriggerAction) a été roulé à la main, car je voulais faire quelques autres choses (par exemple, il gère l'exécution d'une animation à l'échelle sur l'élément lors de son premier chargement et il s'évalue lui-même), mais rien ici n'est trop difficile. Il descend de TargetedTriggerAction<FrameworkElement> et conserve la trace de l'emplacement précédent de l'objet dans une propriété de dépendance sur cet élément. Il crée le storyboard s'il n'existe pas et lui ajoute 2 DoubleAnimation pour exécuter les propriétés X et Y du TranslateTransform.

Points positifs à cette approche: Pas besoin de gérer les événements dans le fichier .xaml.cs pour lancer les animations. Tout se passe à partir des événements LayoutUpdated et Loaded. Le fait que les animations se produisent est entièrement masqué dans ViewModel.

Points négatifs: Il y a un léger scintillement lorsque l'objet s'accroche et que la transformation translate est définie, de sorte qu'il revient à l'emplacement d'origine avant le démarrage de l'animation. C'est très subtil mais c'est là. Ce n'est pas encore prêt pour la consommation publique, mais ma preuve de concept pour cela se trouve ici: http://www.benvonhandorf.com/Apps/WOM/WheelOfMeat.html Entrez un nom d'option dans la zone de texte et appuyez sur Entrée et vous devriez voir l'option fondre en existence. Entrez un peu plus et vous les verrez se réarranger autour du volant.