Freigeben über

Popup

Das Popup Steuerelement bietet eine Möglichkeit zum Anzeigen von Inhalten in einem separaten Fenster, das relativ zu einem bestimmten Element oder einer Bildschirmkoordinate über dem aktuellen Anwendungsfenster schwebt.

Die folgende Abbildung zeigt ein Popup Steuerelement, das in Bezug auf ein Button übergeordnetes Steuerelement positioniert ist:

Ein Popup-Steuerelement, das relativ zu einem Schaltflächensteuerelement positioniert ist.

In der folgenden Tabelle sind übliche Aufgaben für das Arbeiten mit dem Popupsteuerelement aufgeführt.

Title Description
Animieren eines Popups Erfahren Sie, wie Sie ein Popup mithilfe von Storyboards und Animationen animieren.
Popup-Platzierungsverhalten Erfahren Sie mehr über die verschiedenen Platzierungsmodi und wie Sie ein Popup relativ zu Elementen oder Bildschirmkoordinaten positionieren.
Angeben einer benutzerdefinierten Popupposition Erfahren Sie, wie Sie benutzerdefinierte Platzierungslogik für präzise Popuppositionierung definieren.

Was ist ein Popup?

Ein Popup Steuerelement zeigt Inhalt in einem separaten Fenster relativ zu einem Element oder Punkt auf dem Bildschirm an. Wenn Popup sichtbar ist, wird die Eigenschaft von IsOpen auf true gesetzt.

Hinweis

A Popup wird nicht automatisch geöffnet, wenn der Mauszeiger über das übergeordnete Objekt bewegt wird. Wenn ein Popup automatisch geöffnet werden soll, verwenden Sie die ToolTip oder ToolTipService Klasse. Weitere Informationen finden Sie unter QuickInfo.

Erstellen eines Popups

Im folgenden Beispiel wird ein Popup Steuerelement als untergeordnetes Element eines ToggleButton Steuerelements definiert. Da ein ToggleButton nur ein untergeordnetes Element haben kann, platziert dieses Beispiel den Text für die Steuerelemente ToggleButton und Popup in einem StackPanel. Die Eigenschaft des Popups IsOpen verwendet die Datenbindung, um mit der Eigenschaft der Schaltfläche IsChecked zu synchronisieren. Wenn Sie die Schaltfläche auswählen, wird das Popup automatisch geöffnet oder geschlossen. Der Inhalt wird in einem separaten Fenster angezeigt, das über das Anwendungsfenster schwebt, nahe der Schaltfläche.

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

Steuerelemente, die ein Popup implementieren

Sie können Popup Steuerelemente in andere Steuerelemente integrieren. Die folgenden Steuerelemente implementieren das Popup Steuerelement für bestimmte Verwendungen:

  • ToolTip. Um ein Tooltip für ein Element zu erstellen, verwenden Sie die Klassen ToolTip und ToolTipService. Weitere Informationen finden Sie unter QuickInfo.

  • ContextMenu. Verwenden Sie das ContextMenu Steuerelement, um ein Kontextmenü für ein Element zu erstellen. Weitere Informationen finden Sie unter ContextMenu.

  • ComboBox. Verwenden Sie das ComboBox Steuerelement, um ein Auswahlsteuerelement mit einem Dropdown-Listenfeld zu erstellen, das Sie ein- oder ausblenden können.

  • Expander. Um ein Steuerelement zu erstellen, das eine Kopfzeile mit einem reduzierbaren Bereich anzeigt, der Inhalte anzeigt, verwenden Sie das Expander Steuerelement. Weitere Informationen finden Sie unter Expander.

Stile und Vorlagen

Das Popup Steuerelement stellt XAML-Formatierungseigenschaften bereit, die Sie zum Anpassen der Darstellung verwenden können. Das Steuerelement definiert keine Standardvorlage mit Vorlagenteilen oder visuellen Zuständen, aber Sie können das Verhalten anpassen. Weitere Informationen finden Sie im Abschnitt " Popupverhalten und -darstellung ".

Inhaltseigenschaft

Dieses Steuerelement verwendet die Child Eigenschaft als Inhaltseigenschaft. Die Child Eigenschaft stellt das einzelne untergeordnete Element dar, das im Popupfenster angezeigt wird.

Bestandteile

Dieses Steuerelement definiert keine Vorlagenteile.

Visuelle Zustände

Dieses Steuerelement definiert keine visuellen Zustände.

Das Popup Steuerelement bietet Funktionen, mit denen Sie das Verhalten und die Darstellung anpassen können. Sie können z. B. das Öffnen- und Schließverhalten, Animationen, Deckkraft und Bitmap-Effekte sowie die Popup Größe und Position definieren.

Verhalten beim Öffnen und Schließen

