Comportamento di posizionamento dei popup

Un controllo Popup visualizza il contenuto in una finestra separata che si sovrappone a un'applicazione. È possibile specificare la posizione di un Popup rispetto a un controllo, al mouse o allo schermo usando le proprietà PlacementTarget, Placement, PlacementRectangle, HorizontalOffsete VerticalOffset. Queste proprietà interagiscono per offrire flessibilità nel definire la posizione del Popup.

Posizionamento del popup

Il posizionamento di un Popup può essere relativo a un UIElement o all'intero schermo. Nell'esempio seguente vengono creati quattro controlli Popup relativi a un UIElement, in questo caso un'immagine. Tutti i controlli Popup hanno la proprietà PlacementTarget impostata su image1, ma ogni Popup ha un valore diverso per la proprietà di posizionamento.

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

La figura seguente mostra l'immagine e i controlli Popup

Questo semplice esempio illustra come impostare le proprietà PlacementTarget e Placement, ma usando le proprietà PlacementRectangle, HorizontalOffsete VerticalOffset, si ha ancora più controllo sulla posizione del Popup.

! [NOTA] A seconda delle impostazioni di Windows correlate alla mano, il popup può essere allineato a sinistra o a destra quando visualizzato in alto o in basso. L'immagine precedente illustra l'allineamento della mano destra, che posiziona il popup a sinistra.

Definizioni di termini: Anatomia di un popup

I termini seguenti sono utili per comprendere in che modo le proprietà PlacementTarget, Placement, PlacementRectangle, HorizontalOffsete VerticalOffset sono correlate tra loro e le Popup:

• Oggetto di destinazione

• Area di destinazione

• Origine di destinazione

• Punto di allineamento popup

Questi termini forniscono un modo pratico per fare riferimento a vari aspetti della Popup e al controllo a cui è associato.

Oggetto di destinazione

L'oggetto di destinazione è l'elemento a cui è associato il Popup. Se la proprietà PlacementTarget è impostata, specifica l'oggetto di destinazione. Se PlacementTarget non è impostato e il Popup ha un elemento padre, l'elemento padre è l'oggetto di destinazione. Se non è presente alcun valore PlacementTarget e nessun elemento padre, non è presente alcun oggetto di destinazione e il Popup viene posizionato rispetto allo schermo.

Nell'esempio seguente viene creato un Popup figlio di un Canvas. Nell'esempio, la proprietà PlacementTarget non è impostata sul Popup. Il valore predefinito per Placement è PlacementMode.Bottom, quindi il Popup viene visualizzato sotto il 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>

La figura seguente mostra che il Popup è posizionato rispetto al Canvas.

Nell'esempio seguente viene creato un Popup figlio di un Canvas, ma questa volta il PlacementTarget è impostato su ellipse1, quindi il popup viene visualizzato sotto il 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>

La figura seguente mostra che il Popup è posizionato rispetto al Ellipse.

Area di destinazione

L'area di destinazione è l'area sullo schermo a cui il Popup è relativo. Negli esempi precedenti il Popup è allineato ai limiti dell'oggetto di destinazione, ma in alcuni casi il Popup è allineato ad altri limiti, anche se il Popup ha un oggetto di destinazione. Se la proprietà PlacementRectangle è impostata, l'area di destinazione è diversa dai limiti dell'oggetto di destinazione.

Nell'esempio seguente vengono creati due oggetti Canvas, ognuno contenente un Rectangle e un Popup. In entrambi i casi, l'oggetto di destinazione per il Popup è il Canvas. Il Popup nel primo Canvas ha il PlacementRectangle impostato, con le relative proprietà X, Y, Widthe Height impostate rispettivamente su 50, 50, 50 e 100. Il Popup nel secondo Canvas non ha il PlacementRectangle impostato. Di conseguenza, il primo Popup viene posizionato sotto il PlacementRectangle e il secondo Popup è posizionato sotto il Canvas. Ogni Canvas contiene anche un Rectangle con gli stessi limiti del PlacementRectangle per il primo Popup. Si noti che il PlacementRectangle non crea un elemento visibile nell'applicazione; Nell'esempio viene creato un Rectangle per rappresentare l'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>

Nella figura seguente viene illustrato il risultato dell'esempio precedente.

Origine del target e punto di allineamento del pop-up

I punti di riferimento di origine di destinazione e di allineamento della finestra popup sono rispettivamente nell'area di destinazione e nella finestra popup, e vengono utilizzati per il posizionamento. È possibile usare le proprietà HorizontalOffset e VerticalOffset per spostare il popup rispetto all'area di destinazione. Le HorizontalOffset e le VerticalOffset sono relative all'origine del target e al punto di allineamento del popup. Il valore della proprietà Placement determina dove si trovano il punto di origine della destinazione e il punto di allineamento della finestra popup.

Nell'esempio seguente viene creato un Popup e vengono impostate le proprietà HorizontalOffset e VerticalOffset su 20. La proprietà Placement è impostata su Bottom (valore predefinito), quindi l'origine del bersaglio è l'angolo inferiore sinistro dell'area di destinazione e il punto di allineamento del popup è l'angolo superiore sinistro del 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>

Nella figura seguente viene illustrato il risultato dell'esempio precedente.

Come le proprietà funzionano insieme

