RafaelPlantard
RafaelPlantard

Reputation: 115

How to upgrade from Style.Triggers to Interaction.Behaviors?

I need update my app made on WPF to WinPhone 8.1 based on WinRT, but I don't know how to work with the "new API" for Triggers on new WinRT...

Let me explain!

How I can write this code in WPF:

<Style.Triggers>
    <DataTrigger Binding="{Binding Path=IsInBubbleGroup}" Value="True">
        <DataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <thriple:EasingDoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.2" Equation="CubicEaseInOut" To="1.1" />
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
            Duration="0:0:0.2"
            Equation="CubicEaseInOut"
            To="1.1"
            />
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
      <BeginStoryboard>
        <Storyboard>
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
            Duration="0:0:0.1"
            Equation="CubicEaseInOut"
            To="1"
            />
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
            Duration="0:0:0.1"
            Equation="CubicEaseInOut"
            To="1"
            />
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.ExitActions>
  </DataTrigger>
</Style.Triggers>

for WP8.1 based on WinRT using the Interaction.Behaviors?

My attempt was it:

<i:Interaction.Behaviors>
    <c:DataTriggerBehavior Binding="{Binding Path=IsInBubbleGroup}" Value="True">
        <c:DataTriggerBehavior.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <!--EnterActions-->

                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.2" To="1.1">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>

                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.2" To="1.1">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>

                    <!--ExitActions-->

                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.1" To="1">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>

                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.1" To="1">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>

                </Storyboard>
            </BeginStoryboard>                    
        </c:DataTriggerBehavior.Actions>
    </c:DataTriggerBehavior>
</i:Interaction.Behaviors>

but I did not know how I can create the enter and exit actions.. Help me please

Upvotes: 2

Views: 518

Answers (2)

RafaelPlantard
RafaelPlantard

Reputation: 115

Here is the final answer based on @Mark's answer:

<i:Interaction.Behaviors>
    <!--#Region EnterActions-->
        <c:DataTriggerBehavior Binding="{Binding Path=IsInBubbleGroup}" Value="True">
            <m:ControlStoryboardAction ControlStoryboardOption="Play">
                <m:ControlStoryboardAction.Storyboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.2" To="1.1">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>

                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.2" To="1.1">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </m:ControlStoryboardAction.Storyboard>
            </m:ControlStoryboardAction>
        </c:DataTriggerBehavior>
        <!--#EndRegion EnterActions-->

        <!--#Region ExitActions-->
        <c:DataTriggerBehavior Binding="{Binding Path=IsInBubbleGroup}" Value="False">
            <m:ControlStoryboardAction ControlStoryboardOption="Stop">
                <m:ControlStoryboardAction.Storyboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.1" To="1">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>

                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.1" To="1">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </m:ControlStoryboardAction.Storyboard>
            </m:ControlStoryboardAction>
        </c:DataTriggerBehavior>
    <!--#EndRegion ExitActions-->
</i:Interaction.Behaviors>

Upvotes: 1

Mark
Mark

Reputation: 14930

This might seem like a simple enough answer, but cant you just create a trigger like so:

<c:DataTriggerBehavior Binding="{Binding Path=IsInBubbleGroup}" Value="True">
....
</c:DataTriggerBehavior>

which would be equivalent to the EnterActions, then create another one:

<c:DataTriggerBehavior Binding="{Binding Path=IsInBubbleGroup}" Value="False">
....
</c:DataTriggerBehavior>

which would be equivalent to the ExitActions? (Note the False Value in the last example)

?

Upvotes: 1

Related Questions