#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"
            VerticalAlignment="Center"/>
        <TextBlock Name="txt" Text="?" FontWeight="Bold" FontSize="24"
                VerticalAlignment="Center"
                MouseEnter="question_MouseEnter"/>
        <Popup Name="popCaesar" StaysOpen="False"
                AllowsTransparency="True" PopupAnimation="Scroll">
            <Border BorderBrush="Blue" BorderThickness="1"
                    Background="AliceBlue">
                <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"
                                Margin="10"
                                Width="150" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>
        </Popup>