2010-02-19 11 views
0

J'ai un dockpanel sur mon interface utilisateur comme suit;WPF Animation de largeur de bordure

<DockPanel> 
    <Border DockPanel.Dock="Top">Header</Border> 
    <Border DockPanel.Dock="Bottom">My footer</Border> 
    <Border DockPanel.Dock="Left">Menu</Border> 

    <Border>Content</Border> 
</DockPanel> 

Ce que je veux faire est d'avoir une animation de storyboard pour montrer/cacher le menu sur le côté gauche. J'ai ma bordure pour augmenter la largeur quand elle est chargée mais je veux un moyen de la fermer/rouvrir. J'ai besoin d'un bouton quelque part, mais je veux que cela déclenche l'animation dans le contrôle des frontières plutôt que lui-même. Idéalement, je pensais à quelque chose comme Toolbox/Server Explorer dans Visual Studio.

Est-ce que quelqu'un a des pointeurs/exemples pour commencer?

Merci

+0

Vous devriez vraiment voter/accepter les réponses qui sont utiles :-) –

Répondre

3

Je ne suis pas sûr que je comprends ce que vous voulez dire, mais si vous voulez animer/arrière alors vous voudrez probablement mettre à jour sa largeur? Si vous avez une propriété sur votre ViewModel/PresentationModel que vous pouvez lier à vous pouvez faire quelque chose comme:

<DataTrigger Binding="{Binding IShouldBeVisible}" Value="True"> 
    <DataTrigger.EnterActions> 
     <BeginStoryboard> 
      <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:0.13" Value="100"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </DataTrigger.EnterActions> 
    <DataTrigger.ExitActions> 
     <BeginStoryboard> 
      <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:0.1" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </DataTrigger.ExitActions> 
</DataTrigger> 

Si vous faites des animations complexes qui changent plusieurs propriétés, des moments différents, etc alors il est beaucoup plus facile de mettre sur pied dans Blend, même si vous le faites dans un projet de test, puis coupez + collez le StoryBoard résultant :-)

+0

Ouais je pensais que je devais changer la largeur. Voyez ce que vous voulez dire à propos du déclencheur. Merci cela ressemble à un bon début pour moi. Je ne l'ai pas essayé dans Blend, peut-être que je vais essayer aussi. Merci. –