Comportement de positionnement de Popup

Un contrôle Popup affiche le contenu dans une fenêtre distincte qui flotte au-dessus d’une application. Vous pouvez spécifier la position d’un Popup par rapport à un contrôle, la souris ou l’écran en utilisant les propriétés PlacementTarget, Placement, PlacementRectangle, HorizontalOffset et VerticalOffset. Utilisées conjointement, ces propriétés vous donnent toute la souplesse nécessaire pour spécifier la position du Popup.

Positionnement de la fenêtre contextuelle

Le positionnement d’un Popup peut être relatif à un UIElement ou à l’écran entier. L’exemple suivant crée quatre contrôles Popup relatifs à un UIElement, dans le cas présent, une image. Tous les contrôles PlacementTarget ont la propriété Popup définie avec la valeur image1, mais chaque Popup a une valeur différente pour la propriété de positionnement.

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

L’illustration suivante montre l’image et les contrôles Popup

Cet exemple simple montre comment définir les propriétés PlacementTarget et Placement, mais en utilisant les propriétés PlacementRectangle, HorizontalOffsetet VerticalOffset, vous avez encore plus de contrôle sur l’emplacement où se trouve le Popup.

! [REMARQUE] Selon vos paramètres Windows liés à la remise, la fenêtre contextuelle peut être alignée à gauche ou à droite lorsqu’elle s’affiche en haut ou en bas. L’image précédente illustre l’alignement de la main droite, qui place la fenêtre contextuelle à gauche.

Définitions des termes : anatomie d’une fenêtre contextuelle

Les termes suivants sont utiles pour comprendre comment les propriétés PlacementTarget, Placement, PlacementRectangle, HorizontalOffsetet VerticalOffset sont liées les unes aux autres et au Popup :

• Objet cible

• Zone cible

• Origine de la cible

• Point d’alignement de la fenêtre contextuelle

Ces termes offrent un moyen pratique de se référer aux différents aspects du Popup et du contrôle auquel il est associé.

Objet cible

L’objet cible est l’élément auquel le Popup est associé. Si la propriété PlacementTarget est définie, elle spécifie l’objet cible. Si PlacementTarget n’est pas défini et que le Popup a un parent, le parent est l’objet cible. S’il n’y a aucune valeur PlacementTarget et aucun parent, il n’y a aucun objet cible et le Popup est positionné par rapport à l’écran.

L'exemple suivant crée un Popup qui est l’enfant d’un Canvas. L’exemple ne définit pas la propriété PlacementTarget sur le Popup. La valeur par défaut de Placement est PlacementMode.Bottom, donc le Popup apparaît sous le Canvas.

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

L’illustration suivante montre que le Popup est positionné par rapport au Canvas.

L’exemple suivant crée un Popup qui est l’enfant d’un Canvas, mais cette fois, la PlacementTarget est définie sur ellipse1, de sorte que la fenêtre contextuelle apparaisse sous Ellipse.

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

L’illustration suivante montre que le Popup est positionné par rapport au Ellipse.

Zone cible

La zone cible correspond à la zone de l’écran à laquelle le Popup est lié. Dans les exemples précédents, le Popup est aligné sur les limites de l’objet cible, mais dans certains cas, le Popup est aligné sur d’autres limites, même si le Popup a un objet cible. Si la propriété PlacementRectangle est définie, la zone cible est différente des limites de l’objet cible.

L’exemple suivant crée deux objets Canvas, chacun contenant un Rectangle et un Popup. Dans les deux cas, l’objet cible pour le Popup est le Canvas. Le Popup du premier Canvas a le PlacementRectangle défini, avec ses propriétés X, Y, Width et Height définies respectivement avec les valeurs 50, 50, 50 et 100. Le Popup du second Canvas n’a pas le PlacementRectangle défini. En conséquence, le premier Popup est positionné sous le PlacementRectangle et le second Popup est positionné sous le Canvas. Chaque Canvas contient également un Rectangle qui a les mêmes limites que le PlacementRectangle du premier Popup. Notez que le PlacementRectangle ne crée pas d’élément visible dans l’application ; l’exemple crée un Rectangle pour représenter le PlacementRectangle.

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

L’illustration suivante montre le résultat de l’exemple précédent.

Origine de la cible et point d’alignement de la fenêtre contextuelle

L’origine de la cible et le point d’alignement de la fenêtre contextuelle sont des points de référence sur la zone cible et la fenêtre contextuelle respectivement, qui sont utilisés pour le positionnement. Vous pouvez utiliser les propriétés HorizontalOffset et VerticalOffset pour décaler la fenêtre contextuelle de la zone cible. Les HorizontalOffset et VerticalOffset sont relatifs à l’origine de la cible et au point d’alignement de la fenêtre contextuelle. La valeur de la propriété Placement détermine où se trouvent l’origine de la cible et le point d’alignement de la fenêtre contextuelle.

L’exemple suivant crée un Popup et définit les propriétés HorizontalOffset et VerticalOffset avec la valeur 20. La propriété Placement est définie avec Bottom (la valeur par défaut), donc l’origine de la cible est l’angle inférieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est l’angle supérieur gauche du Popup.

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

L’illustration suivante montre le résultat de l’exemple précédent.

Comment les propriétés fonctionnent ensemble

Les valeurs de PlacementTarget, PlacementRectangleet Placement doivent être considérées ensemble pour déterminer la zone cible, l’origine de la cible et le point d’alignement de la fenêtre contextuelle appropriés. Par exemple, si la valeur de Placement est Mouse, il n’y a aucun objet cible, le PlacementRectangle est ignoré et la zone cible est la limite du pointeur de la souris. En revanche, si Placement est Bottom, le PlacementTarget ou le parent détermine l’objet cible et le PlacementRectangle détermine la zone cible.

Le tableau suivant décrit l’objet cible, la zone cible, l’origine de la cible et le point d’alignement de la fenêtre contextuelle, et indique si PlacementTarget et PlacementRectangle sont utilisés pour chaque valeur d’énumération PlacementMode.

Les illustrations suivantes montrent le Popup, la zone cible, l’origine de la cible et le point d’alignement de la fenêtre contextuelle pour chaque valeur PlacementMode. Dans chaque figure, la zone cible est jaune et la Popup est bleue.

Lorsque la fenêtre contextuelle est en contact avec le bord de l’écran

Pour des raisons de sécurité, un Popup ne peut pas être masqué par le bord d’un écran. L’un des trois événements suivants se produit lorsque le Popup rencontre le bord d’un écran :

• La fenêtre contextuelle se réaligne le long du bord de l’écran qui masquerait le Popup.

• La fenêtre contextuelle utilise un point d’alignement différent.

• La fenêtre contextuelle utilise une origine de cible et un point d’alignement différents.

Ces options sont décrites plus loin dans cette section.

Le comportement du Popup lorsqu’il rencontre un bord d’écran dépend de la valeur de la propriété Placement et du bord d’écran que la fenêtre contextuelle rencontre. Le tableau suivant résume le comportement lorsque le Popup rencontre un bord d’écran pour chaque valeur PlacementMode.

Alignement sur le bord de l’écran

Un Popup peut s’aligner sur le bord de l’écran en se repositionnant afin que le Popup soit visible à l’écran en entier. Lorsque cela se produit, la distance entre l’origine de la cible et le point d’alignement de la fenêtre contextuelle peut être différente des valeurs de HorizontalOffset et VerticalOffset. Quand Placement est Absolute, Centerou Relative, le Popup s’aligne sur chaque bord d’écran. Par exemple, supposons qu’un Popup a Placement défini avec Relative et VerticalOffset défini avec la valeur 100. Si le bord inférieur de l’écran masque tout ou partie du Popup, le Popup se repositionne le long du bord inférieur de l’écran, et la distance verticale entre l’origine de la cible et le point d’alignement de la fenêtre contextuelle est inférieure à 100. L’illustration suivante démontre ce comportement.

Modification du point d’alignement de la fenêtre contextuelle

Si Placement est AbsolutePoint, RelativePointou MousePoint, le point d’alignement de la fenêtre contextuelle change lorsque la fenêtre contextuelle rencontre le bord inférieur ou droit de l’écran.

L’illustration suivante montre que lorsque le bord inférieur de l’écran masque tout ou partie du Popup, le point d’alignement de la fenêtre contextuelle est l’angle inférieur gauche du Popup.

L’illustration suivante montre que quand le Popup est masqué par le bord droit de l’écran, le point d’alignement de la fenêtre contextuelle est l’angle supérieur droit du Popup.

Si le Popup rencontre les bords inférieur et droit de l’écran, le point d’alignement de la fenêtre contextuelle est l’angle inférieur droit du Popup.

Modification de l’origine de la cible et du point d’alignement de la fenêtre contextuelle

Lorsque Placement est Bottom, Left, Mouse, Rightou Top, l’origine de la cible et le point d’alignement de la fenêtre contextuelle changent si un bord d’écran spécifique est rencontré. Le bord d’écran à l’origine du changement de position dépend de la valeur PlacementMode.

L’illustration suivante montre que quand Placement est Bottom et que le Popup rencontre le bord inférieur de l’écran, l’origine de la cible est l’angle supérieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est l’angle inférieur gauche du Popup.

L’illustration suivante montre que quand Placement est Left et que le Popup rencontre le bord gauche de l’écran, l’origine de la cible est l’angle supérieur droit de la zone cible et le point d’alignement de la fenêtre contextuelle est l’angle supérieur gauche du Popup.

L’illustration suivante montre que quand Placement est Right et que le Popup rencontre le bord droit de l’écran, l’origine de la cible est l’angle supérieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est l’angle supérieur droit du Popup.

L’illustration suivante montre que quand Placement est Top et que le Popup rencontre le bord supérieur de l’écran, l’origine de la cible est l’angle inférieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est l’angle supérieur gauche du Popup.

L’illustration suivante montre que quand Placement est Mouse et que le Popup rencontre le bord inférieur de l’écran, l’origine de la cible est l’angle supérieur gauche de la zone cible (les limites du pointeur de la souris) et le point d’alignement de la fenêtre contextuelle est l’angle inférieur gauche du Popup.

Personnalisation du positionnement d’un contrôle Popup

Vous pouvez personnaliser l’origine de la cible et le point d’alignement de la fenêtre contextuelle en affectant à la propriété Placement la valeur Custom. Définissez ensuite un délégué CustomPopupPlacementCallback qui retourne un ensemble de points de positionnement possibles et les axes principaux (par ordre de préférence) pour le Popup. Le point qui montre la plus grande partie du Popup est sélectionné. La position du Popup est automatiquement ajustée si le Popup est masqué par le bord de l’écran. Pour obtenir un exemple, consultez Spécifier une position de menu contextuel personnalisée.

Voir aussi

• Popup Placement Sample (Exemple de positionnement de fenêtre contextuelle)