#876 – Default Popup Placement

By default, a Popup control is positioned so that the upper left corner of the Popup lines up with the lower left corner of the element in which the Popup is contained.  This places the Popup below the containing element.

The element in which the Popup is contained is the parent element, as defined in XAML.  This may not be the element that the user interacts with in order to make the Popup appear.

Below, we have a Popup that appears whenever the user moves the mouse over a Button.  But the Popup is defined within a StackPanel, so it is aligned with the bottom of the StackPanel when it appears.

    <StackPanel Margin="15" Orientation="Horizontal" Background="AliceBlue">
        <Button Name="btnLearn"
                Content="Learn About Caesar"
                Margin="5" Padding="10,5"
                VerticalAlignment="Center"
                MouseEnter="Button_MouseEnter"/>
        <Popup Name="popCaesar" StaysOpen="False">
            <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                        Background="AntiqueWhite"
                        Padding="5" Width="150"
                        TextWrapping="Wrap"/>
        </Popup>
    </StackPanel>

876-001

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.

One Response to #876 – Default Popup Placement

  1. Pingback: Dew Drop – August 1, 2013 (#1,597) | Alvin Ashcraft's Morning Dew

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: