How to: Position a Popup

This set of examples shows how to use the placement properties to specify the position of a Popup control.

Example

You can determine the position of a Popup control by using the following properties:

The first four properties define a two-dimensional coordinate on the screen. The fifth property, Placement, positions the Popup and also defines its behavior if its content overlaps the screen boundaries.

Use a PlacementMode enumeration value to set the Placement property. For more information about the enumeration values for PlacementMode, see How to: Set the Placement Property for a Popup or Tooltip.

The following illustrations show how the placement properties work together to position a Popup control.


Popup placement by using the Placement property

Popup placement


Popup placement by using the Placement and PlacementRectangle properties

Popup placement rectangle


Popup placement by using the Placement, PlacementRectangle, and Offset properties

Popup placement diagram

The following example shows how to set these Popup properties. For the complete sample, see Popup Position Sample.

<Popup Name="myPopup" 
       PlacementTarget="{Binding ElementName = myEllipse}" 
       PlacementRectangle="0,0,30,50"
       VerticalOffset="20"
       HorizontalOffset="20" 
       Placement="Bottom"
       PopupAnimation="Fade"
       AllowsTransparency="True">
  <TextBlock Name="PopupContent"
        Background="Beige"
        FontSize="12"
        Width="75"
        TextWrapping="Wrap">
    Popup Text
  </TextBlock>
</Popup>
Popup myPopup = new Popup();
myPopup.PlacementTarget = myEllipse;
myPopup.PlacementRectangle = new Rect(0, 0, 30, 50);
myPopup.VerticalOffset = 20;
myPopup.HorizontalOffset = 20;
myPopup.Placement = PlacementMode.Bottom;
myPopup.PopupAnimation = PopupAnimation.Fade;
myPopup.AllowsTransparency = true;
TextBlock popupText = new TextBlock();
popupText.Background = Brushes.Beige;
popupText.FontSize = 12;
popupText.Width = 75;
popupText.TextWrapping = TextWrapping.Wrap;
myPopup.Child = popupText;

See Also

Tasks

How to: Set the Placement Property for a Popup or Tooltip

Reference

Popup

Concepts

Popup Overview

Other Resources

Popup How-to Topics
Popup Samples
Popup Position Sample