Discussion :

[Ponchy]

Bonjour à tous,

Tout juste débutant dans le dev Windows, je suis en train d'apprendre sur le tas, en réalisant ma première app.

Mon souci vient des animations. J'ai actuellement une itemgridview dont le template est le suivant:

Code :

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
<DataTemplate x:Key="DefaultGridItemTemplate">
            <Grid HorizontalAlignment="Left" Width="250" Height="250">
<!-- Code à rajouter pour animation -->
            	<Image Source="{Binding Image}" Stretch="UniformTofill"/>
 
                <StackPanel x:Name="stackPanel" VerticalAlignment="Bottom" Orientation="Vertical" HorizontalAlignment="Stretch"
                        Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="70" RenderTransformOrigin="0.5,0.5">
                    <StackPanel.RenderTransform>
                        <CompositeTransform/>
                    </StackPanel.RenderTransform>
                    <TextBlock Text="{Binding Title}" Style="{StaticResource GridTitleTextStyle}" Foreground="White"/>
                    <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" HorizontalAlignment="Right">
                        <TextBlock Text="Last Updated" Margin="12,4,0,8" Height="42" Foreground="White"/>
                        <TextBlock Text="{Binding PubDate, Converter={StaticResource dateConverter}}" Margin="12,4,12,8" Foreground="White"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>

Je cherche à avoir une animation du stackpanel de chaque item, un peu comme sur l'appli lemonde (très belle par ailleurs). En passant par blend, le code que j'ai ajouté est:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Grid.Resources>
            		<Storyboard x:Name="Storyboard1">
            			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="stackPanel">
            				<EasingDoubleKeyFrame KeyTime="0" Value="-176.667"/>
            				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-83.334"/>
            				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.667"/>
            			</DoubleAnimationUsingKeyFrames>
            			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="stackPanel">
            				<EasingDoubleKeyFrame KeyTime="0" Value="-0.667"/>
            				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.666"/>
            				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.666"/>
            			</DoubleAnimationUsingKeyFrames>
            		</Storyboard>
            	</Grid.Resources>

Dans la page code-behind, je fais lance alors l'animation par:

Code :

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

1
2
3
4
 
Storyboard sb =
               this.FindName("Storyboard1") as Storyboard;
if (sb!= null) sb.Begin();

Premier problème, sb est toujours null, Storyboard1 n'est pas trouvé !

Qu'a cela ne tienne, j'ai sorti ma définition de storyboard de mon DataTemplate DefaultGridItemTemplate, pour le mettre directement entre les balises Page.Resources.

Cette fois-ci, l'appel au Storyboard depuis la page code-behind est bien fait, mais son targetName (stackPanel) est introuvable....

Je suis un peu perdu, je me doute bien que "l'obstacle" provient du fait que ce stackPanel est défini dans mon dataTemplate....

Merci à vous de prendre le temps de m'éclairer !

[GuruuMeditation]

Je ne vois pas l'appli "le monde" sur le store, probablement qu'elle n'est pas dispo pour la Belgique

Mais je crois que je vois ce que tu veux, et a mon avis, pour respecter la philosophie Metro, regarde du côte des Transitions, qui sont les animations standard de Metro :

http://blog.loicrebours.fr/2012/05/2...et-animations/

[Ponchy]

Bonjour GuruuMeditation et merci de ta réponse,

L'application lemonde est celle d'un journal francais,ceci doit expliquer cela. En fait je voudrais que mes stackpanels soient animés, montent et descendent au cours du temps sur mes items de grid.

J'étais déjà passé par le blog de monsieur Rebours (très intéressant par ailleurs), mais ma question concerne plutôt les animations personnalisées, et le conflit entre l'application d'un storyboard à un stackpanel contenu dans un datatemplate que je n'arrive pas à résoudre.

Je ne sais pas si je suis bien clair ;s