Übersicht über Popups

Artikel
08/20/2008

Aktualisiert: November 2007

Das Popup-Steuerelement bietet eine Möglichkeit, Inhalt in einem separaten Fenster auszugeben, das in Relation zu den festgelegten Element- oder Bildschirmkoordinaten unverankert über anderen Fenstern der Anwendung angezeigt wird. In diesem Thema wird das Popup-Steuerelement vorgestellt sowie dessen Verwendung veranschaulicht.

Dieses Thema enthält folgende Abschnitte.

Was ist ein Popup?
Erstellen eines Popups
Steuerelemente, die ein Popup implementieren
Verhalten und Darstellung von Popups
Definieren der Position von Popups
Popup und visuelle Struktur
Verwandte Abschnitte

Ein Popup-Steuerelement zeigt Inhalt in einem separaten Fenster an, das in Relation zu einem Element oder zu einer Bildschirmposition unverankert über anderen Fenstern der Anwendung angezeigt wird. Wenn das Popup sichtbar ist, ist die IsOpen-Eigenschaft auf true festgelegt.

Tipp

Ein Popup wird nicht automatisch geöffnet, wenn der Mauszeiger über sein übergeordnetes Objekt bewegt wird. Wenn Sie möchten, dass ein Popup automatisch geöffnet wird, verwenden Sie die ToolTip-Klasse oder die ToolTipService-Klasse. Weitere Informationen finden Sie unter Übersicht über die QuickInfo.

Erstellen eines Popups

Im folgenden Beispiel wird veranschaulicht, wie ein Popup-Steuerelement definiert wird, das das untergeordnete Element eines Button-Steuerelements ist. Da ein Button-Steuerelement nur über ein untergeordnetes Element verfügen kann, wird in diesem Beispiel der Text für das Button-Steuerelement und das Popup-Steuerelement in einem StackPanel abgelegt. Der Inhalt des Popup-Steuerelements wird in einem TextBlock-Steuerelement angezeigt, das den entsprechenden Text in einem separaten Fenster ausgibt, das unverankert über dem Anwendungsfenster in der Nähe des verknüpften Button-Steuerelements angezeigt wird.

<Button HorizontalAlignment="Left" Click="DisplayPopup" 
        Width="150" Margin="20,10,0,0">
  <StackPanel>
    <TextBlock>Display Your Popup Text</TextBlock>
    <Popup Name="myPopup">
      <TextBlock Name="myPopupText" 
                 Background="LightBlue" 
                 Foreground="Blue">
        Popup Text
      </TextBlock>
    </Popup>
  </StackPanel>
</Button>

<Button Name="ButtonForPopup" HorizontalAlignment="Left" 
        Click="CreatePopup"  
        Width="150" Margin="20,10,0,0">
  <StackPanel Name="aStackPanel">
    <TextBlock>Create Popup</TextBlock>
  </StackPanel>
</Button>

Sie können Popup-Steuerelemente in andere Steuerelemente einbauen. Die folgenden Steuerelemente implementieren das Popup-Steuerelement für bestimmte Verwendungsmöglichkeiten:

ToolTip. Wenn Sie für ein Element eine QuickInfo erstellen möchten, verwenden Sie die ToolTip-Klasse und die ToolTipService-Klasse. Weitere Informationen finden Sie unter Übersicht über die QuickInfo.
ContextMenu. Wenn Sie für ein Element ein Kontextmenü erstellen möchten, verwenden Sie das ContextMenu-Steuerelement. Weitere Informationen finden Sie unter Übersicht über ContextMenu.
ComboBox. Wenn Sie ein Auswahlsteuerelement mit einem Dropdown-Listenfeld erstellen möchten, das angezeigt oder ausgeblendet werden kann, verwenden Sie das ComboBox-Steuerelement.
Expander. Wenn Sie ein Steuerelement erstellen möchten, das einen Header mit einem reduzierbaren Bereich anzeigt, in dem Inhalt ausgegeben wird, verwenden Sie das Expander-Steuerelement. Weitere Informationen finden Sie unter Übersicht über Expander-Steuerelemente.

Verhalten und Darstellung von Popups

Das Popup-Steuerelement stellt Funktionalität bereit, mit der Sie das Verhalten und die Darstellung von Popups anpassen können. So können Sie beispielsweise das Verhalten beim Öffnen und Schließen, die Animation, Durchlässigkeit und Bitmapeffekte sowie die Größe und Position für ein Popup festlegen.

Verhalten beim Öffnen und Schließen

Ein Popup-Steuerelement zeigt seinen Inhalt an, wenn die IsOpen-Eigenschaft auf true festgelegt ist. Standardmäßig bleibt ein Popup geöffnet, bis die IsOpen-Eigenschaft auf false festgelegt wird. Sie können jedoch das Standardverhalten ändern, indem Sie die StaysOpen-Eigenschaft auf false festlegen. Wenn Sie diese Eigenschaft auf false festlegen, verfügt das Popup-Inhaltsfenster über eine Mauszeigererkennung. Sobald ein Mausereignis außerhalb des Popup-Fensters auftritt, verliert das Popup die Mauszeigererkennung, und das Fenster wird geschlossen.

