[WPF] ItemsControl & Animation

Version imprimable

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:

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

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:

1 2 3 4 5 <Image etc...> <Image.RenderTransform> <TranslateTransform X="0" /> </Image.RenderTransform> </Image>
Ton image est à sa position initiale.

L'animation est :

Citation:

<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:

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 !

:)

Salut,

merci pour la réponse.

J'ai essayé ce que tu as dis :

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
<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.

Citation:

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

Une idée ?

Merci

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:

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>

19/07/2011, 10h38
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:

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

Merci encore
19/07/2011, 10h53
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.
19/07/2011, 10h59
NeoKript

Citation:

Envoyé par 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.

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 :

Citation:

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

Merci
19/07/2011, 11h08
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.
19/07/2011, 11h25
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 :-)