#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

#880 – Adding an Offset When Positioning a Popup

When you position a Popup control, you can add horizontal or vertical offsets to move the Popup away from its target position.

The popup’s HorizontalOffset property indicates how far to move the popup left or right.  A positive value will move the popup to the right and a negative value will move it to the left.

The popup’s VerticalOffset property indicates how far to move the popup up or down.  A positive value will move the popu down and a negative value will move it up.

In the example below, the Popup is placed relative to the bottom of a Button.  It’s then moved 10 units to the right and 5 units down.

        <Popup Name="popCaesar" StaysOpen="False"
               PlacementTarget="{Binding ElementName=btnLearn}"
               Placement="Bottom"
               HorizontalOffset="10" VerticalOffset="5">
            <Border BorderBrush="DarkBlue" BorderThickness="1"
                    Background="AntiqueWhite">
                <TextBlock Text="The seething sea ceaseth and thus the seething sea sufficeth us."
                            Padding="5" Width="160"
                            TextWrapping="Wrap"/>
            </Border>
        </Popup>

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