I valori di PlacementTarget, PlacementRectanglee Placement devono essere considerati insieme per determinare l'area target, l'origine target e il punto di allineamento del popup corretti. Ad esempio, se il valore di Placement è Mouse, non è presente alcun oggetto di destinazione, il PlacementRectangle viene ignorato e l'area di destinazione è i limiti del puntatore del mouse. D'altra parte, se Placement è Bottom, il PlacementTarget o padre determina l'oggetto di destinazione e PlacementRectangle determina l'area di destinazione.

La tabella seguente descrive l'oggetto di destinazione, l'area di destinazione, l'origine di destinazione e il punto di allineamento popup e indica se PlacementTarget e PlacementRectangle vengono usati per ogni valore di enumerazione PlacementMode.

Le illustrazioni seguenti mostrano il Popup, l'area di destinazione, l'origine di destinazione e il punto di allineamento del popup per ogni valore PlacementMode. In ogni figura, l'area di destinazione è gialla e il Popup è blu.

Quando il popup rileva il bordo dello schermo

Per motivi di sicurezza, un Popup non può essere nascosto dal bordo di uno schermo. Una delle tre cose seguenti si verifica quando il Popup incontra un bordo dello schermo:

• Il popup si riallinea lungo il bordo dello schermo che nasconderebbe il Popup.

• Il popup utilizza un punto di allineamento del popup diverso.

• Il popup utilizza un'origine di destinazione differente e un punto di allineamento diverso.

Queste opzioni sono descritte più avanti in questa sezione.

Il comportamento del Popup quando rileva un bordo dello schermo dipende dal valore della proprietà Placement e dal bordo dello schermo rilevato dal popup. La tabella seguente riepiloga il comportamento quando il Popup rileva un bordo dello schermo per ogni valore PlacementMode.

Allineamento al bordo dello schermo

Un Popup può essere allineato al bordo dello schermo riposizionando se stesso in modo che l'intero Popup sia visibile sullo schermo. In questo caso, la distanza tra l'origine del target e il punto di allineamento popup può essere diversa dai valori di HorizontalOffset e VerticalOffset. Quando Placement è Absolute, Centero Relative, l'Popup si allinea a ogni bordo dello schermo. Si supponga, ad esempio, che un Popup abbia Placement impostato su Relative e VerticalOffset impostato su 100. Se il bordo inferiore dello schermo nasconde tutto o parte del Popup, il Popup riposiziona se stesso lungo il bordo inferiore dello schermo e la distanza verticale tra l'origine di destinazione e il punto di allineamento popup è minore di 100. La figura seguente illustra questa operazione.

Modifica del punto di allineamento del popup

Se Placement è AbsolutePoint, RelativePointo MousePoint, il punto di allineamento del popup cambia quando il popup incontra il bordo inferiore o quello destro dello schermo.

Nella figura seguente viene illustrato che quando il bordo inferiore della schermata nasconde tutto o parte del Popup, il punto di allineamento del popup è l'angolo inferiore sinistro del Popup.

La seguente illustrazione dimostra che quando il Popup è nascosto dal bordo destro dello schermo, il punto di allineamento del popup è l'angolo in alto a destra del Popup.

Se il Popup raggiunge i bordi inferiore e destro dello schermo, il punto di allineamento del popup è l'angolo in basso a destra del Popup.

Cambiare l'origine di destinazione e il punto di allineamento del popup

Quando Placement è Bottom, Left, Mouse, Righto Top, l'origine della destinazione e il punto di allineamento popup cambiano se si incontra un certo bordo dello schermo. Il bordo dello schermo che determina la modifica della posizione dipende dal valore PlacementMode.

La figura seguente mostra che quando Placement è Bottom e il Popup incontra il bordo inferiore dello schermo, l'origine di destinazione è l'angolo superiore sinistro dell'area di destinazione e il punto di allineamento del popup è l'angolo inferiore sinistro del Popup.

La figura seguente mostra che quando Placement è Left e il Popup incontra il bordo sinistro dello schermo, l'origine di destinazione è l'angolo superiore destro dell'area di destinazione e il punto di allineamento popup è l'angolo superiore sinistro del Popup.

La figura seguente mostra che quando Placement è Right e il Popup incontra il bordo destro dello schermo, l'origine della destinazione è l'angolo superiore sinistro dell'area di destinazione e il punto di allineamento del popup è l'angolo superiore destro del Popup.

La figura seguente mostra che quando Placement è Top e il Popup incontra il bordo superiore dello schermo, l'origine dell'area di destinazione è l'angolo inferiore sinistro e il punto di allineamento del popup è l'angolo in alto a sinistra del Popup.

La figura seguente mostra che quando Placement è Mouse e il Popup incontra il bordo inferiore dello schermo, l'origine di destinazione è l'angolo superiore sinistro dell'area di destinazione (i limiti del puntatore del mouse) e il punto di allineamento del popup è l'angolo inferiore sinistro del Popup.

Personalizzazione del posizionamento popup

È possibile personalizzare l'origine di destinazione e il punto di allineamento popup impostando la proprietà Placement su Custom. Definire quindi un delegato CustomPopupPlacementCallback che restituisce un set di possibili punti di posizionamento e assi primari (in ordine di preferenza) per il Popup. Il punto che mostra la parte più grande della Popup è selezionato. La posizione del Popup viene modificata automaticamente se il Popup è nascosto dal bordo dello schermo. Per un esempio, vedere Specificare una posizione popup personalizzata.

Vedere anche

• esempio di posizionamento popup