Discussion :

[HighTouch]

Comme d'hab ça va être un peu difficile de se mettre en situation mais je pense que nous devrions y arriver.

Je vous explique en gros mon soucis
Mon écran se lance j'ai 3 boutons qui sont centrer dans un stack panel, sur le click de l'un d'eux je lance mon animation pour qu'il vienne se nicher en haut a gauche. mais du coup quoi que je fasse soit ça saccade ( en utilisant les placements des grid.column ) soit ça marche mais la transformation se fait d'un seul coup ( en changeant l'orientation et l'alignement de mon stackpanel ) alors que moi je veux une animation visible en douceur. J'ai regarder un peu partout y compris du coté des Rotate Matrix.

Le code ( + bas le code de l'animation )

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Grid Grid.ColumnSpan="3" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="*"/>
        		</Grid.ColumnDefinitions>
        		<StackPanel HorizontalAlignment="Center" Margin="0,0,0,0" x:Name="grid" VerticalAlignment="Center" Visibility="Visible" d:LayoutOverrides="Width" Orientation="Horizontal">
        			<Button x:Name="button" Style="{DynamicResource btn_creer_tier}" Content="Creer un contact" RenderTransformOrigin="0.5,0.5" FontSize="14" IsEnabled="True" IsDefault="True" Width="270" Height="154">
        				<Button.RenderTransform>
        					<TransformGroup>
        						<ScaleTransform ScaleX="1" ScaleY="1"/>
        						<SkewTransform AngleX="0" AngleY="0"/>
        						<RotateTransform Angle="0"/>
        						<TranslateTransform X="0" Y="0"/>
        					</TransformGroup>
        				</Button.RenderTransform>
        			</Button>
        			<Button Style="{DynamicResource btn_consulter_tier}" Content="Consulter les contacts" x:Name="button1" RenderTransformOrigin="0.5,0.5" FontSize="14" IsEnabled="True" IsDefault="True" Width="270" Height="154">
        				<Button.RenderTransform>
        					<TransformGroup>
        						<ScaleTransform ScaleX="1" ScaleY="1"/>
        						<SkewTransform AngleX="0" AngleY="0"/>
        						<RotateTransform Angle="0"/>
        						<TranslateTransform X="0" Y="0"/>
        					</TransformGroup>
        				</Button.RenderTransform>
        			</Button>
        			<Button Style="{DynamicResource btn_modifier_tier}" Content="Modifier un contact" RenderTransformOrigin="0.5,0.5" x:Name="button2" FontSize="14" IsDefault="True" Width="270" Height="154">
        				<Button.RenderTransform>
        					<TransformGroup>
        						<ScaleTransform ScaleX="1" ScaleY="1"/>
        						<SkewTransform AngleX="0" AngleY="0"/>
        						<RotateTransform Angle="0"/>
        						<TranslateTransform X="0" Y="0"/>
        					</TransformGroup>
        				</Button.RenderTransform>
        			</Button>
        			<Button Style="{DynamicResource btn_valider_form}" Content="Enregistrer contacts" x:Name="button1_Copy" RenderTransformOrigin="0.5,0.5" FontSize="14" IsEnabled="True" IsDefault="False" Width="270" Visibility="Collapsed" Height="154">
        				<Button.RenderTransform>
        					<TransformGroup>
        						<ScaleTransform ScaleX="1" ScaleY="1"/>
        						<SkewTransform AngleX="0" AngleY="0"/>
        						<RotateTransform Angle="0"/>
        						<TranslateTransform X="0" Y="0"/>
        					</TransformGroup>
        				</Button.RenderTransform>
        			</Button>
        		</StackPanel>
 
        	</Grid>

Et ici l'animation

Code :

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

1
2
3
4
5
6
7
8
<Storyboard x:Key="anim_creer">
        	<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
        		<DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static HorizontalAlignment.Left}"/>
        	</ObjectAnimationUsingKeyFrames>
        	<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(StackPanel.Orientation)">
        		<DiscreteObjectKeyFrame KeyTime="00:00:00.5000000" Value="{x:Static Orientation.Vertical}"/>
        	</ObjectAnimationUsingKeyFrames>
        </Storyboard>

