#882 – Popup Placement at Screen Boundaries

You specify the placement of a Popup control using the Placement property, indicating which side of the target control or region that you want the popup to appear on.

The placement of a popup control is automatically adjusted to ensure that the Popup remains on the screen.  The basic logic is:

• If the popup extends off the edge of the screen in the direction corresponding to its placement (e.g. extends off bottom of screen when placement is Bottom), the placement jumps to the opposite side of the target control or rectangle.
• If the popup extends of the screen in the other dimension, it is moved onto the screen

For example, if the placement of a Popup is at the Bottom of a control, it appears under the control:

If the window is close to the bottom edge of the screen, the popup will jump to the top of the control.

#878 – Options for Positioning a Popup Relative to Another Control

You can use the Placement property of a Popup to indicate how the popup should be positioned relative to another control.  You specify the other control to position relative to, using the PlacementTarget property.  You then use one of the values shown below for the Placement property.

Note that there are other possible values for the Placement property.  The subset listed below are the ones used to position the popup relative to another control.

• Bottom (default) – Popup lines up with bottom of target control

• Top – Popup lines up with top of target control

• Left – Popup lines up with left of target control

• Right – Popup lines up with right of target control

• Center – Popup is centered over target control

• Relative – Upper left corner of Popup is aligned with upper left corner of target control

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