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

882-001

 

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

882-002

#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

#879 – Positioning a Popup Relative to the Mouse

You can use the Placement property of a Popup to indicate how the popup should be positioned relative to the current mouse pointer.  You can use one of the values listed 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 the mouse pointer.

  • Mouse – Top left corner of popup lines up with the bottom left corner of the rectangle surrounding the mouse pointer

879-001

  • MousePoint – Top left corner of popup lines up with the actual mouse pointing position (the upper left corner of the pointer)

879-002

 

#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

878-001

  • Top – Popup lines up with top of target control

878-002

  • Left – Popup lines up with left of target control

878-003

  • Right – Popup lines up with right of target control

878-004

  • Center – Popup is centered over target control

878-005

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

878-006

 

 

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

877-001

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

876-001

#378 – Positioning Tooltips

There are several properties that dictate where a tooltip will be displayed.

By default, the tooltip is positioned just below the mouse pointer, with its left edge lined up with the left side of the mouse pointer.

The PlacementTarget property can be used to position the tooltip relative to a specific control.  By default, this property refers to the control to which the tooltip is attached.

You can set the Placement property to change the logic of how the tooltip’s position is calculated.  It can be set to a number of different values, including:

  • Absolute – absolute screen coordinates, specified by HorizontalOffset and VerticalOffset
  • Relative – relative to upper left of control, specified by HorizontalOffset and VerticalOffset
  • Bottom, Top, Left, Right – aligned with edge of control

  • Center – centered on control

  • Mouse – aligned with the current mouse pointer (the default)

The tooltip can be more precisely positioned using the HorizontalOffset and VerticalOffset properties.