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