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.