Verhalten beim Platzieren von Popups

Ein Popup-Steuerelement zeigt Inhalt in einem separaten Fenster an, das vor einer Anwendung eingeblendet wird. Die Position eines Popup-Steuerelements kann mithilfe der Eigenschaften PlacementTarget, Placement, PlacementRectangle, HorizontalOffset und VerticalOffset im Verhältnis zu einem Steuerelement, zur Maus oder zu einem Bildschirmbereich angegeben werden. Diese Eigenschaften spielen zusammen und geben Ihnen die Flexibilität, die Position des Popup-Steuerelements selbst festzulegen.

Hinweis

Diese fünf Eigenschaften werden auch von den Klassen ToolTip und ContextMenu definiert, die sich ähnlich verhalten.

Positionieren von Popups

Die Platzierung eines Popup-Steuerelements kann in Relation zu einem UIElement-Element oder zum gesamten Bildschirm angegeben werden. Im folgenden Beispiel werden vier Popup-Steuerelemente erstellt, die in Bezug auf ein UIElement-Element (in diesem Fall ein Bild) eine bestimmte Position aufweisen. Für alle Popup-Steuerelemente wurde die Eigenschaft PlacementTarget auf image1 festgelegt, die Werte der Eigenschaft „Placement“ unterscheiden sich jedoch zwischen den einzelnen Popup-Steuerelementen.

<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 einzelnen Popup-Steuerelemente gezeigt:

Dieses einfache Beispiel veranschaulicht, wie die Eigenschaften PlacementTarget und Placement festgelegt werden. Mithilfe der Eigenschaften PlacementRectangle, HorizontalOffset und VerticalOffset lässt sich die Position eines Popup-Steuerelements genauer steuern.

[HINWEIS] Je nach Ihren Windows-Einstellungen im Zusammenhang mit der Händigkeit ist das Popup möglicherweise links oder rechtsbündig ausgerichtet, wenn es oben oder unten angezeigt wird. Das vorherige Bild zeigt die rechtshändige Ausrichtung, die das Popup links platziert.

Begriffsdefinition: der Aufbau eines Popups

Die folgenden Begriffe sind hilfreich, um zu verstehen, in welchem Zusammenhang die Eigenschaften PlacementTarget, Placement, PlacementRectangle, HorizontalOffset und VerticalOffset zueinander und zum Popup-Steuerelement stehen:

• Zielobjekt

• Der Zielbereich

• Der Zielursprung

• Der Popupausrichtungspunkt

Mit diesen Begriffen können Sie unkompliziert auf verschiedene Aspekte des Popup-Objekts und des dazugehörigen Steuerelements verweisen.

Zielobjekt

Das Zielobjekt ist das Element, mit dem Popup verknüpft ist. Wenn die Eigenschaft PlacementTarget festgelegt ist, gibt sie das Zielobjekt an. Ist PlacementTarget nicht festgelegt, und das Popup-Steuerelement verfügt über ein übergeordnetes Element, ist das übergeordnete Element das Zielobjekt. Sind weder ein PlacementTarget-Wert noch übergeordnetes Element vorhanden, gibt es kein Zielobjekt, und das Popup-Steuerelement wird im Verhältnis zum Bildschirm positioniert.

Im folgenden Beispiel wird ein Popup-Steuerelement erstellt, das ein untergeordnetes Element von Canvas ist. Die Eigenschaft PlacementTarget wird nicht für das Popup-Steuerelement festgelegt. Der Standardwert von Placement lautet PlacementMode.Bottom, sodass der Popup unterhalb von 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 das Popup-Steuerelement, das im Verhältnis zu Canvas positioniert ist.

Im folgenden Beispiel wird ein Popup-Steuerelement erstellt, das das untergeordnete Element eines Canvas-Elements ist. Dieses Mal wird PlacementTarget jedoch auf ellipse1 festgelegt, sodass das Popup unterhalb von 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 das Popup-Steuerelement, das im Verhältnis zu Ellipse positioniert ist.

Hinweis

Für ToolTip entspricht der Standardwert von Placement dem Wert Mouse. Für ContextMenu entspricht der Standardwert von Placement dem Wert MousePoint. Diese Werte werden später in „Zusammenwirken der Eigenschaften“ erklärt.

Der Zielbereich

Der Zielbereich ist der Teil des Bildschirms, zu dem Popup in Relation gesetzt wird. In den vorherigen Beispielen wurde Popup an den Grenzen des Zielobjekts ausgerichtet. In bestimmten Fällen wird Popup jedoch in Bezug zu anderen Grenzen gesetzt, selbst wenn Popup ein Zielobjekt aufweist. Wenn die Eigenschaft PlacementRectangle festgelegt ist, unterscheidet sich der Zielbereich von den Grenzen des Zielobjekts.

