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

881-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.

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: