Comportement de placement des fenêtres contextuelles

Un Popup contrôle affiche du contenu dans une fenêtre distincte qui flotte sur 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. Ces propriétés fonctionnent ensemble pour vous donner la flexibilité nécessaire pour spécifier la position du Popup.

Remarque

Les classes ToolTip et ContextMenu définissent également ces cinq propriétés et se comportent de manière similaire.

Positionnement de la fenêtre contextuelle

Le placement d’un Popup peut être relatif à un UIElement ou à l’écran entier. L’exemple suivant crée quatre Popup contrôles relatifs à un UIElement( dans ce cas, une image). Tous les Popup contrôles ont la PlacementTarget propriété définie image1sur , mais chacun Popup a une valeur différente pour la propriété de placement.

<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 Popup contrôles

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

[REMARQUE] Selon vos paramètres Windows liés à la dominance manuelle, la fenêtre contextuelle peut être éventuellement 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, HorizontalOffset, et VerticalOffset sont liées les unes aux autres et au Popup.

• Objet cible

• Zone cible

• Origine cible

• Point d’alignement de fenêtre contextuelle

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

Objet cible

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

L’exemple suivant crée un Popup enfant d’un Canvas. L’exemple ne définit pas la PlacementTarget propriété sur le Popup. La valeur par défaut de Placement est PlacementMode.Bottom, donc 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 l’élément Popup est positionné par rapport au Canvas.

L'exemple suivant crée un Popup qui est l'enfant d'un Canvas, mais cette fois, le PlacementTarget est réglé sur ellipse1, donc la fenêtre contextuelle apparaît sous le 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 l’élément Popup est positionné par rapport au Ellipse.

Remarque

Pour ToolTip, la valeur par défaut est PlacementMouse . Pour ContextMenu, la valeur par défaut est PlacementMousePoint . Ces valeurs sont expliquées plus loin, dans « Fonctionnement des propriétés ensemble ».

Zone cible

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

L’exemple suivant crée deux Canvas objets, chacun contenant un Rectangle et un Popup. Dans les deux cas, l’objet cible de l’objet Popup est le Canvas. Le Popup dans le premier Canvas a le PlacementRectangle défini, avec ses propriétés X, Y, Width, et Height définies sur 50, 50, 50, et 100, respectivement. La Popup dans la seconde Canvas n’a pas le PlacementRectangle défini. Par conséquent, la première Popup est positionnée en dessous de PlacementRectangle, et la seconde Popup est positionnée sous le Canvas. Chacun Canvas contient également un Rectangle qui a les mêmes bornes que le PlacementRectangle pour le 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 cible et point d'alignement de la fenêtre contextuelle

L’origine cible et le point d’alignement de 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. HorizontalOffset et VerticalOffset sont relatifs à l’origine cible et au point d’alignement de la fenêtre contextuelle. La valeur de la Placement propriété détermine où se trouvent l’origine cible et le point d’alignement de fenêtre contextuelle.

L'exemple suivant crée un Popup et définit les propriétés HorizontalOffset et VerticalOffset à 20. La propriété Placement est définie sur Bottom (valeur par défaut), ainsi l'origine cible est le coin inférieur gauche de la zone cible et le point d'alignement de la fenêtre contextuelle est le coin 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, PlacementRectangle, et Placement doivent être prises en compte ensemble pour déterminer la zone cible, l’origine cible et le point d’alignement du popup approprié. Par exemple, si la valeur est PlacementMouse, il n’existe aucun objet cible, l’objet PlacementRectangle est ignoré et la zone cible est les limites du pointeur de la souris. En revanche, si Placement est Bottom le cas, le PlacementTarget parent détermine l’objet cible et PlacementRectangle détermine la zone cible.

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

Mode de Placement	Objet cible	Zone cible	Origine cible	Point d’alignement de fenêtre contextuelle
Absolute	Non applicable. PlacementTarget est ignoré.	Écran ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’écran.	Coin supérieur gauche de la zone cible.	Coin supérieur gauche du Popup.
AbsolutePoint	Non applicable. PlacementTarget est ignoré.	Écran ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’écran.	Coin supérieur gauche de la zone cible.	Coin supérieur gauche du Popup.
Bottom	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin inférieur gauche de la zone cible.	Coin supérieur gauche du Popup.
Center	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Centre de la zone cible.	Le centre du Popup.
Custom	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Défini par le CustomPopupPlacementCallback.	Défini par le CustomPopupPlacementCallback.
Left	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin supérieur gauche de la zone cible.	Coin supérieur droit du Popup.
Mouse	Non applicable. PlacementTarget est ignoré.	Limites du pointeur de la souris. PlacementRectangle est ignoré.	Coin inférieur gauche de la zone cible.	Coin supérieur gauche du Popup.
MousePoint	Non applicable. PlacementTarget est ignoré.	Limites du pointeur de la souris. PlacementRectangle est ignoré.	Coin supérieur gauche de la zone cible.	Coin supérieur gauche du Popup.
Relative	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin supérieur gauche de la zone cible.	Coin supérieur gauche du Popup.
RelativePoint	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin supérieur gauche de la zone cible.	Coin supérieur gauche du Popup.
Right	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin supérieur droit de la zone cible.	Coin supérieur gauche du Popup.
Top	PlacementTarget ou parent.	Objet cible ou PlacementRectangle s’il est défini. Le PlacementRectangle paramètre est relatif à l’objet cible.	Coin supérieur gauche de la zone cible.	Coin inférieur gauche du Popup.