Beim Öffnen oder Schließen eines Popup-Inhaltsfensters wird das Opened-Ereignis bzw. das Closed-Ereignis ausgelöst.

Animation

Das Popup-Steuerelement bietet eine integrierte Unterstützung für Animationen, die typischerweise mit Verhalten wie Einblenden und Hereingleiten verknüpft sind. Sie können diese Animationen aktivieren, indem Sie die PopupAnimation-Eigenschaft auf einen PopupAnimation-Enumerationswert festlegen. Damit Popup-Animationen ordnungsgemäß funktionieren, müssen Sie die AllowsTransparency-Eigenschaft auf true festlegen.

Sie können außerdem Animationen wie Storyboard für das Popup-Steuerelement übernehmen. Ein Beispiel finden Sie unter Beispiel für ein animiertes Popup.

Durchlässigkeit und Bitmapeffekte

Die Opacity-Eigenschaft eines Popup-Steuerelements hat keine Auswirkungen auf seinen Inhalt. Standardmäßig ist das Popup-Inhaltsfenster nicht transparent. Um ein transparentes Popup zu erstellen, legen Sie die AllowsTransparency-Eigenschaft auf true fest.

Der Inhalt eines Popup-Steuerelements erbt keine Bitmapeffekte, z. B. DropShadowBitmapEffect, die Sie direkt im Popup-Steuerelement oder in einem beliebigen anderen Element im übergeordneten Fenster festgelegt haben. Um Bitmapeffekte im Popup-Inhalt anzuzeigen, müssen Sie die Bitmapeffekte direkt in dessen Inhalt festlegen. Wenn z. B. das untergeordnete Steuerelement eines Popup-Steuerelements ein StackPanel ist, legen Sie den Bitmapeffekt im StackPanel fest.

Größe von Popups

Standardmäßig wird die Größe eines Popup-Steuerelements automatisch an dessen Inhalt angepasst. Bei einer automatischen Größenanpassung kann es vorkommen, dass einige Bitmapeffekte ausgeblendet werden, weil die für das Popup definierte Standardgröße des Bildschirmbereichs nicht genügend Platz zur Anzeige der Bitmapeffekte aufweist.

Der Popup-Inhalt kann auch verdeckt werden, wenn Sie ein RenderTransform auf den Inhalt festgelegt haben. In diesem Szenario wird ein Teil des Inhalts ausgeblendet, wenn der Inhalt des transformierten Popup-Steuerelements über den Bereich des ursprünglichen Popup-Steuerelements hinausreicht. Wenn ein Bitmapeffekt oder eine Transformation mehr Platz benötigt, können Sie einen Rand um den Popup-Inhalt definieren, um für das Steuerelement einen größeren Bereich bereitzustellen. Weitere Informationen und ein Beispiel finden Sie unter Beispiel für ein animiertes Popup.

Definieren der Position von Popups

Sie können ein Popup durch Festlegen der folgenden Eigenschaften positionieren: PlacementTarget, PlacementRectangle, Placement, HorizontalOffset und VerticalOffsetProperty. Weitere Informationen finden Sie unter Verhalten beim Platzieren von Popups. Wenn ein Popup auf dem Bildschirm angezeigt wird, wird es bei einer Neupositionierung des übergeordneten Elements nicht neu positioniert.

Anpassen der Platzierung von Popups

Sie können die Platzierung eines Popup-Steuerelements anpassen, indem Sie eine Reihe von Koordinaten festlegen, die in Relation zum PlacementTarget angeben, wo das Popup angezeigt werden soll.

Um die Platzierung anzupassen, legen Sie die Placement-Eigenschaft auf Custom fest. 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 des Popup-Steuerelements anzeigt, wird automatisch ausgewählt. Ein Beispiel finden Sie unter Gewusst wie: Angeben einer benutzerdefinierten Popup-Position.

Ein Popup-Steuerelement verfügt über keine eigene visuelle Struktur, sondern gibt stattdessen eine Größe von 0 (null) zurück, wenn die MeasureOverride-Methode für das Popup aufgerufen wird. Wenn Sie jedoch die IsOpen-Eigenschaft des Popup-Steuerelements auf true festlegen, wird ein neues Fenster mit einer eigenen visuellen Struktur erstellt. Das neue Fenster enthält den Child-Inhalt von Popup. Die Breite und Höhe des neuen Fensters darf 75 Prozent der Bildschirmbreite oder -höhe nicht überschreiten.

Das Popup-Steuerelement führt einen Verweis auf seinen Child-Inhalt als logisches untergeordnetes Element. Beim Erstellen des neuen Fensters wird der Popup-Inhalt ein visuelles untergeordnetes Fensterelement und bleibt weiterhin das logische untergeordnete Element des Popup-Steuerelements. Umgekehrt bleibt Popup das logische übergeordnete Element seines Child-Inhalts.