Ein Popup Steuerelement zeigt seinen Inhalt an, wenn die IsOpen Eigenschaft auf true gesetzt ist. Popup bleibt standardmäßig geöffnet, bis die IsOpen-Eigenschaft auf false gesetzt wird. Sie können jedoch das Standardverhalten ändern, indem Sie die StaysOpen-Eigenschaft auf false setzen. Wenn Sie diese Eigenschaft auf false setzen, hat das Popup-Inhaltsfenster die Maussteuerung. Die Popup verliert die Mausaufnahme, und schließt das Fenster, wenn ein Mausereignis außerhalb des Popup Fensters auftritt.

Die Opened Ereignisse Closed werden ausgelöst, wenn das Popup Inhaltsfenster geöffnet oder geschlossen wird.

Zeichentrickfilm

Das Popup-Steuerelement verfügt über eine eingebaute Unterstützung für die Animationen, die in der Regel mit Verhaltensweisen wie Einblendeffekten und Hereinschieben verknüpft sind. Sie können diese Animationen aktivieren, indem Sie die PopupAnimation Eigenschaft auf einen PopupAnimation Enumerationswert festlegen. Damit die Popup Animationen ordnungsgemäß funktionieren, müssen Sie die AllowsTransparency Eigenschaft auf true.

Sie können auch Animationen wie Storyboard auf das Popup Steuerelement anwenden.

Deckkraft und Bitmapeffekte

Die Opacity Eigenschaft für ein Popup Steuerelement hat keine Auswirkungen auf den Inhalt. Standardmäßig ist das Popup Inhaltsfenster undurchsichtig. Legen Sie, um eine transparente Popup zu erstellen, die AllowsTransparency-Eigenschaft auf true fest.

Der Inhalt eines Popup-Elements erbt keine Bitmapeffekte wie DropShadowBitmapEffect, die Sie direkt auf das Popup-Steuerelement oder auf ein anderes Element im übergeordneten Fenster anwenden. Damit Bitmapeffekte auf dem Inhalt eines PopupBilds angezeigt werden, müssen Sie den Bitmapeffekt direkt auf den Inhalt festlegen. Wenn beispielsweise das untergeordnete Element eines Popup ein StackPanel ist, legen Sie den Bitmapeffekt auf das StackPanel.

Standardmäßig passt sich eine Popup automatisch an ihren Inhalt an. Wenn die automatische Größenanpassung auftritt, werden möglicherweise einige Bitmapeffekte ausgeblendet, da die Standardgröße des für den Popup Inhalt definierten Bildschirmbereichs nicht genügend Platz für die anzuzeigenden Bitmapeffekte bietet.

Popup Inhalte können auch verdeckt werden, wenn Sie ein RenderTransform auf den Inhalt setzen. In diesem Szenario werden einige Inhalte möglicherweise ausgeblendet, wenn der Inhalt des transformierten Popup Inhalts über den Bereich des Ursprünglichen Popuphinausgeht. Wenn ein Bitmapeffekt oder eine Transformation mehr Platz erfordert, können Sie einen Rand um den Popup Inhalt definieren, um mehr Bereich für das Steuerelement bereitzustellen.

Definieren der Popupposition

Sie können ein Popup positionieren, indem Sie die PlacementTarget, PlacementRectangle, Placement, HorizontalOffset und VerticalOffsetProperty Eigenschaften festlegen. Weitere Informationen finden Sie unter Popup-Platzierungsverhalten. Wenn Sie ein Popup auf dem Bildschirm anzeigen, bewegt es sich nicht, wenn sein übergeordnetes Element neu positioniert wird.

Anpassen der Popupplatzierung

Sie können die Platzierung eines Popup Steuerelements anpassen, indem Sie eine Reihe von Koordinaten angeben, die relativ zu PlacementTarget sind, wo Popup erscheinen soll.

Um die Platzierung anzupassen, legen Sie die Placement Eigenschaft auf Custom. Definieren Sie dann einen CustomPopupPlacementCallback Delegate, der eine Menge möglicher Platzierungspunkte und Primärachsen (in der Reihenfolge der Präferenz) für die Popup zurückgibt. Der Punkt, der den größten Teil des Bereichs Popup anzeigt, wird automatisch ausgewählt. Ein Beispiel finden Sie unter Angeben einer benutzerdefinierten Popupposition.

Ein Popup Steuerelement verfügt nicht über einen eigenen visuellen Baum. Sie gibt eine Größe von 0 (Null) zurück, wenn Sie die MeasureOverride Methode aufrufen. Wenn Sie die IsOpen Eigenschaft jedoch auf true festlegen, erstellt das Steuerelement ein neues Fenster mit einem eigenen visuellen Baum. Das neue Fenster enthält den Child Inhalt der Popup. Die Breite und Höhe des neuen Fensters darf nicht größer als 75 Prozent der Breite oder Höhe des Bildschirms sein.

Das Popup Steuerelement verwaltet einen Verweis auf den Child Inhalt als logisches untergeordnetes Element. Wenn das Steuerelement das neue Fenster erstellt, wird der Inhalt von Popup zu einem visuellen Kindelement des Fensters und bleibt das logische Kindelement von Popup. Umgekehrt Popup bleibt das logische übergeordnete Element des Child Inhalts.

Siehe auch

  • Last updated on