#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>

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

2 Responses to #872 – Animating a Popup

  1. Pingback: Dew Drop – July 26, 2013 (#1,593) | Alvin Ashcraft's Morning Dew

  2. Pingback: #872 – Animating a Popup | 2,000 Things You Should Know About WPF | Program In .NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: