Verhalten beim Platzieren von Popups

Ein Popup-Steuerelement zeigt Inhalt in einem separaten Fenster an, das unverankert über anderen Fenstern der Anwendung angezeigt wird. Sie können die Position von einem Popup relativ zu einem Steuerelement, der Maus oder dem Bildschirm angeben, indem Sie die Eigenschaften PlacementTarget, Placement, PlacementRectangle, HorizontalOffset und VerticalOffset verwenden. Durch das Zusammenwirken dieser Eigenschaften können Sie die Popup-Position flexibel angeben.

Hinweis
Die ToolTip-Klasse und die ContextMenu-Klasse definieren ebenfalls diese fünf Eigenschaften und verhalten sich ähnlich.

Dieses Thema enthält folgende Abschnitte.

• Positionieren des Popups
• Definitionen von Begriffen: Der Aufbau eines Popups
• Wie die Eigenschaften zusammenarbeiten
• Wenn das Popup an den Rand des Bildschirms stößt
• Verwandte Abschnitte

Positionieren des Popups

Ein Popup kann relativ zu einem UIElement oder relativ zum ganzen Bildschirm platziert werden. Im folgenden Beispiel werden vier Popup-Steuerelemente erstellt, die relativ zu einem UIElement, in diesem Fall einem Bild, platziert werden. Für alle Popup-Steuerelemente ist die PlacementTarget-Eigenschaft auf image1 festgelegt, aber jedes Popup hat einen anderen Wert für die Placement-Eigenschaft.

<Canvas Width="200" Height="150">
  <Image Name="image1"
         Canvas.Left="75" 
         Source="Water_lilies.jpg" Height="200" Width="200"/>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Bottom">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Bottom</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Top">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Top</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Left">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Left</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Right">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Right</TextBlock>

  </Popup>
</Canvas>

In der folgenden Abbildung werden das Bild und die Popup-Steuerelemente veranschaulicht.

Bild mit vier Popups

In diesem einfachen Beispiel wird veranschaulicht, wie die PlacementTarget-Eigenschaft und die Placement-Eigenschaft festgelegt werden. Wenn Sie jedoch die Eigenschaften PlacementRectangle, HorizontalOffset und VerticalOffset verwenden, können Sie noch besser steuern, wo das Popup platziert wird.

Definitionen von Begriffen: Der Aufbau eines Popups

Die folgenden Begriffe helfen Ihnen, die Beziehungen zwischen den Eigenschaften PlacementTarget, Placement, PlacementRectangle, HorizontalOffset und VerticalOffset und dem Popup zu verstehen:

• Zielobjekt

• Zielbereich

• Zielursprung

• Ausrichtungspunkt für das Popup

Mithilfe dieser Begriffe kann bequem auf verschiedene Aspekte von einem Popup und des damit verknüpften Steuerelements verwiesen werden.

Zielobjekt

Das Zielobjekt ist das Element, mit dem das Popup verknüpft ist. Wenn die PlacementTarget-Eigenschaft festgelegt ist, gibt sie das Zielobjekt an. Wenn PlacementTarget nicht festgelegt ist und das Popup ein übergeordnetes Element hat, ist das übergeordnete Element das Zielobjekt. Wenn kein PlacementTarget-Wert und kein übergeordnetes Element vorhanden ist, gibt es kein Zielobjekt, und das Popup wird relativ zum Bildschirm positioniert.

Im folgenden Beispiel wird ein Popup erstellt, das das untergeordnete Element von einem Canvas ist. Im Beispiel wird die PlacementTarget-Eigenschaft auf dem Popup nicht festgelegt. Der Standardwert für Placement ist PlacementMode.Bottom, sodass das Popup unter dem Canvas angezeigt wird.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" >
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

Die folgende Abbildung zeigt, dass das Popup relativ zum Canvas positioniert wird.

Popup ohne PlacementTarget

