Comportement de positionnement de Popup

Mise à jour : novembre 2007

Un contrôle Popup affiche le contenu dans une fenêtre séparée qui flotte au-dessus d'une application (fenêtre contextuelle). 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 opèrent ensemble pour vous procurer une flexibilité dans la spécification de la position de Popup.

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

Cette rubrique comprend les sections suivantes.

• Positionnement du Popup
• Définitions de termes : anatomie d'un Popup
• Comment les propriétés opèrent ensemble
• Lorsque Popup rencontre le bord de l'écran
• Rubriques connexes

Positionnement du Popup

Le positionnement d'un Popup peut être relatif à un UIElement ou à tout l'écran. L'exemple suivant crée quatre contrôles Popup relatifs à un UIElement, dans ce cas, une image. Tous les contrôles Popup ont leur propriété PlacementTarget affectée à la valeur image1, mais chaque Popup a une propriété Placement de valeur différente.

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

Image avec quatre contrôles Popup

Cet exemple simple indique comment affecter les propriétés PlacementTarget et Placement, mais l'utilisation des propriétés PlacementRectangle, HorizontalOffset et VerticalOffset, vous offre encore davantage de contrôle sur l'emplacement du positionnement de Popup.

Définitions de termes : anatomie d'un Popup

Les termes suivants sont utiles pour comprendre comment les propriétés PlacementTarget, Placement, PlacementRectangle, HorizontalOffset et VerticalOffset sont associées les unes aux autres ainsi qu'à Popup :

• Objet de la cible

• Zone de la cible

• Origine de la cible

• Point d'alignement de la fenêtre contextuelle

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

Objet de la cible

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

L'exemple suivant crée un Popup qui est l'enfant d'un Canvas. L'exemple n'affecte pas la propriété PlacementTarget sur Popup. La valeur par défaut de Placement est PlacementMode.Bottom, Popup apparaît donc sous 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 Popup est positionné par rapport à Canvas.

Popup sans PlacementTarget

L'exemple suivant crée un Popup qui est l'enfant d'un Canvas, mais cette fois-ci PlacementTarget a la valeur ellipse1, de sorte que la fenêtre contextuelle apparaît 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 Popup est positionné par rapport à Ellipse.

Popup avec PlacementTarget

Remarque :
Pour ToolTip, la valeur par défaut de Placement est Mouse. Pour ContextMenu, la valeur par défaut de Placement est MousePoint. Ces valeurs sont expliquées plus loin, dans la section « Comment les propriétés opèrent ensemble ».

Zone de la cible

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

L'exemple suivant crée deux objets Canvas, chacun d'eux contenant un Rectangle et un Popup. Dans les deux cas, l'objet de la cible de Popup est Canvas. Popup dans le premier Canvas a PlacementRectangle défini, avec ses propriétés X, Y, Width et Height de valeurs respectives 50, 50, 50 et 100. Le Popup du deuxième Canvas n'a pas de PlacementRectangle défini. Par conséquent, le premier Popup est positionné sous PlacementRectangle et le deuxième Popup est positionné sous Canvas. Chaque Canvas contient également un Rectangle qui a les mêmes limites que le PlacementRectangle du premier Popup. Notez que PlacementRectangle ne crée pas d'élément visible dans l'application ; l'exemple crée un Rectangle pour représenter 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.

Popup avec et sans PlacementRectangle

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, situés respectivement sur la zone de la cible et sur la fenêtre contextuelle, qui sont utilisés pour le positionnement. Vous pouvez utiliser les propriétés HorizontalOffset et VerticalOffset pour décaler la fenêtre contextuelle par rapport à la zone de la cible. 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ù sont situées l'origine de la cible et le point d'alignement de la fenêtre contextuelle.

L'exemple suivant crée un Popup et affecte aux propriétés HorizontalOffset et VerticalOffset la valeur 20. La propriété Placement a la valeur Bottom (la valeur par défaut), l'origine de la cible est donc l'angle inférieur gauche de la zone de la cible et le point d'alignement de la fenêtre contextuelle est l'angle supérieur gauche de 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.

Popup avec HorizontalOffset et VerticalOffset

Comment les propriétés opèrent ensemble

