scale animation for wpf popup

3.3k Views Asked by At

I have a nice little popup, when it shows, I d'like it to growth from 0 to 1x scaley, but I don't get it right, when I click multiple times, it looks like i "catch" the animation at various states during the "growth".

<Window.Triggers>

    <EventTrigger RoutedEvent="FrameworkElement.MouseRightButtonDown" 
                  >
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="SimplePopup" 
                        Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>

</Window.Triggers>

and the popup:

   <Popup Name="SimplePopup"
           AllowsTransparency="True" 
           StaysOpen="False">
        <Popup.LayoutTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1" />
                <SkewTransform AngleX="0" AngleY="0" />
                <RotateTransform Angle="0" />
                <TranslateTransform X="0" Y="0" />
            </TransformGroup>
        </Popup.LayoutTransform>
        <Border> some Content here
          </Border>
    </Popup>
2

There are 2 best solutions below

1
On

by "catch" the animation at various states during the "growth".

I mean that there is no animation at all, all I see is the static popup scaled at different sizes, but not a visible animation.

0
On

I'm not sure what you mean by

"catch" the animation at various states during the "growth".

Maybe that it won't finish the animation but restart when you click before storyboard is completed? If so, you need to prevent the animation from restarting by firing action only when it's not running. I think it can be done with more complex behaviors or triggers available in Blend.