Discussion :

[NeoKript]

Bonjour à tous,

j'ai un petit soucis concernant une animation.

J’essaie d'animer un ItemsControl de faire en sorte que les éléments défilent de droite à gauche, quand on arrive au bout de la collection on réanime dans l'autre sens jusqu'à qu'on soit au début de la collection, etc...

Je ne sais pas trop quel propriété il faut animer pour faire cela.

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ItemsControl ItemsSource="{Binding Data.Items}" Grid.Row="3" Grid.Column="1">
            <ItemsControl.Triggers>
                <EventTrigger RoutedEvent="ItemsControl.Loaded">
                    <BeginStoryboard>
                        ??
                    </BeginStoryboard>
                </EventTrigger>
            </ItemsControl.Triggers>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Image, Converter={StaticResource BinaryToImageConverter}}" Margin="5" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Pouvez-vous m'éclairer sur ce genre d'animation, ce n'est pas ma spécialité !

Merci d'avance,
NeoKript

[danuz]

J'ai comme un doute et l'impression que tu seras obligé de le faire via le C#. Nous, verrons, voici quelques pistes.

Tu auras besoin d'une transformation (TranslateTransform) pour effectuer le déplacement et d'une animation (DoubleAnimation) pour l'animer.

Pour ton élément image, il faudra initialiser sa transformation.

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<Image etc...>
<Image.RenderTransform>
        <TranslateTransform X="0" />
    </Image.RenderTransform>
</Image>

Ton image est à sa position initiale.

L'animation est :

<DoubleAnimation
Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
From="0" To="400" Storyboard.TargetName="grid" Duration="0:0:2"
/>

Tu peux également faire démarrer ton animation à -100 (un nombre négatif) si j'ai bonne mémoire, pour arriver à 0 (à confirmer).

Ta double animation sera à mettre dans un élément Storyboard lui même dans ton BeginStoryboard.

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<Storyboard>
 <DoubleAnimation  
      Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" 
      From="0" To="400" Storyboard.TargetName="grid" Duration="0:0:2"
      />
</Storyboard>

Je n'ai pas pu tester, mais je crois que tous tes éléments seront animés ainsi dans l'ordre de leur création.


N'hésite pas à nous faire des retours.

En espérant que ça te convienne,

Bonne journée !

[NeoKript]

Salut,

merci pour la réponse.

J'ai essayé ce que tu as dis :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<ItemsControl ItemsSource="{Binding Items}" >
            <ItemsControl.Triggers>
                <EventTrigger RoutedEvent="ItemsControl.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" 
                                  From="0" To="400" Storyboard.TargetName="grid" Duration="0:0:10" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ItemsControl.Triggers>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding }" Width="50" Height="50" Name="grid" >
                        <Image.RenderTransform>
                            <TranslateTransform X="0" />
                        </Image.RenderTransform>
                    </Image>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Mais j'ai un petit soucis concernant la propriété Storyboard.TargetName="grid", vu qu'il faut animer l'image j'ai mis Name="grid" sur l'image mais j'ai une exception lors de l’exécution.

Impossible de trouver le nom 'grid' dans la portée de nom de 'System.Windows.Controls.ItemsControl'.

Une idée ?

Merci

[danuz]

Ah oui, je n'avais pas remarqué un truc.

Retire le trigger au niveau de l'ItemControls et mets le au niveau du DataTemplate. En effet, le Trigger concerne le DataTemplate que tu souhaites animer, pas l'ItemControl.

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="grid">
                    <BeginStoryboard>
                        <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" 
                                  From="0" To="400" Storyboard.TargetName="grid" Duration="0:0:10" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
</DataTemplate.Triggers>

[NeoKript]

Merci !

Ça fonctionne, les items sont bien animés :-)

Par contre comment faire, pour que l'animation parte dans l'autre sens une fois terminée ? On déclare un nouveau StoryBoard qui va de 400 à 0 et on le lance quand l'autre est terminé par code du coup (event Completed) ?

De plus pour que le déplacement se fasse que sur la taille du ItemsControl comment peut-on faire, apparemment on ne peut pas Binder le From et To ... J'aurai bien binder la propriété Width de l'ItemsControl sur To sinon.

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

To={Binding ElementName=Control, Path=Width}

Merci encore

[danuz]

Je t'en prie (^__^)

Alors, sur le DoubleAnimation, tu as une propriété AutoReverse (booléen) qui permettra à ton animation de revenir à son état initial après qu'elle ait été réalisée.

Après, concernant la longueur de l'ItemControl essaie sur le propriété ActualWidthau lieu de Width.

[NeoKript]

Je t'en prie (^__^)

Alors, sur le DoubleAnimation, tu as une propriété AutoReverse (booléen) qui permettra à ton animation de revenir à son état initial après qu'elle ait été réalisée.

Après, concernant la longueur de l'ItemControl essaie sur le propriété ActualWidthau lieu de Width.

Nickel pour Auto-Reverse, j'ai rajouté RepeatedBehavior="Forever", l'animation tourne maintenant en boucle,

cependant le binding sur la propriété ActualWidth ne fonctionne pas non plus. J'ai l'exception suivante :

Impossible de figer cette arborescence de chronologie Storyboard pour l¹utiliser sur les threads.

Merci

[danuz]

Mmm, dans ce cas, cela signifie que ce n'est pas possible.

2 choses possibles comme solutions probables :

1/ Tu spécifies une taille fixe pour ton ItemControls. (Pratique, comme ça, tu as les valeurs directes).
2/ Tu entoures ton ItemControls avec un autre contrôle qui s'adapte à sa taille et tu essaies de te binder dessus

Pour tester la propriété Width de tes éléments, rajoute 2 TextBlocks (ou TextBox) sur ta Page et Binde toi sur les propriétés que tu souhaites rajouter. (Juste pour les tests (^___^) ).

Voilà, ce sont là les seules choses que je vois que tu pourrais tester.

[NeoKript]

Après quelque recherche, en effet, il n'est pas possible de binder les propriété To et From d'un StoryBoard (vf ce lien : Ici

Du coup, vu que je connais le nombre d'élément exacte, je vais régler ces deux paramètre jusqu'à que ça rende bien ^^

Merci encore pour ton aide.


Topic clos :-)