[Thomas Lebrun]

Tu veux donc que ton bouton sorte du StackPanel et vienne se coller en haut à gauche ?

[HighTouch]

ben je crois pas que ce soit possible.... si cest possible c'est bien^^ give me more info please

a la base je voulais plutot que le changement de l'alignement et de l'orientation de mon stackpanel se fasse en douceur et non d'un seul coup comme il le fait maintenant. ( en fait rien ne change jusqu'a la derniere image de ma storyboard ou comme je lai dit il disparait et apparait )

il est possible de remplacer mon stackpanel par une grid : dans ce cas la je peux facilement avoir l'effet obtenu en mettant des margins a mes boutons et en jouant sur ça ( sachant qu'il serait aligner de base en haut a gauche et que l'animation serait faites sur les boutons ) mais imagine quand je change de résolution... mes boutons vont forcement sortir de l'ecran, ce que je ne veux pas bien sur.

du coup je me dis que la solution la plus simple serait de pouvoir creer une storyboard ( qui s'activerait au changement de l'orientation ) pour que mon stack qui a la base est aligner au centre aille doucement se fixer a gauche de ma grid.

j'en demande peut etre de trop mais je suis sur a 99% que c'est faisable.

PS : encore merci pour tout

edit : je peux mettre une demo si besoin car quand je me relis je me demande si c'est comprehensible. 3 boutons toujours centrer ( que ce soit en 1024*768 ou bien 1280*1024 ) qui se glisserait en haut a gauche des que l'on click dessus.

[MrDuChnok]

Salut,

Et au lieu d'utiliser un StackPanel pour le placement de tes boutons, tu ne peux pas utiliser un Canvas ?
Ainsi tu pourrais (facilement) changer la position de ton bouton... enfin c'est qu'une idée.
Mais peut être que du coup ton "centrage" des boutons sera plus difficile.

[HighTouch]

MrDuChnok : ben du moment que j'ai pas de stack panel je ne pourrai pas centrer mes boutons avec un alignement en haut a gauche. du coup je devrai changer l'alignement de mes boutons et ça donnera le meme effet.

Thomas Lebrun : j'ai essayer avec un de mes dev le coup du switch entre la stackpanel et la grid. ça marche mais c'est pareil, ça le fait d'un coup et mes boutons se retrouvent en haut a gauche sans glisser apres avoir perdu leur propriété. ( n'y a t'il pas moyen de leur dire de garder la place qu'il avait avant ? )

moi je veux juste que mes boutons aillent se glisser gentiment en haut a gauche.

[HighTouch]

donc voila pour la petite démo, ça a le mérite d'être clair au moins.

[MrDuChnok]

MrDuChnok : ben du moment que j'ai pas de stack panel je ne pourrai pas centrer mes boutons avec un alignement en haut a gauche. du coup je devrai changer l'alignement de mes boutons et ça donnera le meme effet.

Je vois pas en quoi le Canvas t'empecherai de mettre tes boutons en haut à gauche, ni de les centrer sur ta fenêtre (moyennant quelques calculs, comparé au stackpanel).
Du coup dans ton animation tu pourra influer sur la position de tes composants (et donc faire une animation souple), pas comme avec le StackPanel ou tu influe sur l'orientation qui donne le résultat que tu n'aimes pas.
Ou alors y'a peut être quelques choses encore qui m'échappe dans ce que tu souhaite faire...

[Thomas Lebrun]

moi je veux juste que mes boutons aillent se glisser gentiment en haut a gauche.

Dans ce cas là, il faut utiliser:
- une canvas sur lequel tu modifies les propriétés Top/Left dans ton animation
- un StackPanel (comme tu l'as actuellement) mais où tu manipules la marge de tes contrôle (idée à tester)

[HighTouch]

C'était le calcul qui me dérangeait sachant que je suis phobique de visual studio. Mais un de mes collègues m'a coder ça et enfin ça marche.

Pour info nous avons utiliser la canvas et avons ensuite centrer les boutons en récupérant la taille de la canvas. Du coup ils se centrent automatiquement et mon anim est comme je le voulais.

Je voulais vous remercier encore c'est sympa de nous avoir mis sur la bonne piste.