Im folgenden Beispiel wird ein Popup erstellt, das das untergeordnete Element von einem Canvas ist. In diesem Fall ist jedoch PlacementTarget auf ellipse1 festgelegt, sodass das Popup unter der Ellipse angezeigt wird.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Name="ellipse1"
           Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=ellipse1}">
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

Die folgende Abbildung zeigt, dass das Popup relativ zur Ellipse positioniert wird.

Popup mit PlacementTarget

Hinweis
Für ToolTip ist Mouseder Standardwert für Placement.Für ContextMenu ist MousePointder Standardwert für Placement.Diese Werte werden weiter unten in "Wie die Eigenschaften zusammenarbeiten" erklärt.

Zielbereich

Der Zielbereich ist der Bereich auf dem Bildschirm, zu dem das Popup relativ ist. In den vorangegangenen Beispielen wurde das Popup an den Grenzen des Zielobjekts ausgerichtet. In manchen Fällen wird das Popup jedoch an anderen Grenzen ausgerichtet, selbst wenn das Popup ein Zielobjekt besitzt. Wenn die PlacementRectangle-Eigenschaft festgelegt ist, unterscheidet sich der Zielbereich von den Grenzen des Zielobjekts.

Im folgenden Beispiel werden zwei Canvas-Objekte erstellt, die jeweils ein Rectangle und ein Popup enthalten. In beiden Fällen ist der Canvasdas Zielobjekt für das Popup. Für das Popup im ersten Canvas ist das PlacementRectangle festgelegt, wobei die Eigenschaften X, Y, Width und Height auf 50, 50, 50 bzw. 100 festgelegt sind. Für das Popup im zweiten Canvas ist das PlacementRectangle nicht festgelegt. Dadurch wird das erste Popup unter dem PlacementRectangle und das zweite Popup über dem Canvas positioniert. Jeder Canvas enthält auch ein Rectangle, das die gleichen Grenzen wie das PlacementRectangle für das erste Popup besitzt. Beachten Sie, dass das PlacementRectangle kein sichtbares Element in der Anwendung erstellt. Im Beispiel wird ein Rectangle erstellt, dass das PlacementRectangle darstellt.

<StackPanel Orientation="Horizontal" Margin="50,50,0,0">

  <Canvas Width="200" Height="200" Background="Red">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True" PlacementRectangle="50,50,50,100">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup with a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

  <Canvas Width="200" Height="200" Background="Red" Margin="30,0,0,0">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup without a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

</StackPanel>

Die folgende Abbildung zeigt das Ergebnis des vorangegangenen Beispiels.

Popup mit und ohne PlacementRectangle

Zielursprung und Ausrichtungspunkt für das Popup

Der Zielursprung und der Ausrichtungspunkt für das Popup sind Bezugspunkte auf dem Zielbereich und dem Popup, die jeweils für die Positionierung verwendet werden. Sie können die HorizontalOffset-Eigenschaft und die VerticalOffset-Eigenschaft verwenden, um das Popup aus dem Zielbereich zu verschieben. Der HorizontalOffset und der VerticalOffset sind relativ zum Zielursprung und dem Ausrichtungspunkt für das Popup. Der Wert der Placement-Eigenschaft bestimmt, wo sich der Zielursprung und der Ausrichtungspunkt für das Popup befinden.

Im folgenden Beispiel wird ein Popup-Element erstellt, und die Eigenschaften HorizontalOffset sowie VerticalOffset werden auf 20 festgelegt. Die Placement-Eigenschaft ist auf Bottom (Standardwert) festgelegt, sodass der Zielursprung die linke untere Ecke des Zielbereichs und der Ausrichtungspunkt für das Popup die linke obere Ecke vom Popup-Element ist.

<Canvas Width="200" Height="200" Background="Yellow" Margin="20">
  <Popup IsOpen="True" Placement="Bottom"
         HorizontalOffset="20" VerticalOffset="20">
    <TextBlock FontSize="14" Background="#42F3FD">
      This is a popup.
    </TextBlock>
  </Popup>
