Discussion :

[Tehko]

Bonjour,

me revoila une nouvelle fois avec un nouveau problème mais cette fois si coté XAML.
Mon application est constitué de boutons tout à fait basiques et lorsque j'ai fini de rentrer certains paramètres et que je clique sur le bouton "Play", tous les boutons, y compris le "Play" disparaissent en dehors de l'écran par le biais d'une translation.
Les boutons sont à l'intérieur d'un canevas. Lors du clique sur le bouton "Play", cela lance une animation de translation.
Mon application a été créé sous Expression Blend 3 ce qui m'a évité de taper le code XAML et l'animation est lancée par le biais du code behind (C#).

Je pensais avoir fait une mauvaise manip en créant mon projet donc j'ai en refais un juste pour tester si le bouton disparaissait lorsqu'il sortait du canevas.
Voici le code que j'ai produis par le biais de MS Expression Blend 3:

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
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightApplication1.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<Storyboard x:Name="Storyboard1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<EasingDoubleKeyFrame KeyTime="00:00:01" Value="429"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
 
	<Canvas x:Name="LayoutRoot" Background="#FF767676">
		<Button x:Name="button" Height="64" Width="152" RenderTransformOrigin="0.5,0.5" Content="Button" Canvas.Left="224" Canvas.Top="192">
			<Button.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Button.RenderTransform>
		</Button>
	</Canvas>
</UserControl>

Une question me vient donc à l'esprit. Peut-on faire disparaitre un objet (bouton, rectangle, etc...) en le positionnant en dehors du canevas le contenant ?

Cordialement, Tehko

[Skyounet]

Abonnes toi à l'évènement Completed de ton Storyboard et dans la callback mets la Visibitlity de ton bouton à Collapsed.

Pour que ça rende mieux il faudrait aussi que tu animes Opacity en même que ton bouton se déplace.

[Tehko]

Merci d'avoir répondu aussi rapidement Skyounet.

J'ai fait ce que tu m'as dit et en effet il disparait une fois sorti du canevas.

Y a-t-il la possibilité qu'il disparaisse au fur et à mesure de sa sortie du canevas plutôt que de jouer d'un l'opacité ?

En d'autres mots, mon canevas joue le rôle d'écran et dès que quelque chose en sort totalement l'objet en question n'apparait plus ou à moitié s'il ne sort qu'à moitié.

[Samuel Blanchard]

Tu peux jouer avec la propriété Clip du Canvas

[Skyounet]

Merci d'avoir répondu aussi rapidement Skyounet.

J'ai fait ce que tu m'as dit et en effet il disparait une fois sorti du canevas.

Y a-t-il la possibilité qu'il disparaisse au fur et à mesure de sa sortie du canevas plutôt que de jouer d'un l'opacité ?

En d'autres mots, mon canevas joue le rôle d'écran et dès que quelque chose en sort totalement l'objet en question n'apparait plus ou à moitié s'il ne sort qu'à moitié.

Est-ce que ton Canvas est le Canvas principal de ton application ? C'est à dire, quand ton Bouton sort de ton Canvas il est censé être en dehors de l'application ou alors il se retrouve sur une autre partie de ton application ? (je sais pas si je suis clair).

[Tehko]

@Samothep:

J'ai essayé de jouer avec la propriété que tu m'as proposé mais plus rien ne s'affiche. J'ai tenté cette syntaxe:

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
<Canvas x:Name="LayoutRoot" Background="#FF767676">
        <Canvas.Clip>
            <RectangleGeometry/>
        </Canvas.Clip>      
            <Button x:Name="button" Height="64" Width="152" RenderTransformOrigin="0.5,0.5" Content="Button" Canvas.Left="224" Canvas.Top="192">
			<Button.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Button.RenderTransform>
		</Button>
	</Canvas>

Je débute tout juste en XAML donc j'ai pas de bonnes notions d'autant plus que j'apprends de moi-même sur internet...
Quand je reviens sous Expression Blend3 après avoir modifier le code sous VS2008 et que je remets à jour, tout disparait (et tout revient normalement après avoir supprimé mes trois lignes de code concernant la propriété clip.

@Skyounet: Oui c'est en effet le Canvas principal de l'application.

[Skyounet]

@Skyounet: Oui c'est en effet le Canvas principal de l'application.

Dans ce cas là dans le html qui host ton contrôle Silverlight, tu peux définir des tailles fixes pour ton application (au lieu de 100%).

Code :

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

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

Remplace les 100% par la taille de ton application.

[Tehko]

Ok mais j'ai oublié de mentionner que j'avais créé un projet "Application Silverlight 3" sous Expression Blend 3 et non pas un projet "Application et Site Web Silverlight 3" et que par conséquent je n'ai pas la page Default.html

Est-ce que tu sais si il y a possibilité de transférer l'intégralité de mon projet "App Silverlight 3" dans un projet "Application et Site Web Silverlight 3" sans perdre les Storyboards ?

Autrement j'attendrai une réponse de Samoteph concernant la propriété clip.

Entre temps, j'ai essayé de transférer mon projet et ça a fonctionné. Ta solution m'a bien aidé.

Un grand merci à toi Skyounet.
En fait mon problème avec le storyboard venait du fait que je faisais un appel dans le code behind de l'événement Completed.

Ceci est résolu mais j'aimerais tout de même savoir utiliser la propriété Clip pour une future utilisation...

[Samuel Blanchard]

En fait la propriété Clip te permet de Clipper ton Canvas c'est à dire de ne plus afficher ce qui sort de la forme que tu as fixé dans la propriété Clip. Tu a mis un RectangleGeometry mais tu pourrais mettre une Ellipse ou même un Path. En revanche pour que cela fonctionne il te faut quand même lui donner une taille :

<RectangleGeometry Rect="0,0,100,100">

Pour le reste du post, j'étais un peu à coté de la plaque

[Tehko]

Ok, merci de l'info.

Je testerai ça à l'occasion.