Vue d'ensemble de Popup

Article
08/10/2011

Le contrôle Popup permet d'afficher le contenu dans une fenêtre séparée qui flotte au-dessus de la fenêtre d'application actuelle par rapport à un élément désigné ou une coordonnée d'écran. Cette rubrique présente le contrôle Popup et fournit des informations quant à son utilisation.

Cette rubrique comprend les sections suivantes.

Qu'est-ce qu'un Popup ?
Création d'un Popup
Contrôles qui implémentent un Popup
Comportement et apparence de Popup
Définition de la position d'un Popup
Popup et arborescence d'éléments visuels
Rubriques connexes

Un contrôle Popup affiche un contenu dans une fenêtre séparée par rapport à un élément ou un point à l'écran. Lorsque le contrôle Popup est visible, la propriété IsOpen a la valeur true.

Remarque
Un contrôle Popup ne s'ouvre pas automatiquement quand le pointeur de la souris se déplace au-dessus de son objet parent.Si vous voulez que le contrôle Popup s'ouvre automatiquement, utilisez la classe ToolTip ou ToolTipService.Pour plus d'informations, consultez Vue d'ensemble de l'info-bulle.

L'exemple suivant montre comment définir un contrôle Popup, qui est un élément enfant d'un contrôle Button. Dans la mesure où un contrôle Button peut avoir un seul élément enfant, cet exemple place le texte pour les contrôles Button et Popup dans un StackPanel. Le contenu du contrôle Popup apparaît dans un contrôle TextBlock, qui affiche son texte dans une fenêtre séparée qui flotte au-dessus de la fenêtre d'application près du contrôle associé Buttonl.

<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>

Vous pouvez générer des contrôles Popup dans d'autres contrôles. Les contrôles suivants implémentent le contrôle Popup pour des utilisations spécifiques :

ToolTip. Si vous souhaitez créer une info-bulle pour un élément, utilisez les classes ToolTip et ToolTipService. Pour plus d'informations, consultez Vue d'ensemble de l'info-bulle.
ContextMenu. Si vous souhaitez créer un menu contextuel pour un élément, utilisez le contrôle ContextMenu. Pour plus d'informations, consultez Vue d'ensemble de ContextMenu.
ComboBox. Si vous souhaitez créer un contrôle de sélection qui possède une zone de liste déroulante pouvant être affichée ou masquée, utilisez le contrôle ComboBox.
Expander. Si vous souhaitez créer un contrôle qui affiche un en-tête avec une zone réductible qui affiche du contenu, utilisez le contrôle Expander. Pour plus d'informations, consultez Vue d'ensemble de l'expanseur.

Le contrôle Popup fournit des fonctionnalités qui vous permettent de personnaliser son comportement et son apparence. Par exemple, vous pouvez définir un comportement d'ouverture ou de fermeture, une animation, l'opacité et les effets bitmap, ainsi que la taille et la position du Popup.

Comportement d'ouverture et de fermeture

Un contrôle Popup affiche son contenu quand la propriété IsOpen a la valeur true. Par défaut, le contrôle Popup reste ouvert jusqu'à ce que la propriété IsOpen ait la valeur false. Vous pouvez, cependant, modifier ce comportement par défaut en attribuant à la propriété StaysOpen la valeur false.. Lorsque vous affectez à cette propriété la valeur false, la fenêtre de contenu de Popup a la capture de souris. Le contrôle Popup perd la capture de la souris et la fenêtre se ferme quand un événement souris se produit en dehors de la fenêtre Popup.

Les événements Opened et Closed sont générés quand la fenêtre de contenu de Popup est ouvert ou fermée.

Animation

Le contrôle Popup assure la prise en charge intégrée des animations qui sont généralement associées à des comportements comme un effet fondu et un effet inséré. Vous pouvez activer ces animations en affectant à la propriété PopupAnimation une valeur d'énumération PopupAnimation. Pour que les animations Popup fonctionnent correctement, vous devez attribuer à la propriété AllowsTransparency la valeur true.

Vous pouvez également appliquer des animations comme Storyboard au contrôle Popup.

Opacité et effets bitmap

La définition de la propriété Opacity n'a aucun effet sur le contenu du contrôle Popup. Par défaut, la fenêtre de contenu Popup est opaque. Pour créer un transparent Popup, affectez à la propriété AllowsTransparency la valeur true.

Le contenu d'un contrôle Popup n'hérite pas les effets bitmap, comme DropShadowBitmapEffect, que vous définissez directement sur le contrôle Popup ou tout autre élément dans la fenêtre parent. Pour que les effets bitmap apparaissent dans le contenu d'un Popup, vous devez définir ces effets directement dans son contenu. Par exemple, si l'enfant d'un Popup est un StackPanel, définissez l'effet bitmap sur StackPanel.

Par défaut, la taille d'un contrôle Popup est automatiquement ajustée à la taille de celui-ci. Lorsque l'ajustement automatique de la taille se produit, certains effets bitmap peuvent être masqués car la taille par défaut de la zone d'écran qui est définie pour le contenu de Popup ne fournit pas un espace suffisant pour l'affichage des effets bitmap.

Le contenu du contrôle Popup peut être obscurci lorsque vous définissez RenderTransform sur le contenu. Dans ce scénario, une partie du contenu peut être masquée si le contenu du Popup transformé s'étend au-delà de la zone du Popup d'origine. Si un effet bitmap ou une transformation requiert de plus d'espace, vous pouvez définir une marge autour du contenu de Popup afin de fournir une plus grande zone pour le contrôle.

Vous pouvez positionner un Popup en définissant les propriétés PlacementTarget, PlacementRectangle, Placement, HorizontalOffset et VerticalOffsetProperty. Pour plus d'informations, consultez Comportement de positionnement de Popup. Lorsque Popup est affiché à l'écran, il ne se repositionne pas si son parent est repositionné.

Vous pouvez personnaliser le placement d'un contrôle Popup en spécifiant un jeu de coordonnées qui sont relatives à la PlacementTarget où vous voulez que le Popup apparaisse.

Pour personnaliser l'emplacement, attribuez à la propriété Placement la valeur Custom. Définissez ensuite un délégué CustomPopupPlacementCallback qui retourne un ensemble de points de positionnement et d'axes primaires possibles (dans l'ordre de préférence) pour le Popup. Le point qui montre la plus grande partie du Popup est automatiquement sélectionné. Pour obtenir un exemple, consultez Comment : spécifier une position de menu contextuel personnalisée.

Un contrôle Popup ne doit pas nécessairement avoir sa propre arborescence d'éléments visuels ; il retourne plutôt une taille 0 (zéro) quand la méthode MeasureOverride pour Popup est appelée. Cependant, quand vous attribuez à la propriété IsOpen du Popup la valeur true, une nouvelle fenêtre avec sa propre arborescence d'éléments visuels est créée. La nouvelle fenêtre contient le contenu de Child du Popup. La largeur et la hauteur ne peuvent pas dépasser 75 % de la largeur ou de la hauteur de l'écran.

Le contrôle Popup conserve une référence au contenu du Child en tant qu'enfant logique. Quand la nouvelle fenêtre est créée, le contenu du Popup devient un enfant visuel de la fenêtre et reste l'enfant logique de Popup. En revanche, Popup reste le parent logique du contenu du Child.