</Canvas>

Die folgende Abbildung zeigt das Ergebnis des vorangegangenen Beispiels.

Popup mit HorizontalOffset und VerticalOffset

Wie die Eigenschaften zusammenarbeiten

Die Werte von PlacementTarget, PlacementRectangle und Placement müssen zusammen betrachtet werden, damit der Zielbereich, der Zielursprung und der Ausrichtungspunkt für das Popup richtig ermittelt werden können. Wenn der Wert von Placement beispielsweise Mouse ist, gibt es kein Zielobjekt, das PlacementRectangle wird ignoriert, und der Zielbereich entspricht den Grenzen des Mauszeigers. Wenn andererseits Placement Bottom ist, legt das PlacementTarget oder das übergeordnete Element das Zielobjekt fest, und PlacementRectangle legt den Zielbereich fest.

Die folgende Tabelle beschreibt das Zielobjekt, den Zielbereich, den Zielursprung und den Ausrichtungspunkt für das Popup und gibt an, ob PlacementTarget und PlacementRectangle für jeden einzelnen PlacementMode-Enumerationswert verwendet werden.

PlacementMode	Zielobjekt	Zielbereich	Zielursprung	Ausrichtungspunkt für das Popup
Absolute	Nicht zutreffend. PlacementTarget wird ignoriert.	Der Bildschirm oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Bildschirm.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
AbsolutePoint	Nicht zutreffend. PlacementTarget wird ignoriert.	Der Bildschirm oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Bildschirm.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
Bottom	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die linke untere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
Center	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die Mitte des Zielbereichs.	Die Mitte vom Popup.
Custom	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Definiert durch den CustomPopupPlacementCallback.	Definiert durch den CustomPopupPlacementCallback.
Left	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die linke obere Ecke des Zielbereichs.	Die rechte obere Ecke vom Popup.
Mouse	Nicht zutreffend. PlacementTarget wird ignoriert.	Die Grenzen des Mauszeigers. PlacementRectangle wird ignoriert.	Die linke untere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
MousePoint	Nicht zutreffend. PlacementTarget wird ignoriert.	Die Grenzen des Mauszeigers. PlacementRectangle wird ignoriert.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
Relative	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
RelativePoint	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
Right	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die rechte obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.
Top	PlacementTarget oder übergeordnetes Element.	Das Zielobjekt oder das PlacementRectangle, wenn festgelegt. Das PlacementRectangle ist relativ zum Zielobjekt.	Die linke obere Ecke des Zielbereichs.	Die linke obere Ecke vom Popup.

Die folgenden Abbildungen zeigen das Popup, den Zielbereich, den Zielursprung und den Ausrichtungspunkt für das Popup für jeden einzelnen PlacementMode-Wert. In jeder Abbildung ist der Zielbereich gelb und das Popup-Objekt blau.

Platzierung ist Absolute oder AbsolutePoint

Platzierung ist Bottom

Platzierung ist Center

Platzierung ist Left

Platzierung ist Mouse

Platzierung ist MousePoint

Platzierung ist Relative oder RelativePoint

Platzierung ist Right

Platzierung ist Top

Wenn das Popup an den Rand des Bildschirms stößt

Aus Sicherheitsgründen kann ein Popup nicht vom Rand eines Bildschirms verdeckt werden. Wenn das Popup an einen Bildschirmrand stößt, gibt es drei Möglichkeiten:

• Das Popup richtet sich am Bildschirmrand, der das Popup verdecken würde, neu aus.

• Das Popup verwendet einen anderen Ausrichtungspunkt.

• Das Popup verwendet einen anderen Zielursprung und einen anderen Ausrichtungspunkt.

Diese Optionen werden weiter unten in diesem Abschnitt beschrieben.

Wie sich das Popup verhält, wenn es an einen Bildschirmrand stößt, hängt vom Wert der Placement-Eigenschaft ab und davon, um welchen Bildschirmrand es sich handelt. In der folgenden Tabelle wird zusammengefasst, wie sich das Popup verhält, wenn es bei einem PlacementMode-Wert an einen Bildschirmrand stößt.

