Condividi tramite


Comportamento del controllo Popup in relazione al posizionamento

Un controllo Popup visualizza il contenuto in una finestra separata mobile rispetto a un'applicazione. È possibile specificare la posizione di un oggetto Popup relativo a un controllo, al mouse o allo schermo, mediante le proprietà PlacementTarget, Placement, PlacementRectangle, HorizontalOffset e VerticalOffset. Queste proprietà funzionano in combinazione tra loro per garantire flessibilità quando viene specificata la posizione del Popup.

NotaNota

Inoltre, le classi ToolTip e ContextMenu definiscono queste cinque proprietà e si comportano in maniera simile.

Nel presente argomento sono contenute le seguenti sezioni.

  • Posizione del controllo Popup
  • Definizioni dei termini: anatomia di un controllo Popup
  • Modalità di interazione delle proprietà
  • Quando il popup rileva i bordi dello schermo
  • Argomenti correlati

Posizione del controllo Popup

La posizione di Popup può essere relativa a UIElement o allo schermo intero. Nell'esempio seguente vengono creati quattro controlli Popup relativi a un UIElement— in questo caso, un'immagine. Tutti i controlli Popup dispongono della proprietà PlacementTarget impostata su image1, ma ciascun oggetto Popup ha un valore diverso per la proprietà di posizione.

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

Nell'illustrazione seguente viene mostrata l'immagine insieme ai controlli Popup

Immagine con quattro controlli Popup

Immagine con quattro controlli popup

In questo semplice esempio viene mostrato come impostare PlacementTarget e le proprietà Placement, ma mediante le proprietà PlacementRectangle, HorizontalOffset, e VerticalOffset, è possibile disporre di un controllo maggiore sul posizionamento del Popup.

Definizioni dei termini: anatomia di un controllo Popup

I termini seguenti sono utili per interpretare il modo in cui le proprietà PlacementTarget, Placement, PlacementRectangle, HorizontalOffset e VerticalOffset interagiscono tra loro e con Popup:

  • Oggetto di destinazione

  • Area di destinazione

  • Origine di destinazione

  • Punto dell'allineamento popup

Questi termini offrono un modo pratico per fare riferimento ai vari aspetti di Popup e del controllo con il quale viene associato.

Oggetto di destinazione

L'oggetto di destinazione è l'elemento con cui viene associato Popup. Se impostata, la proprietà PlacementTarget specifica l'oggetto di destinazione. Se l'oggetto PlacementTarget non viene impostato e Popup dispone di un elemento padre, questo elemento è l'oggetto di destinazione. Se non esiste alcun valore PlacementTarget e alcun elemento padre, non c'è nessun oggetto di destinazione e quindi Popup verrà posizionato in relazione allo schermo.

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

Nell'immagine seguente viene mostrato che l'oggetto Popup è posizionato in relazione a Canvas.

Popup senza PlacementTarget

Controllo popup senza PlacementTarget

Nell'esempio seguente viene creato un oggetto Popup elemento figlio di Canvas, ma in questo caso PlacementTarget è stato impostato su ellipse1, pertanto il popup viene visualizzato sotto l'oggetto 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>

Nell'immagine seguente viene mostrato che l'oggetto Popup è posizionato in relazione a Ellipse.

Popup con PlacementTarget

Popup posizionato rispetto a un'ellisse

NotaNota

Per ToolTip, il valore predefinito di Placement è Mouse.Per ContextMenu, il valore predefinito di Placement è MousePoint.Questi valori verranno illustrati più avanti, nella sezione "Modalità di interazione delle proprietà"

Area di destinazione

L'area di destinazione è l'area visualizzata sullo schermo alla quale è relativo l'oggetto Popup. Negli esempi precedenti, Popup è allineato con i limiti dell'oggetto di destinazione, ma in alcuni casi Popup è allineato ad altri limiti, anche se Popup dispone di un oggetto di destinazione. Se viene impostata la proprietà PlacementRectangle, l'area di destinazione è diversa rispetto ai limiti dell'oggetto di destinazione.

Nell'esempio riportato di seguito vengono creati due oggetti Canvas, ciascuno contenente Rectangle e Popup. In entrambi i casi, l'oggetto di destinazione per Popup è Canvas. L'oggetto Popup nel primo Canvas dispone di PlacementRectangle impostato, con le relative proprietà X, Y, Width e Height impostate rispettivamente su 50, 50, 50, e 100. Per l'oggetto Popup nel secondo Canvas non è stato impostato PlacementRectangle. Di conseguenza, il primo Popup si trova sotto l'oggettoPlacementRectangle e il secondo Popup sotto l'oggetto Canvas. Ciascun Canvas contiene inoltre un oggetto Rectangle con gli stessi limiti di PlacementRectangle per il primo oggetto Popup. Si noti che PlacementRectangle non crea un elemento visibile nell'applicazione; nell'esempio viene creato un oggetto Rectangle per rappresentare 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>

