#872 – Animating a Popup

You can animate a Popup control so that it appears gradually, using a specified animation.  The popup does not animate when it is being hidden, but only when it is being shown.

To animate a popup, you set its AllowTransparency property to true and then set its PopupAnimation property to one of the following values:

  • None – No animation performed
  • Fade – Popup fades in
  • Scroll – Popup slides in diagonally, from the upper left corner of the parent window (or from bottom right, if there isn’t enough room)
  • Slide – Popup slides down to final location (or slides up if there isn’t enough room at top of screen)
        <Button Content="Learn About Caesar"
            Margin="5" Padding="10,5"
        <TextBlock Name="txt" Text="?" FontWeight="Bold" FontSize="24"
        <Popup Name="popCaesar" StaysOpen="False"
                AllowsTransparency="True" PopupAnimation="Scroll">
            <Border BorderBrush="Blue" BorderThickness="1"
                <StackPanel Orientation="Horizontal">
                    <Image Source="Caesar.jpg" Height="100"/>
                    <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                                Width="150" TextWrapping="Wrap"/>