Stopbyte

Need Popup Custom advanced Animation using WPF XAML only?

Software Development WPF
#1

Hi,

i have a popup in WPF, that has a Slide opening animation, and i need to have similar animation effect when closing.

or being able to apply custom advanced Animations at opening and closing other than sliding.

is there any easy way to do that? i’ve checked MSDN, SO, and some other forums nothings seems to be working, you can provide some links to some reliable source as well.

thanks in advance.

4 Likes
#2

Probably try Fad animation, it works at opening and closing of the popup by default.
without any customization needed!

#3

if you want to keep using slide animation or other custom animations of your choice, you will have to keep in mind that what needs to be animated is the popup’s content not the popup itself.

#4

As i commented out,

You should keep in mind that the popup’s content that should be animated not the popup itself.

So here is the Flow:

  1. Make the Popup Transparent AllowsTransparency="True".
  2. The Popup animation can be dependent on the style you want, mainly if you want a 100% custom animation, set PopupAnimation="Slide".
  3. Add a non-Transparent Canvas, Border, Grid…or whatever works for you.
  4. Apply the animations you want to that Element at ‘Step 3’ whenever the popup is opened and closed.
  5. Notice, that might sound easy but it’s tricky, due to Microsoft usual laziness, WPF is shorting some methods implementation, WPF Popup closing and Opening events are not RoutedEvents only normal CLR events, thus it wont allow any dependency property binding so you wont be able to animate the popup directly.
  6. A workaround for that would be using an intermediate ToggleButton, Checkbox or simple button as below, that will trigger the required animation when needed. a related subject has been discussed in this question page: How to open a WPF Popup when another control is clicked, using XAML markup only?

here is an Example XAML of the popup:

<Popup IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}" 
       PlacementTarget="{Binding ElementName=myCheckBox}"            
       AllowsTransparency="True"
       PopupAnimation="Slide"
       HorizontalOffset="50"
       VerticalOffset="50"
       >
  <!--The Margin set on the Canvas provides the additional 
      area around the Popup so that the Popup is visible when 
      it rotates.-->
  <Canvas Width="100" Height="100" Background="DarkBlue"
          Margin="150">
    <Canvas.RenderTransform>
      <RotateTransform x:Name="theTransform" />
    </Canvas.RenderTransform>
    <TextBlock TextWrapping="Wrap" Foreground="White">
      Rotating Popup
    </TextBlock>
  </Canvas>
</Popup>

So now when the button is Clicked animate that Popup.
Mainly you can do that on The Checkbox Checked event too.

<Button HorizontalAlignment="Left" Width="200" Margin="20,10,0,0">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="theTransform"
            Storyboard.TargetProperty="(RotateTransform.Angle)" 
            From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
  Click to see the Popup animate
</Button>

P.S. this example was given to illustrate what i described in the workflow above, it’s not meant to solve your issue, follow those steps one by one and that will get your problem solved.

3 Likes
#5

I really understand it now @sparta thanks.

So basically i needed to animate the Popup Content but not the Popup itself:

<Canvas.RenderTransform>
      <RotateTransform x:Name="theTransform" />
</Canvas.RenderTransform>

In the snippet you provided you animated the Canvas using theTransform RotateTransform, it really gives a nice animation.

thanks again @sparta

2 Likes