WPF Animation de la largeur de la bordure

Question

J'ai un dockpanel sur mon interface utilisateur comme suit ;

<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, c'est avoir une animation de storyboard pour afficher / cacher le menu sur le côté gauche. J'ai fait en sorte que ma bordure augmente la largeur lorsqu'elle est chargée, mais je veux un moyen de la fermer ou de la rouvrir. J'ai besoin d'un bouton quelque part mais je veux qu'il déclenche l'animation dans le contrôle de la bordure plutôt que lui-même. Je pense à quelque chose comme la boîte à outils ou l'explorateur de serveur dans Visual Studio.

Quelqu'un a-t-il des conseils ou des exemples pour commencer ?

Remerciements

Answer 1

Je ne suis pas sûr de comprendre ce que vous voulez dire, mais si vous voulez l'animer, alors vous voulez probablement mettre à jour sa largeur ? Si vous avez une propriété sur votre ViewModel/PresentationModel que vous pouvez lier, alors 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 compliquées qui modifient de multiples propriétés, des timings différents, etc., alors c'est beaucoup plus facile à mettre en place dans Blend, même si vous le faites dans un projet de test et que vous coupez/collez le StoryBoard qui en résulte :-)