Trigger Animations

Question

Hi, I have a usercontrol that when I double click on it, I want it to zoom in, if it's not already. If it is, then the double click will zoom out on it. I can get it to work with code behind, but I can't get it to work in xaml. Here is the code behind that handle's the double click event.

void MyObjectMouseDoubleClick(object sender, MouseButtonEventArgs e)
    {
        if (IsZoomedIn)
        {
            IsZoomedIn = false;
            //ZoomOutAnimation();
        }
        else
        {
            IsZoomedIn = true;
            //ZoomInAnimation();
        }
    }

then in my xaml:

<UserControl.RenderTransform>
    <TransformGroup>
        <RotateTransform />
        <ScaleTransform />
        <TranslateTransform />
    </TransformGroup>
</UserControl.RenderTransform>

<UserControl.Style>
    <Style>
        <Style.Triggers>
            <Trigger Property="local:MyObject.IsZoomedIn" Value="False">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(UserControl.
                            RenderTransform).(TransformGroup.Children)[1].
                            (ScaleTransform.ScaleX)" To="1" Duration="0:0:.3" />
                            <DoubleAnimation Storyboard.TargetProperty="(UserControl.
                            RenderTransform).(TransformGroup.Children)[1].
                            (ScaleTransform.ScaleY)" To="1" Duration="0:0:.3" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="local:MyObject.IsZoomedIn" Value="True">
                <Trigger.EnterActions>        
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(UserControl.
                        RenderTransform).(TransformGroup.Children)[1].
                        (ScaleTransform.ScaleX)" To="2" Duration="0:0:.3" />
                        <DoubleAnimation Storyboard.TargetProperty="(UserControl.
                        RenderTransform).(TransformGroup.Children)[1].
                        (ScaleTransform.ScaleY)" To="2" Duration="0:0:.3" />
                    </Storyboard>
                </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

Once it zooms in on my usercontrol, the zoom out animation doesn't work. Any help appreciated.
Thanks.

Answer 1

Your animations are holding the values, and so the second animation isn't appearing even though the trigger is firing. Instead of having two separate triggers, you can use the Trigger.ExitActions like you are using the EnterActions.

<Trigger Property="IsZoomedIn"
   Value="True">
 <Trigger.EnterActions>
  <BeginStoryboard>
   <Storyboard >
    <DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"  
         To="2"
         Duration="0:0:.3" />
    <DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
         To="2"
         Duration="0:0:.3" />
   </Storyboard>
  </BeginStoryboard>
 </Trigger.EnterActions>
 <Trigger.ExitActions>
  <BeginStoryboard>
   <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
         To="1"
         Duration="0:0:.3" />
    <DoubleAnimation Storyboard.TargetProperty="(UserControl.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
         To="1"
         Duration="0:0:.3" />
   </Storyboard>
  </BeginStoryboard>
 </Trigger.ExitActions>
</Trigger>