PlacementMode	Oberer Rand	Unterer Rand	Linker Rand	Rechter Rand
Absolute	Richtet sich am oberen Rand aus.	Richtet sich am unteren Rand aus.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.
AbsolutePoint	Richtet sich am oberen Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur linken unteren Ecke vom Popup.	Richtet sich am linken Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur rechten oberen Ecke vom Popup.
Bottom	Richtet sich am oberen Rand aus.	Der Zielursprung wechselt zur linken oberen Ecke des Zielbereichs, und der Ausrichtungspunkt für das Popup wechselt zur linken unteren Ecke vom Popup.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.
Center	Richtet sich am oberen Rand aus.	Richtet sich am unteren Rand aus.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.
Left	Richtet sich am oberen Rand aus.	Richtet sich am unteren Rand aus.	Der Zielursprung wechselt zur rechten oberen Ecke des Zielbereichs, und der Ausrichtungspunkt für das Popup wechselt zur linken oberen Ecke vom Popup.	Richtet sich am rechten Rand aus.
Mouse	Richtet sich am oberen Rand aus.	Der Zielursprung wechselt zur linken oberen Ecke des Zielbereichs (die Grenzen des Mauszeigers), und der Ausrichtungspunkt für das Popup wechselt zur linken unteren Ecke vom Popup.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.
MousePoint	Richtet sich am oberen Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur linken unteren Ecke vom Popup.	Richtet sich am linken Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur rechten oberen Ecke des Popups.
Relative	Richtet sich am oberen Rand aus.	Richtet sich am unteren Rand aus.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.
RelativePoint	Richtet sich am oberen Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur linken unteren Ecke vom Popup.	Richtet sich am linken Rand aus.	Der Ausrichtungspunkt für das Popup wechselt zur rechten oberen Ecke des Popups.
Right	Richtet sich am oberen Rand aus.	Richtet sich am unteren Rand aus.	Richtet sich am linken Rand aus.	Der Zielursprung wechselt zur linken oberen Ecke des Zielbereichs, und der Ausrichtungspunkt für das Popup wechselt zur rechten oberen Ecke vom Popup.
Top	Der Zielursprung wechselt zur linken unteren Ecke des Zielbereichs, und der Ausrichtungspunkt für das Popup wechselt zur linken oberen Ecke vom Popup. Dies hat die gleiche Wirkung, wie wenn Placement Bottom ist.	Richtet sich am unteren Rand aus.	Richtet sich am linken Rand aus.	Richtet sich am rechten Rand aus.

Ausrichten am Bildschirmrand

Ein Popup kann sich am Bildschirmrand ausrichten, indem es sich neu positioniert, sodass das gesamte Popup auf dem Bildschirm sichtbar ist. In diesem Fall kann der Abstand zwischen dem Zielursprung und dem Ausrichtungspunkt für das Popup von den Werten für HorizontalOffset und VerticalOffset abweichen. Wenn PlacementAbsolute, Center oder Relative ist, richtet das Popup sich selbst an jeder Seite des Bildschirmrands aus. Angenommen, bei einem Popup-Element ist Placement auf Relative und VerticalOffset auf 100 festgelegt. Wenn der untere Bildschirmrand das gesamte Popup-Element oder Teile davon verdeckt, positioniert sich das Popup-Element entlang des unteren Bildschirmrandes, und der vertikale Abstand zwischen dem Zielursprung und dem Ausrichtungspunkt für das Popup ist weniger als 100. Dies wird in der folgenden Abbildung veranschaulicht.

Popup richtet sich am Bildschirmrand aus

Ändern des Ausrichtungspunkts für das Popup

Wenn Placement AbsolutePoint, RelativePoint oder MousePoint ist, ändert sich der Ausrichtungspunkt für das Popup, wenn das Popup auf den unteren oder rechten Bildschirmrand stößt.