Nell'immagine seguente viene illustrato il risultato dell'esempio precedente.

Popup con e senza PlacementRectangle

Popup con e senza PlacementRectangle

Origine di destinazione e punto dell'allineamento popup

L'origine di destinazione e il punto dell'allineamento popup sono i punti di riferimento utilizzati per il posizionamento, rispettivamente, sull'area di destinazione e sul popup. È possibile utilizzare le proprietà HorizontalOffset e VerticalOffset per eseguire l'offset del popup dall'area di destinazione. Gli oggetti HorizontalOffset e VerticalOffset sono relativi all'origine di destinazione e al punto dell'allineamento popup. Il valore della proprietà Placement determina la posizione in cui si trovano l'origine di destinazione e il punto dell'allineamento popup.

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

Nell'immagine seguente viene illustrato il risultato dell'esempio precedente.

Popup con HorizontalOffset e VerticalOffset

Posizionamento del popup con punto di allineamento sull'origine di destinazione

Modalità di interazione delle proprietà

È necessario considerare insieme i valori di PlacementTarget, PlacementRectangle e Placement per stabilire l'area di destinazione, l'origine di destinazione e il punto dell'allineamento popup esatti. Ad esempio, se il valore di Placement è Mouse, non esiste alcun oggetto di destinazione, PlacementRectangle viene ignorato e l'area di destinazione è costituita dai limiti del puntatore del mouse. D'altra parte, se Placement è Bottom, PlacementTarget o l'elemento padre determinano l'oggetto di destinazione e PlacementRectangle determina l'area di destinazione.

Nella tabella seguente vengono descritti l'oggetto di destinazione, l'area di destinazione, l'origine di destinazione e il punto dell'allineamento popup e viene indicato se PlacementTarget e PlacementRectangle vengono utilizzati per ciascun valore di enumerazione PlacementMode.

PlacementMode

Oggetto di destinazione

Area di destinazione

Origine di destinazione

Punto dell'allineamento popup

Absolute

Non applicabile. PlacementTarget viene ignorata.

Lo schermo o l'oggetto PlacementRectangle se impostato. L'oggetto PlacementRectangle è relativo allo schermo.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

AbsolutePoint

Non applicabile. PlacementTarget viene ignorata.

Lo schermo o l'oggetto PlacementRectangle se impostato. L'oggetto PlacementRectangle è relativo allo schermo.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

Bottom

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo inferiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

Center

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Il centro dell'area di destinazione.

Il centro dell'oggetto Popup.

Custom

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Definito da CustomPopupPlacementCallback.

Definito da CustomPopupPlacementCallback.

Left

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore destro di Popup.

Mouse

Non applicabile. PlacementTarget viene ignorata.

Limiti del puntatore del mouse. PlacementRectangle viene ignorata.

Angolo inferiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

MousePoint

Non applicabile. PlacementTarget viene ignorata.

Limiti del puntatore del mouse. PlacementRectangle viene ignorata.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

Relative

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

RelativePoint

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo superiore sinistro dell'area di destinazione.

Angolo superiore sinistro di Popup.

Right

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo superiore destro dell'area di destinazione.

Angolo superiore sinistro di Popup.

Top

PlacementTarget o l'elemento padre.

Oggetto di destinazione, o PlacementRectangle se è impostato. L'oggetto PlacementRectangle è relativo all'oggetto di destinazione.

Angolo superiore sinistro dell'area di destinazione.

Angolo inferiore sinistro di Popup.

Nell'illustrazione seguente vengono mostrati l'oggetto Popup, l'area di destinazione, l'origine di destinazione e il punto dell'allineamento popup per ciascun valore PlacementMode. In ogni figura l'area di destinazione è di colore giallo, mentre Popup è blu.

La posizione è Absolute o AbsolutePoint

Popup con posizionamento Absolute o AbsolutePoint

La posizione è Bottom

Popup con posizionamento Bottom

La posizione è Center

Popup con posizionamento Center

La posizione è Left

Popup con posizionamento Left

La posizione è Mouse

Popup con posizionamento Mouse

La posizione è MousePoint

Popup con posizionamento MousePoint

La posizione è Relative o RelativePoint

Popup con posizionamento Relative o RelativePoint