Les illustrations suivantes montrent la Popup zone cible, l’origine 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 zone est bleue.

Lorsque la fenêtre contextuelle rencontre le bord de l’écran

Pour des raisons de sécurité, un Popup élément ne peut pas être masqué par le bord d’un écran. L’une des trois choses suivantes se produit lorsque l’écran Popup rencontre un bord d’écran :

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

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

• La fenêtre contextuelle utilise une origine de cible différente et un point d'alignement de la fenêtre contextuelle.

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écapitule le comportement lorsque l’écran Popup rencontre un bord d’écran pour chaque PlacementMode valeur.

Mode de Placement	Bord supérieur	Bord inférieur	Bord gauche	Bord droit
Absolute	S’aligne sur le bord supérieur.	S’aligne sur le bord inférieur.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.
AbsolutePoint	S’aligne sur le bord supérieur.	Le point d’alignement contextuel passe au coin inférieur gauche du Popup.	S’aligne sur le bord gauche.	Le point d'alignement de la fenêtre contextuelle passe au coin supérieur droit du Popup.
Bottom	S’aligne sur le bord supérieur.	L’origine cible est modifiée au coin supérieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est modifié au coin inférieur gauche du Popup.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.
Center	S’aligne sur le bord supérieur.	S’aligne sur le bord inférieur.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.
Left	S’aligne sur le bord supérieur.	S’aligne sur le bord inférieur.	L’origine cible passe au coin supérieur droit de la zone cible et le point d’alignement de la fenêtre contextuelle passe au coin supérieur gauche du Popup.	S’aligne sur le bord droit.
Mouse	S’aligne sur le bord supérieur.	L’origine cible se déplace vers le coin supérieur gauche de l'élément cible (les limites définies par le pointeur de la souris) et le point d’alignement de la fenêtre contextuelle se déplace vers le coin inférieur gauche du Popup.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.
MousePoint	S’aligne sur le bord supérieur.	Le point d’alignement contextuel passe au coin inférieur gauche du Popup.	S’aligne sur le bord gauche.	Le point d'alignement de la fenêtre contextuelle passe au coin supérieur droit de la fenêtre contextuelle.
Relative	S’aligne sur le bord supérieur.	S’aligne sur le bord inférieur.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.
RelativePoint	S’aligne sur le bord supérieur.	Le point d’alignement contextuel passe au coin inférieur gauche du Popup.	S’aligne sur le bord gauche.	Le point d'alignement de la fenêtre contextuelle passe au coin supérieur droit de la fenêtre contextuelle.
Right	S’aligne sur le bord supérieur.	S’aligne sur le bord inférieur.	S’aligne sur le bord gauche.	L’origine cible passe au coin supérieur gauche de la zone cible et le point d’alignement du popup passe au coin supérieur droit de la Popup.
Top	L’origine cible passe au coin inférieur gauche de la zone cible et le point d’alignement de fenêtre contextuelle passe au coin supérieur gauche du Popup. En effet, il s’agit de la même chose que quand Placement .Bottom	S’aligne sur le bord inférieur.	S’aligne sur le bord gauche.	S’aligne sur le bord droit.

Alignement au bord de l’écran

Un Popup peut s’aligner sur le bord de l’écran en repositionnant lui-même afin que l’ensemble Popup soit visible sur l’écran. Lorsque cela se produit, la distance entre l’origine cible et le point d’alignement de fenêtre contextuelle peut différer 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 à Relative et a VerticalOffset défini à 100. Si le bord inférieur de l’écran masque tout ou partie de l’écran Popup, le Popup repositionne le long du bord inférieur de l’écran et la distance verticale entre l’origine cible et le point d’alignement de fenêtre contextuelle est inférieure à 100. L’illustration suivante illustre cela.

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

Si Placement c’est AbsolutePoint, RelativePointou MousePoint, le point d’alignement de 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 de Popup, le point d'alignement de la fenêtre contextuelle est le coin inférieur gauche de Popup.

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

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

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

Quand Placement est Bottom, Left, Mouse, Right ou Top, l’origine cible et le point d’alignement de la fenêtre contextuelle changent si l'on rencontre un certain bord de l’écran. Le bord de l’écran qui provoque la modification de la position dépend de la PlacementMode valeur.

L’illustration suivante montre que quand Placement est Bottom et que les Popup rencontrent le bord inférieur de l’écran, l’origine cible est le coin supérieur gauche de la zone cible et le point d’alignement de la fenêtre contextuelle est le coin 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 cible est le coin supérieur droit de la zone cible et le point d’alignement de la fenêtre contextuelle est le coin supérieur gauche du Popup.

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

droit

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

L’illustration suivante montre que quand PlacementMouse et que les Popup rencontrent le bord inférieur de l’écran, l’origine cible est l’angle supérieur gauche de la zone cible (les limites du pointeur de la souris) et le point d’alignement du popup est le coin inférieur gauche du Popup.

Personnalisation du placement de fenêtres contextuelles

Vous pouvez personnaliser l’origine cible et le point d'alignement pour la fenêtre contextuelle en définissant la propriété sur PlacementCustom. Définissez ensuite un CustomPopupPlacementCallback délégué qui retourne un ensemble de points de placement et d’axes principaux possibles (par ordre de préférence) pour le Popup. Le point qui montre la plus grande partie de l’élément 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écifiez une fenêtre contextuelle personnalisée.

Voir aussi

• Exemple de positionnement de fenêtre contextuelle