Die folgende Abbildung zeigt, dass wenn der untere Bildschirmrand das Popup teilweise oder ganz verdeckt, der Ausrichtungspunkt für das Popup die linke untere Ecke vom Popup ist.

Das Popup stößt auf den unteren Bildschirmrand und ändert den Ausrichtungspunkt für das Popup

Die folgende Abbildung zeigt, dass wenn das Popup vom rechten Bildschirmrand verdeckt wird, der Ausrichtungspunkt für das Popup die rechte obere Ecke vom Popup ist.

Das Popup stößt auf den rechten Bildschirmrand und ändert den Ausrichtungspunkt für das Popup

Wenn das Popup auf den unteren oder rechten Bildschirmrand stößt, ist der Ausrichtungspunkt für das Popup die rechte untere Ecke vom Popup.

Ändern des Zielursprungs und des Ausrichtungspunkts für das Popup

Wenn Placement Bottom, Left, Mouse, Right oder Top ist, ändern sich der Zielursprung und der Ausrichtungspunkt für das Popup, wenn das Popup auf einen bestimmten Bildschirmrand stößt. Welcher Bildschirmrand die Positionsänderung verursacht, hängt vom PlacementMode-Wert ab.

Die folgende Abbildung zeigt, dass wenn Placement Bottom ist und das Popup auf den unteren Bildschirmrand stößt, der Zielursprung die linke obere Ecke des Zielbereichs und der Ausrichtungspunkt für das Popup die linke untere Ecke vom Popup ist.

Platzierung ist Bottom, und das Popup stößt auf den unteren Bildschirmrand

Die folgende Abbildung zeigt, dass wenn Placement Left ist und das Popup auf den linken Bildschirmrand stößt, der Zielursprung die rechte obere Ecke des Zielbereichs und der Ausrichtungspunkt für das Popup die linke obere Ecke vom Popup ist.

Platzierung ist Left, und das Popup stößt auf den linken Bildschirmrand

Die folgende Abbildung zeigt, dass wenn Placement Right ist und das Popup auf den rechten Bildschirmrand stößt, der Zielursprung die linke obere Ecke des Zielbereichs und der Ausrichtungspunkt für das Popup die rechte obere Ecke vom Popup ist.

Platzierung ist Right, und das Popup stößt auf den rechten Bildschirmrand

Die folgende Abbildung zeigt, dass wenn Placement Top ist und das Popup auf den oberen Bildschirmrand stößt, der Zielursprung die linke untere Ecke des Zielbereichs und der Ausrichtungspunkt für das Popup die linke obere Ecke vom Popup ist.

Platzierung ist Top, und das Popup stößt auf den oberen Bildschirmrand

Die folgende Abbildung zeigt, dass wenn Placement Mouse ist und das Popup auf den unteren Bildschirmrand stößt, der Zielursprung die linke obere Ecke des Zielbereichs (die Grenzen des Mauszeigers) und der Ausrichtungspunkt für das Popup die linke untere Ecke vom Popup ist.

Platzierung ist Mouse, und das Popup stößt auf den unteren Bildschirmrand

Anpassen der Platzierung von Popups

Sie können den Zielursprung und den Ausrichtungspunkt für das Popup anpassen, indem Sie die Placement-Eigenschaft auf Custom festlegen. Definieren Sie dann einen CustomPopupPlacementCallback-Delegaten, der eine Reihe von möglichen Platzierungspunkten und Primärachsen (nach dem Grad der Bevorzugung geordnet) für das Popup zurückgibt. Der Punkt, der den größten Teil vom Popup anzeigt, wird ausgewählt. Die Position für das Popup wird automatisch angepasst, wenn das Popup durch den Bildschirmrand verdeckt wird. Ein Beispiel finden Sie unter Gewusst wie: Angeben einer benutzerdefinierten Popup-Position.

Siehe auch

Weitere Ressourcen

Beispiel zur Platzierung von Popups