La posizione è Right

Popup con posizionamento Right

La posizione è Top

Popup con posizionamento Top

Quando il popup rileva i bordi dello schermo

Per motivi di sicurezza, un oggetto Popup non può essere nascosto dal bordo di uno schermo. Quando Popup rileva un bordo dello schermo, si verifica una delle tre situazioni seguenti:

  • Il popup viene riposizionato lungo il bordo dello schermo che nasconde l'oggetto Popup.

  • Il popup utilizza un punto dell'allineamento popup diverso.

  • Il popup utilizza un'origine di destinazione e un punto dell'allineamento popup diversi.

Queste opzioni verranno descritte più avanti in questa sezione.

Il comportamento dell'oggetto Popup quando viene rilevato un bordo dello schermo, dipende dal valore della proprietà Placement e dal bordo rilevato. Nella tabella seguente viene riepilogato il comportamento quando Popup rileva un bordo dello schermo per ciascun valore PlacementMode.

PlacementMode

Bordo superiore

Bordo inferiore

Bordo sinistro

Bordo destro

Absolute

Viene allineato al bordo superiore.

Viene allineato al bordo inferiore.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

AbsolutePoint

Viene allineato al bordo superiore.

Il punto dell'allineamento popup viene modificato nell'angolo inferiore sinistro di Popup.

Viene allineato al bordo sinistro.

Il punto dell'allineamento popup viene modificato nell'angolo superiore destro di Popup.

Bottom

Viene allineato al bordo superiore.

L'origine di destinazione viene modificata nell'angolo superiore sinistro dell'area di destinazione e il punto dell'allineamento popup viene modificato nell'angolo inferiore sinistro dell'oggetto Popup.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

Center

Viene allineato al bordo superiore.

Viene allineato al bordo inferiore.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

Left

Viene allineato al bordo superiore.

Viene allineato al bordo inferiore.

L'origine di destinazione viene modificata nell'angolo superiore destro dell'area di destinazione e il punto dell'allineamento popup viene modificato nell'angolo superiore sinistro dell'oggetto Popup.

Viene allineato al bordo destro.

Mouse

Viene allineato al bordo superiore.

L'origine di destinazione viene modificata nell'angolo superiore sinistro dell'area di destinazione (limiti del puntatore del mouse) e il punto dell'allineamento popup viene modificato nell'angolo inferiore sinistro dell'oggetto Popup.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

MousePoint

Viene allineato al bordo superiore.

Il punto dell'allineamento popup viene modificato nell'angolo inferiore sinistro di Popup.

Viene allineato al bordo sinistro.

Il punto dell'allineamento popup viene modificato nell'angolo superiore destro del popup.

Relative

Viene allineato al bordo superiore.

Viene allineato al bordo inferiore.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

RelativePoint

Viene allineato al bordo superiore.

Il punto dell'allineamento popup viene modificato nell'angolo inferiore sinistro di Popup.

Viene allineato al bordo sinistro.

Il punto dell'allineamento popup viene modificato nell'angolo superiore destro del popup.

Right

Viene allineato al bordo superiore.

Viene allineato al bordo inferiore.

Viene allineato al bordo sinistro.

L'origine di destinazione viene modificata nell'angolo superiore sinistro dell'area di destinazione e il punto dell'allineamento popup viene modificato nell'angolo superiore destro dell'oggetto Popup.

Top

L'origine di destinazione viene modificata nell'angolo inferiore sinistro dell'area di destinazione e il punto dell'allineamento popup viene modificato nell'angolo superiore sinistro dell'oggetto Popup. Di fatto, è uguale al caso in cui Placement è Bottom.

Viene allineato al bordo inferiore.

Viene allineato al bordo sinistro.

Viene allineato al bordo destro.

Allineamento al bordo dello schermo

Un oggetto Popup può essere allineato al bordo dello schermo riposizionandolo in modo da rendere l'intero oggetto Popup visibile sullo schermo. In tali circostanze, è possibile che la distanza tra l'origine di destinazione e il punto dell'allineamento popup vari rispetto ai valori di HorizontalOffset e VerticalOffset. When Placement è Absolute, Center o Relative, l'oggetto Popup viene allineato a ogni bordo dello schermo. Ad esempio, si presupponga che un oggetto Popup disponga di Placement impostato su Relative e di VerticalOffset impostato su 100. Se una parte o l'intero oggetto Popup viene nascosto dal bordo inferiore dello schermo, l'oggetto Popup viene riposizionato lungo il bordo inferiore dello schermo e la distanza verticale tra l'origine di destinazione e il punto dell'allineamento popup è inferiore a 100. Nell'immagine seguente viene illustrata questa situazione.