Im folgenden Beispiel werden zwei Canvas-Objekte erstellt, von denen jedes ein Rectangle-Steuerelement und ein Popup-Element enthält. In beiden Fällen ist das Canvas-Element das Zielobjekt des Popup-Steuerelements. Für das Popup-Steuerelement im ersten Canvas-Element wurde die Eigenschaft PlacementRectangle festgelegt, wobei ihre Eigenschaften X, Y, Widthund Height die Werte 50, 50, 50 bzw. 100 aufweisen. Für das Popup-Steuerelement im zweiten Canvas-Element ist PlacementRectangle nicht festgelegt. Aus diesem Grund wird das erste Popup-Steuerelement unter PlacementRectangle und das zweite Popup-Steuerelement unter Canvas positioniert. Jedes Canvas-Element enthält außerdem ein Rectangle-Element, das dieselben Grenzen wie das PlacementRectangle-Element für das erste Popup-Steuerelement aufweist. Beachten Sie, dass PlacementRectangle kein sichtbares Element in der Anwendung erstellt. Im Beispiel wird ein Rectangle-Element erstellt, um PlacementRectangle darzustellen.

<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 vorherigen Beispiels.

Zielursprung und Popupausrichtungspunkt

Der Zielursprung und Popupausrichtungspunkt sind Bezugspunkte für die Positionierung im Zielbereich und im Popup. Mithilfe der Eigenschaften HorizontalOffset und VerticalOffset können Sie das Popup um einen bestimmten Wert im Verhältnis zum Zielbereich versetzen. Die Eigenschaften HorizontalOffset und VerticalOffset sind abhängig vom Zielursprung und vom Popupausrichtungspunkt. Der Wert der Eigenschaft Placement bestimmt, wo sich der Zielursprung und der Popupausrichtungspunkt befinden.

Im folgenden Beispiel wird zunächst ein Popup erstellt. Anschließend werden die Eigenschaften HorizontalOffset und VerticalOffset auf 20 festgelegt. Die Eigenschaft Placement wird auf Bottom festgelegt (Standard), sodass der Zielursprung der linken unteren Ecke des Zielbereichs und der Popupausrichtungspunkt der linken oberen Ecke des Popup-Steuerelements entspricht.

<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 vorherigen Beispiels.

Zusammenwirken der Eigenschaften

Die Werte von PlacementTarget, PlacementRectangle und Placement müssen zusammen betrachtet werden, um den richtigen Zielbereich, Zielursprung und Popupausrichtungspunkt zu ermitteln. Wenn der Wert von Placement z. B. Mouse lautet, gibt es kein Zielobjekt, PlacementRectangle wird ignoriert, und der Zielbereich entspricht den Grenzen des Mauszeigers. Wenn Placement hingegen Bottom ist, bestimmt PlacementTarget oder das übergeordnete Element das Zielobjekt, und PlacementRectangle legt den Zielbereich fest.

In der folgenden Tabelle werden das Zielobjekt, der Zielbereich, der Zielursprung und der Popupausrichtungspunkt beschrieben. Außerdem wird angegeben, ob PlacementTarget und PlacementRectangle für jeden PlacementMode-Enumerationswert verwendet werden.

PlacementMode	Zielobjekt	Der Zielbereich	Der Zielursprung	Der Popupausrichtungspunkt
Absolute	Nicht zutreffend PlacementTarget wird ignoriert.	Der Bildschirm oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Bildschirm positioniert.	Die linke obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
AbsolutePoint	Nicht zutreffend PlacementTarget wird ignoriert.	Der Bildschirm oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Bildschirm positioniert.	Die linke obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
Bottom	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die linke untere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
Center	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die Mitte des Zielbereichs	Die Mitte des Popup-Steuerelements
Custom	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Von CustomPopupPlacementCallback definiert	Von CustomPopupPlacementCallback definiert
Left	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die linke obere Ecke des Zielbereichs	Die rechte obere Ecke des Popup-Steuerelements
Mouse	Nicht zutreffend PlacementTarget wird ignoriert.	Die Grenzen des Mauszeigers PlacementRectangle wird ignoriert.	Die linke untere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
MousePoint	Nicht zutreffend PlacementTarget wird ignoriert.	Die Grenzen des Mauszeigers PlacementRectangle wird ignoriert.	Die linke obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
Relative	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die linke obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
RelativePoint	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die linke obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
Right	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die rechte obere Ecke des Zielbereichs	Die linke obere Ecke des Popup-Steuerelements
Top	PlacementTarget oder das übergeordnete Element	Das Zielobjekt oder PlacementRectangle, wenn die Eigenschaft festgelegt ist. PlacementRectangle wird im Verhältnis zum Zielobjekt positioniert.	Die linke obere Ecke des Zielbereichs	Die linke untere Ecke des Popup-Steuerelements