Les valeurs de PlacementTarget, PlacementRectangle et Placement nécessitent d'être considérées ensemble pour connaître la zone de la cible, l'origine de la cible et le point d'alignement de la fenêtre contextuelle. Par exemple, si la valeur de Placement est Mouse, il n'existe pas d'objet de cible, PlacementRectangle est ignoré, et la zone de la cible équivaut aux limites du pointeur de la souris. En revanche, si Placement a la valeur Bottom, PlacementTarget ou le parent détermine l'objet de la cible et PlacementRectangle détermine la zone de la cible.

Le tableau suivant décrit l'objet de la cible, la zone de la cible, l'origine de la cible ainsi que 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 Popup, la zone de la cible, l'origine de la cible et le point d'alignement de la fenêtre contextuelle pour chaque valeur de PlacementMode. Dans chacune des figures, la zone de la cible est en jaune et la Popup est bleue.

Placement a la valeur Absolute ou AbsolutePoint

Placement a la valeur Bottom

Placement a la valeur Center

Placement a la valeur Left

Placement a la valeur Mouse

Placement a la valeur MousePoint

Placement a la valeur Relative ou RelativePoint

Placement a la valeur Right

Placement a la valeur Top

Lorsque Popup rencontre le bord de l'écran

Pour des raisons de sécurité, un Popup ne peut pas être caché par le bord de l'écran. L'une des trois actions suivantes se produit lorsque Popup rencontre un bord de l'écran :

• La fenêtre contextuelle se réaligne le long du bord de l'écran qui cache 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 en détail plus loin dans cette section.

Le comportement de Popup lorsqu'il rencontre un bord de l'écran dépend de la valeur de la propriété Placement et du bord de l'écran que rencontre la fenêtre contextuelle. Le tableau suivant récapitule les comportements qui ont lieu lorsque Popup rencontre un bord de l'écran pour chaque valeur de PlacementMode.

Alignement sur le bord de l'écran

Un Popup peut s'aligner sur le bord de l'écran en se repositionnant de façon à ce que Popup soit visible dans sa totalité sur l'écran. Lorsque cela se produit, il se peut que la distance entre l'origine de la cible et le point d'alignement de la fenêtre contextuelle diffère des valeurs de HorizontalOffset et VerticalOffset. Lorsque Placement a la valeur Absolute, Center, ou Relative, Popup s'aligne sur chaque bord de l'écran. Par exemple, supposons qu'un Popup a sa propriété Placement à la valeur Relative et sa propriété VerticalOffset à la valeur 100. Si le bord inférieur de l'écran cache tout ou partie de Popup, 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. C'est ce que montre l'illustration suivante.

La fenêtre contextuelle s'aligne sur le bord de l'écran

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

Si Placement a la valeur AbsolutePoint, RelativePoint, ou MousePoint, le point d'alignement de la fenêtre contextuelle est modifié lorsque la fenêtre contextuelle rencontre le bord inférieur ou le bord droit de l'écran.

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

La fenêtre contextuelle rencontre le bord inférieur de l'écran et modifie son point d'alignement

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

La fenêtre contextuelle rencontre le bord droit de l'écran et modifie son point d'alignement

Si 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 de Popup.

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

Lorsque Placement a la valeur Bottom, Left, Mouse, Right, ou Top, l'origine de la cible et le point d'alignement de la fenêtre contextuelle sont modifiés si un certain bord de l'écran est rencontré. Le bord de l'écran qui provoque la modification de la position dépend de la valeur PlacementMode.

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

Placement a la valeur Bottom et la fenêtre contextuelle rencontre le bord inférieur de l'écran

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

Placement a la valeur Left et la fenêtre contextuelle rencontre le bord gauche de l'écran

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

Placement a la valeur Right et la fenêtre contextuelle rencontre le bord droit de l'écran

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

Placement a la valeur Top et la fenêtre contextuelle rencontre le bord supérieur de l'écran

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

Placement a la valeur Mouse et la fenêtre contextuelle rencontre le bord inférieur de l'écran

Personnalisation du positionnement de Popup

Vous pouvez personnaliser l'origine de la cible ainsi que 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 et d'axes primaires possibles (dans l'ordre de préférence) pour Popup. Le point qui est sélectionné est celui qui montre la partie de Popup la plus grande. La position de Popup est ajustée automatiquement si Popup est caché par le bord de l'écran. Pour obtenir un exemple, consultez Comment : spécifier une position de menu contextuel personnalisée.

Voir aussi

Tâches

Positionnement de Popup, exemple