Il popup viene allineato al bordo dello schermo

Popup allineato al bordo dello schermo

Modifica del punto dell'allineamento popup

Se Placement è AbsolutePoint, RelativePoint o MousePoint, il punto dell'allineamento popup viene modificato quando il popup rileva il bordo inferiore o destro dello schermo.

Nell'immagine seguente viene illustrato che quando una parte o l'intero oggetto Popup viene nascosto dal bordo inferiore dello schermo, il punto dell'allineamento popup sarà l'angolo inferiore sinistro di Popup.

Il popup rileva i bordi dello schermo e viene modificato il punto dell'allineamento popup.

Nuovo punto di allineamento dovuto al bordo inferiore dello schermo

Nell'immagine seguente viene illustrato che quando Popup viene nascosto dal bordo destro dello schermo, il punto dell'allineamento popup sarà l'angolo superiore destro di Popup.

Il popup rileva il bordo destro dello schermo e viene modificato il punto dell'allineamento popup.

Nuovo punto di allineamento popup dovuto al bordo dello schermo

Se Popup rileva i bordi inferiore e destro dello schermo, il punto dell'allineamento popup sarà l'angolo inferiore destro di Popup.

Modifica dell'origine di destinazione e del punto dell'allineamento popup

Quando Placement è Bottom, Left, Mouse, Right o Top, se viene rilevato un determinato bordo dello schermo, l'origine di destinazione e il punto dell'allineamento popup vengono modificati. Il bordo dello schermo che determina la modifica della posizione, dipende dal valore PlacementMode.

Nell'immagine seguente viene illustrato che quando Placement è Bottom e Popup rileva il bordo inferiore dello schermo, l'origine di destinazione sarà l'angolo superiore sinistro dell'area di destinazione e il punto dell'allineamento popup sarà l'angolo inferiore sinistro di Popup.

La posizione è Bottom e il popup rileva il bordo inferiore dello schermo

Nuovo punto di allineamento dovuto al bordo inferiore dello schermo

Nell'immagine seguente viene illustrato che quando Placement è Left e Popup rileva il bordo sinistro dello schermo, l'origine di destinazione sarà l'angolo superiore destro dell'area di destinazione e il punto dell'allineamento popup sarà l'angolo superiore sinistro di Popup.

La posizione è Left e il popup rileva il bordo sinistro dello schermo

Nuovo punto di allineamento dovuto al bordo sinistro dello schermo

Nell'immagine seguente viene illustrato che quando Placement è Right e Popup rileva il bordo destro dello schermo, l'origine di destinazione sarà l'angolo superiore sinistro dell'area di destinazione e il punto dell'allineamento popup sarà l'angolo superiore destro di Popup.

La posizione è Right e il popup rileva il bordo destro dello schermo

Nuovo punto di allineamento popup dovuto al bordo destro dello schermo

Nell'immagine seguente viene illustrato che quando Placement è Top e Popup rileva il bordo superiore dello schermo, l'origine di destinazione sarà l'angolo inferiore sinistro dell'area di destinazione e il punto dell'allineamento popup sarà l'angolo superiore sinistro di Popup.

La posizione è Top e il popup rileva il bordo superiore dello schermo

Nuovo punto di allineamento dovuto al bordo superiore dello schermo

Nell'immagine seguente viene illustrato che quando Placement è Mouse e Popup rileva il bordo inferiore dello schermo, l'origine di destinazione sarà l'angolo superiore sinistro dell'area di destinazione (i limiti del puntatore del mouse) e il punto dell'allineamento popup sarà l'angolo inferiore sinistro di Popup.

La posizione è Mouse e il popup rileva il bordo inferiore dello schermo

Nuovo punto di allineamento dovuto al mouse vicino al bordo dello schermo

Personalizzazione del posizionamento di un oggetto Popup

È possibile personalizzare l'origine di destinazione e il punto dell'allineamento popup impostando la proprietà Placement su Custom. Quindi, definire un delegato di CustomPopupPlacementCallback che restituisca una serie di possibili punti di posizionamento e assi primari (in ordine di preferenza) per il controllo Popup. Viene selezionato il punto che visualizza la maggior parte dell'oggetto Popup. La posizione dell'oggetto Popup viene adattata automaticamente se Popup viene nascosto dal bordo dello schermo. Per un esempio, vedere Procedura: specificare una posizione personalizzata per un controllo Popup.

Vedere anche

Altre risorse

Esempio di posizionamento di un oggetto Popup