Die folgenden Abbildungen zeigen das Popup-Steuerelement, der Zielbereich, der Zielursprung und der Popupausrichtungspunkt für die einzelnen PlacementMode-Werte. Der Zielbereich ist gelb eingefärbt, das Popup-Steuerelement blau.

Wenn das Popup auf einen Bildschirmrand trifft

Aus Sicherheitsgründen kann ein Popup-Steuerelement nicht durch einen Bildschirmrand verdeckt werden. Wenn ein Popup-Steuerelement auf einen Bildschirmrand trifft, tritt eines der folgenden drei Szenarios ein:

• Das Popup wird an dem Bildschirmrand neu ausgerichtet, der das Popup-Steuerelement verdecken würde.

• Das Popup verwendet einen anderen Popupausrichtungspunkt.

• Das Popup verwendet einen anderen Zielursprungs und Popupausrichtungspunkt.

Diese Optionen werden weiter unten in diesem Abschnitt beschrieben.

Das Verhalten, das das Popup-Steuerelement beim Treffen auf einen Bildschirmrand aufweist, hängt vom Wert der Eigenschaft Placement und davon ab, um welchen Bildschirmrand es sich handelt. In der folgenden Tabelle ist für jeden PlacementMode-Wert aufgeführt, wie sich das Popup-Steuerelement verhält, wenn es auf 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 Popupausrichtungspunkt wird auf die untere linke Ecke des Popup-Steuerelements verlegt.	Richtet sich am linken Rand aus	Der Popupausrichtungspunkt wird auf die obere rechte Ecke des Popup-Steuerelements verlegt.
Bottom	Richtet sich am oberen Rand aus	Der Zielursprung wird auf die linke obere Ecke des Zielbereichs und der Popupausrichtungspunkt auf die linke untere Ecke des Popup-Steuerelements verlegt.	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 wird auf die rechte obere Ecke des Zielbereichs und der Popupausrichtungspunkt auf die linke obere Ecke des Popup-Steuerelements verlegt.	Richtet sich am rechten Rand aus
Mouse	Richtet sich am oberen Rand aus	Der Zielursprung wird auf die linke obere Ecke des Zielbereichs (die Grenzen des Mauszeigers) und der Popupausrichtungspunkt auf die linke untere Ecke des Popup-Steuerelements verlegt.	Richtet sich am linken Rand aus	Richtet sich am rechten Rand aus
MousePoint	Richtet sich am oberen Rand aus	Der Popupausrichtungspunkt wird auf die untere linke Ecke des Popup-Steuerelements verlegt.	Richtet sich am linken Rand aus	Der Ausrichtungspunkt wird auf die obere rechte Ecke des Popups geändert.
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 Popupausrichtungspunkt wird auf die untere linke Ecke des Popup-Steuerelements verlegt.	Richtet sich am linken Rand aus	Der Ausrichtungspunkt wird auf die obere rechte Ecke des Popups geändert.
Right	Richtet sich am oberen Rand aus	Richtet sich am unteren Rand aus	Richtet sich am linken Rand aus	Der Zielursprung wird auf die linke obere Ecke des Zielbereichs und der Popupausrichtungspunkt auf die rechte obere Ecke des Popup-Steuerelements verlegt.
Top	Der Zielursprung wird auf die linke untere Ecke des Zielbereichs und der Popupausrichtungspunkt auf die linke obere Ecke des Popup-Steuerelements verlegt. Die Ausrichtung erfolgt im Grunde genommen nach demselben Prinzip, wie wenn Placement den Wert Bottom aufweist.	Richtet sich am unteren Rand aus	Richtet sich am linken Rand aus	Richtet sich am rechten Rand aus

Ausrichten am Bildschirmrand

