Animation à l'ouverture/fermeture d'une fenetre

Version imprimable

20/05/2014, 22h08
sevyc64

Animation à l'ouverture/fermeture d'une fenetre

Bonsoir,

Complètement débutant en wpf mais pas en dotnet, le code me va, mais le xaml, j'y connais rien.

Je développe à temps perdu (donc le soir) une petite appli et je souhaite ajouter à sa fenêtre (window) une animation style déroulement/enroulement lorsqu'elle est affichée/masquée.

La fenêtre fait 220x350 (mais peu importe), sans bordure, sans menu système, etc... Elle est affichée depuis le code par la commande .Show, et masquée aussi par le code avec la commande .Hide (l'application reste ouverte dans la systray)

Je voudrais que lorsqu'elle s'affiche il y ait un effet de déroulement en diagonale depuis son coin inférieur droit qui lui ne bougera pas. De même au masquage, je voudrais un effet d'enroulement jusqu'au coin inférieur droit.

Je ne connais rien au xaml pour le faire directement. J'ai regardé avec Blend mais j'ai rien trouvé de concluant.

Salut,

Tu peux faire cela avec les triggers :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<Window.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="600" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>

Ici, on anime les propriétés Height et Opacity sur une durée de 5s au chargement de la fenêtre.

Pour la fermeture de la fenêtre, il n'existe pas de routedevent correspondant. On peut soit gérer cela en lançant un storyboard en code behind ou en créer un routedevent personnalisé.

Effectivement, ça ne fait pas tout fait ce que je veux. Ça déroule du haut vers le bas alors que je souhaitais le sens inverse. De plus j'aurais voulu en diagonale, mais quand j'ajoute width, ça marche plus.

Et puis surtout ça ne le fait qu'au premier affichage.

Je pensais WPF plus puissant niveau animation. Je le vois plutôt limité en réalité. Je crois que je vais me tenir à de l'affichage classique pour mes futurs dev.

Avec Blend, j'en suis arrivé à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <Window.Resources> <Storyboard x:Key="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window"> <EasingDoubleKeyFrame KeyTime="0" Value="220"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window"> <EasingDoubleKeyFrame KeyTime="0" Value="350"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="Storyboard2"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window"> <EasingDoubleKeyFrame KeyTime="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="220"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="window"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="350"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="FocusManager.LostFocus"> <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> </EventTrigger> <EventTrigger RoutedEvent="FocusManager.GotFocus"> <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/> </EventTrigger> </Window.Triggers>
Bien entendu ça marche pas puisque les évènements GotFocus et LostFocus ne sont pas les bons et que j'ai l'impression qu'il n'y a pas les bons.

Je sens que ça va finir à l'ancienne, comme en winform, avec un bon vieux vilain timer qui joue sur la taille et la position. Mais bon c'est pas le but.

21/05/2014, 23h34
yonpo

En effet, rien de foufou.

Si ça peut aider, j'ai trouvé ça sur le forum.
J'ai pas essayé mais peut-être qu'en modifiant les propriétés de la fenêtre en retirant les bordures et en mettant un fond transparent, on pourrait animer le conteneur de la fenêtre (border, grid, ...). À voir.
22/05/2014, 20h17
sevyc64

ouais!

Enfin pour le moment j'abandonne l'idée de l'animation. Ce n'est que du cosmétique. Je verrais plus tard.