Suite à une petite question sur le groupe des développeurs Windows Phone sur Facebook, voici une petite astuce qui permet, lors d'un clic sur un bouton d'alterner deux storyboards. Ici, le premier storyboard provoque la sortie du texte, un nouvel appui, le fait re-rentrer dans la scène.
Tout se passe dans les EventTriggers qui possèdent des conditions de déclenchement. Le premier trigger n'est déclenché que si le bloc de texte est en dehors de la scène, cela appelle le storyboard d'entrée et inversement pour le second.
Voici le code:
<UserControl.Resources>
<Storyboard x:Name="HideText">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-100" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShowText">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="100" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="100" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="200,100,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:Interaction.Behaviors>
<eic:ConditionBehavior>
<eic:ConditionalExpression>
<eic:ComparisonCondition LeftOperand="{Binding Path=RenderTransform.TranslateX, ElementName=textBlock}" Operator="LessThan" RightOperand="0" />
</eic:ConditionalExpression>
</eic:ConditionBehavior>
</i:Interaction.Behaviors>
<eim:ControlStoryboardAction Storyboard="{StaticResource HideText}" ControlStoryboardOption="Stop" />
<eim:ControlStoryboardAction Storyboard="{StaticResource ShowText}" ControlStoryboardOption="Play" />
</i:EventTrigger>
<i:EventTrigger EventName="Click">
<i:Interaction.Behaviors>
<eic:ConditionBehavior>
<eic:ConditionalExpression>
<eic:ComparisonCondition LeftOperand="{Binding Path=RenderTransform.TranslateX, ElementName=textBlock}" Operator="GreaterThanOrEqual" RightOperand="0" />
</eic:ConditionalExpression>
</eic:ConditionBehavior>
</i:Interaction.Behaviors>
<eim:ControlStoryboardAction Storyboard="{StaticResource HideText}" ControlStoryboardOption="Play" />
<eim:ControlStoryboardAction Storyboard="{StaticResource ShowText}" ControlStoryboardOption="Stop" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock x:Name="textBlock" Text="Kikoulol" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="100" TranslateY="100" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
Il est bien entendu nécessaire de référencer les assemblies suivantes: System.Windows.Interactivity et Microsoft.Expression.Interactions, ce sont elles qui donnent les namespaces i et ei*
02878eee-fdd3-49d1-bf46-ac0c6d73b44d|1|5.0|27604f05-86ad-47ef-9e05-950bb762570c