Ein Popup-Steuerelement kann am Bildschirmrand ausgerichtet werden. Dazu positioniert sich das Popup-Steuerelement neu, sodass es vollständig auf dem Bildschirm angezeigt wird. Bei diesem Vorgang kann der Abstand zwischen dem Zielursprung und dem Popupausrichtungspunkt von den Werten von HorizontalOffset und VerticalOffset abweichen. Wenn Placement den Wert Absolute, Center oder Relative aufweist, richtet sich das Popup-Steuerelement selbst am Bildschirmrand aus. Angenommen, ein Popup-Steuerelement verfügt über die Eigenschaften Placement und Relative, die auf VerticalOffset bzw. „100“ festgelegt sind. Wenn der untere Bildschirmrand das Popup-Steuerelement ganz oder teilweise verdeckt, positioniert sich das Popup-Steuerelement automatisch entlang des unteren Bildschirmrands neu. Der vertikale Abstand zwischen dem Zielursprung und Popupausrichtungspunkt ist kleiner als 100. Dies wird in der folgenden Abbildung veranschaulicht.

Ändern des Popupausrichtungspunkts

Wenn Placement den Wert AbsolutePoint, RelativePoint oder MousePoint aufweist, ändert sich der Popupausrichtungspunkt, wenn das Popup auf den unteren oder rechten Bildschirmrand trifft.

Die folgende Abbildung zeigt, dass der Popupausrichtungspunkt der unteren linken Ecke des Popup-Steuerelements entspricht, wenn der untere Bildschirmrand das Popup-Steuerelement ganz oder teilweise verdeckt.

Die folgende Abbildung zeigt, dass der Popupausrichtungspunkt der oberen rechten Ecke des Popup-Steuerelements entspricht, wenn der rechte Bildschirmrand das Popup-Steuerelement verdeckt.

Wenn das Popup-Steuerelement auf den unteren und rechten Bildschirmrand trifft, entspricht der Popupausrichtungspunkt der unteren rechten Ecke des Popup-Steuerelements.

Ändern des Zielursprungs und des Popupausrichtungspunkts

Wenn Placement auf den Wert Bottom, Left, Mouse, Right oder Top festgelegt ist, werden der Zielursprung und der Popupausrichtungspunkt geändert, wenn das Steuerelement auf einen bestimmten Bildschirmrand trifft. Der Bildschirmrand, der die Neupositionierung verursacht, hängt vom Wert von PlacementMode ab.

Die folgende Abbildung zeigt, dass der Zielursprung der linken oberen Ecke des Zielbereichs und der Popupausrichtungspunkt der unteren linken Ecke des Popup-Steuerelements entspricht, wenn Placement den Wert Bottom aufweist und das Popup-Steuerelement auf den unteren Bildschirmrand trifft.

Die folgende Abbildung zeigt, dass der Zielursprung der rechten oberen Ecke des Zielbereichs und der Popupausrichtungspunkt der oberen linken Ecke des Popup-Steuerelements entspricht, wenn Placement den Wert Left aufweist und das Popup-Steuerelement auf den linken Bildschirmrand trifft.

Die folgende Abbildung zeigt, dass der Zielursprung der linken oberen Ecke des Zielbereichs und der Popupausrichtungspunkt der oberen rechten Ecke des Popup-Steuerelements entspricht, wenn Placement den Wert Right aufweist und das Popup-Steuerelement auf den rechten Bildschirmrand trifft.

Die folgende Abbildung zeigt, dass der Zielursprung der linken unteren Ecke des Zielbereichs und der Popupausrichtungspunkt der oberen linken Ecke des Popup-Steuerelements entspricht, wenn Placement den Wert Top aufweist und das Popup-Steuerelement auf den oberen Bildschirmrand trifft.

Die folgende Abbildung zeigt, dass der Zielursprung der linken oberen Ecke des Zielbereichs (Grenzen des Mauszeigers) und der Popupausrichtungspunkt der unteren linken Ecke des Popup-Steuerelements entspricht, wenn Placement den Wert Mouse aufweist und das Popup-Steuerelement auf den unteren Bildschirmrand trifft.

Anpassen der Popupplatzierung

Sie können den Zielursprung und den Popupausrichtungspunkt anpassen, indem Sie die Eigenschaft Placement auf Custom festlegen. Definieren Sie anschließend einen CustomPopupPlacementCallback-Delegaten, der eine Reihe möglicher Platzierungspunkte und primärer Achsen (in der bevorzugten Reihenfolge) für das Popup-Steuerelement zurückgibt. Der Punkt, an dem der größte Teil des Popup-Steuerelements anzeigt wird, wird ausgewählt. Die Position des Popup-Steuerelements wird automatisch angepasst, wenn das Popup-Steuerelement vom Bildschirmrand verdeckt wird. Ein Beispiel finden Sie unter Angeben einer benutzerdefinierten Popupposition.

Weitere Informationen

• Beispiel für das Platzieren eines Popups