#877 – Placing a Popup Relative to Another Control

By default, a Popup control is placed relative to the XAML element in which it is defined.  If you want its position on the screen to be relative to another element, you can define the Popup within that element or you can use the PlacementTarget property to specify which element should be used when determining the popup’s placement.

In the example below, the default placement will still be along the bottom edge of an element, but the PlacementTarget property is used to locate the Popup below a Button rather than below the StackPanel in which it is defined.

    <StackPanel Margin="15" Orientation="Horizontal" Background="AliceBlue">
        <Button Name="btnLearn"
                Content="Learn About Caesar"
                Margin="5" Padding="10,5"
                VerticalAlignment="Center"
                MouseEnter="Button_MouseEnter">
        </Button>
        <Popup Name="popCaesar" StaysOpen="False"
               PlacementTarget="{Binding ElementName=btnLearn}">
            <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>