Verhalten beim Platzieren von Popups
Ein Popup-Steuerelement zeigt Inhalt in einem separaten Fenster an, das vor einer Anwendung eingeblendet wird. Sie können die Position eines Popup relativ zu einem Steuerelement, der Maus oder dem Bildschirm angeben, indem Sie die Eigenschaften PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetund VerticalOffset verwenden. Diese Eigenschaften spielen zusammen und geben Ihnen die Flexibilität, die Position des Popup-Steuerelements selbst festzulegen.
Anmerkung
Die Klassen ToolTip und ContextMenu definieren auch diese fünf Eigenschaften und verhalten sich ähnlich.
Positionierung des 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
In diesem einfachen Beispiel wird veranschaulicht, wie sie die eigenschaften PlacementTarget und Placement festlegen, aber mithilfe der eigenschaften PlacementRectangle, HorizontalOffsetund VerticalOffset haben Sie noch mehr Kontrolle darüber, wo die Popup positioniert ist.
[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.
Begriffsdefinitionen: Die Anatomie 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
Zielbereich
Zielherkunft
Der Popupausrichtungspunkt
Mit diesen Begriffen können Sie unkompliziert auf verschiedene Aspekte des Popup-Objekts und des dazugehörigen Steuerelements verweisen.
Das Zielobjekt
Das Zielobjekt ist das Element, dem die Popup zugeordnet ist. Wenn die PlacementTarget-Eigenschaft festgelegt ist, gibt sie das Zielobjekt an. Wenn PlacementTarget nicht festgelegt ist und Popup einen Elternteil hat, ist der Elternteil das Zielobjekt. Wenn es keinen PlacementTarget-Wert und kein übergeordnetes Objekt gibt, gibt es kein Zielobjekt, und das Popup wird relativ 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 für Placement ist PlacementMode.Bottom, sodass die Popup unterhalb der Canvasangezeigt 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 die Popup relativ zum Canvaspositioniert 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, dass die Popup relativ zum Ellipsepositioniert ist.
Anmerkung
Der Standardwert von Placement für ToolTipist Mouse. Für ContextMenu entspricht der Standardwert von Placement dem Wert MousePoint. Diese Werte werden später unter "Funktionsweise der Eigenschaften" erläutert.
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 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 Popupenthalten. 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. Daher wird das erste Popup unterhalb von PlacementRectangle positioniert, und das zweite Popup wird unterhalb von Canvaspositioniert. 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 die PlacementRectangle kein sichtbares Element in der Anwendung erstellt; Im Beispiel wird ein Rectangle erstellt, der die PlacementRectangledarstellt.
<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. Sie können die Eigenschaften HorizontalOffset und VerticalOffset verwenden, um das Popup vom Zielbereich zu verschieben. 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.
Wie die Eigenschaften zusammenarbeiten
Die Werte von PlacementTarget, PlacementRectangle und Placement müssen zusammen betrachtet werden, um den richtigen Zielbereich, Zielursprung und Popupausrichtungspunkt zu ermitteln. Wenn beispielsweise der Wert von PlacementMouseist, gibt es kein Zielobjekt, das PlacementRectangle wird ignoriert, und der Zielbereich ist die 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 | Zielbereich | Zielquelle | 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 untere linke 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 untere linke 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 den Rand des Bildschirms trifft
Aus Sicherheitsgründen kann ein Popup-Steuerelement nicht durch einen Bildschirmrand verdeckt werden. Einer der folgenden drei Dinge geschieht, wenn der Popup auf einen Bildschirmrand trifft:
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. In der Tat ist dies identisch mit dem, wenn PlacementBottomist. | 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. Die folgende Abbildung zeigt dies.
Ändern des Popupausrichtungspunkts
Wenn PlacementAbsolutePoint, RelativePointoder MousePointist, ändert sich der Ausrichtungspunkt des Popups, 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 bewirkt, dass sich die Position ändert, hängt vom PlacementMode Wert 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 Popup-Position.
Siehe auch
.NET Desktop feedback