#881 – Positioning a Popup Relative to an Arbitrary Rectangle

In addition to positioning a Popup control relative to another control or the mouse, you can position the Popup relative to an arbitrary rectangle.

You can place a popup relative to an arbitrary rectangle by specifying a value for the PlacementRectangle property of the popup.  You specify the left and top position of the rectangle, as well as the width and height.  This describes the target rectangle that the Popup should be positioned relative to, in the coordinate space of the parent of the Popup.

In the example below, we specify a rectangle within the Grid.  The Popup will be positioned below this rectangle.  To make the positioning easier to understand, we also draw the rectangle.

    <Grid Margin="15">
        <Button Content="Hover to See Popup"
                Width="150"  Height="25"
                MouseEnter="Button_MouseEnter"/>
        <Rectangle Stroke="Blue" StrokeThickness="1"
                   Width="40" Height="20" Margin="5,10"
                   HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Popup Name="popCaesar" StaysOpen="False"
               PlacementRectangle="5,10,40,20">
            <TextBlock Text="I'm a Popup" Background="AntiqueWhite"
                       Padding="5"/>
        </Popup>
    </Grid>