Comportamento de posicionamento do pop-up

Um Popup controle exibe o conteúdo em uma janela separada que flutua sobre um aplicativo. Você pode especificar a posição de um Popup em relação a um controle, ao mouse ou à tela usando as propriedades de PlacementTarget, Placement, PlacementRectangle, HorizontalOffset e VerticalOffset. Essas propriedades funcionam em conjunto para oferecer flexibilidade na especificação da posição do Popup.

Posicionando o popup

O posicionamento de um Popup pode ser relativo a um UIElement ou a toda a tela. O exemplo a seguir cria quatro Popup controles relativos a um UIElement— nesse caso, uma imagem. Todos os Popup controles têm a PlacementTarget propriedade definida como image1, mas cada Popup um tem um valor diferente para a propriedade de posicionamento.

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

A ilustração a seguir mostra a imagem e os Popup controles

Este exemplo simples demonstra como definir as propriedades PlacementTarget e Placement, mas, ao usar as propriedades PlacementRectangle, HorizontalOffset e VerticalOffset, você tem ainda mais controle sobre onde o Popup está posicionado.

![OBSERVAÇÃO] Dependendo das configurações do Windows relacionadas à lateralidade, o pop-up pode ser alinhado à esquerda ou à direita quando mostrado na parte superior ou inferior. A imagem anterior demonstra o alinhamento de destros, que posiciona o pop-up à esquerda.

Definições de termos: a anatomia de um pop-up

Os termos a seguir são úteis para entender como as PlacementTargetpropriedades , , PlacementPlacementRectangleHorizontalOffsete , e VerticalOffset se relacionam entre si e o :Popup

• Objeto de destino

• Área de destino

• Origem alvo

• Ponto de alinhamento emergente

Esses termos fornecem uma maneira conveniente de se referir a vários aspectos do Popup controle ao qual ele está associado.

Objeto de Destino

O objeto de destino é o elemento ao qual ele Popup está associado. Se a PlacementTarget propriedade estiver definida, ela especifica o objeto de destino. Se PlacementTarget não estiver definido e Popup tiver um pai, o pai será o objeto de destino. Se não houver nenhum valor PlacementTarget e nenhum pai, não há um objeto de destino, e Popup é posicionado em relação à tela.

O exemplo a seguir cria um Popup filho de um Canvas. O exemplo não define a PlacementTarget propriedade no Popup. O valor padrão para Placement é PlacementMode.Bottom, portanto, o Popup aparece abaixo do 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>

A ilustração a seguir mostra que a Popup posição é relativa à Canvas.

O exemplo a seguir cria um Popup que é filho de um Canvas, mas desta vez o PlacementTarget é definido como ellipse1, então o pop-up aparece abaixo do 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>

A ilustração a seguir mostra que a Popup posição é relativa à Ellipse.

Área-Alvo

A área de destino é a área na tela à qual se Popup refere. Nos exemplos anteriores, ele Popup é alinhado com os limites do objeto de destino, mas, em alguns casos, ele Popup é alinhado a outros limites, mesmo que tenha Popup um objeto de destino. Se a PlacementRectangle propriedade estiver definida, a área de destino será diferente dos limites do objeto de destino.

O exemplo a seguir cria dois Canvas objetos, cada um contendo um Rectangle e um Popup. Em ambos os casos, o objeto de destino para o Popup é o Canvas. O Popup no primeiro Canvas tem o PlacementRectangle configurado, com suas propriedades X, Y, Width e Height definidas como 50, 50, 50 e 100, respectivamente. O Popup no segundo Canvas não tem o PlacementRectangle definido. Como resultado, o primeiro Popup é posicionado abaixo do PlacementRectangle e o segundo Popup é posicionado abaixo do Canvas. Cada Canvas também contém um Rectangle que tem os mesmos limites que o PlacementRectangle para o primeiro Popup. Observe que o PlacementRectangle não cria um elemento visível no aplicativo; o exemplo cria um Rectangle para representar o 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>

A ilustração a seguir mostra o resultado do exemplo anterior.

Origem de destino e ponto de alinhamento de popup

A origem de destino e o ponto de alinhamento pop-up são pontos de referência na área de destino e pop-up, respectivamente, que são usados para posicionamento. Você pode usar as propriedades HorizontalOffset e VerticalOffset para ajustar o pop-up em relação à área de destino. O HorizontalOffset e VerticalOffset são relativos à origem de destino e ao ponto de alinhamento pop-up. O valor da Placement propriedade determina onde a origem do destino e o ponto de alinhamento pop-up estão localizados.

O exemplo a seguir cria um Popup e define as propriedades HorizontalOffset e VerticalOffset para 20. A Placement propriedade é definida como Bottom (o padrão), portanto, a origem de destino é o canto inferior esquerdo da área de destino e o ponto de alinhamento pop-up é o canto superior esquerdo do 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>

A ilustração a seguir mostra o resultado do exemplo anterior.

Como as propriedades funcionam juntas

Os valores de PlacementTarget, PlacementRectangle e Placement precisam ser considerados juntos para determinar corretamente a área de destino, a origem do destino e o ponto de alinhamento do popup. Por exemplo, se o valor Placement for Mouse, não há nenhum objeto de destino, o PlacementRectangle é ignorado e a área de destino é os limites do ponteiro do mouse. Por outro lado, se Placement for Bottom, o PlacementTarget ou pai determinará o objeto de destino e PlacementRectangle determinará a área de destino.

A tabela a seguir descreve o objeto de destino, a área de destino, a origem de destino e o ponto de alinhamento pop-up e indica se PlacementTarget e PlacementRectangle são usados para cada PlacementMode valor de enumeração.

As ilustrações a seguir mostram a Popup área de destino, a origem do destino e o ponto de alinhamento do pop-up para cada PlacementMode valor. Em cada figura, a área de destino é amarela e a Popup é azul.

Quando o pop-up encontra a borda da tela

Por razões de segurança, um Popup não pode ser ocultado pela borda de uma tela. Uma das três seguintes coisas acontece quando se Popup encontra uma borda de tela:

• O pop-up se realinha ao longo da borda da tela que obscureceria o Popup.

• O pop-up usa um ponto de alinhamento pop-up diferente.

• O pop-up usa uma origem de destino diferente e um ponto de alinhamento do pop-up.

Essas opções são descritas mais adiante nesta seção.

O comportamento de Popup quando encontra uma borda da tela depende do valor da propriedade Placement e de qual borda da tela é encontrada pelo pop-up. A tabela a seguir resume o comportamento quando o Popup encontra uma borda de tela para cada valor de PlacementMode.

Alinhando-se à Borda da Tela

Popup pode se alinhar à borda da tela reposicionando-se para que todo o Popup fique visível na tela. Quando isso ocorre, a distância entre a origem do destino e o ponto de alinhamento pop-up pode ser diferente dos valores de HorizontalOffset e VerticalOffset. Quando Placement é Absolute, Centerou Relative, o Popup alinha-se a cada borda de tela. Por exemplo, suponha que um Popup tenha Placement definido Relative e VerticalOffset definido como 100. Se a borda inferior da tela ocultar todo ou parte do Popup, o Popup será reposicionado ao longo da borda inferior da tela, e a distância vertical entre a origem do alvo e o ponto de alinhamento do pop-up será menor que 100 pixels. A ilustração a seguir demonstra isso.

Alterando o ponto de alinhamento da janela pop-up

Se Placement for AbsolutePoint, RelativePoint, ou MousePoint, o ponto de alinhamento do popup mudará quando o popup encontrar a borda inferior ou direita da tela.

A ilustração a seguir demonstra que quando a borda inferior da tela oculta todo ou parte do Popup, o ponto de alinhamento do pop-up é o canto inferior esquerdo do Popup.

A ilustração a seguir demonstra que, quando a Popup está oculta pela borda direita da tela, o ponto de alinhamento do pop-up é o canto superior direito do Popup.

Se o Popup encontrar as bordas da tela inferior e direita, o ponto de alinhamento do pop-up será o canto inferior direito do Popup.

Alterando o destino de origem e o ponto de alinhamento do popup

Quando Placement for Bottom, Left, Mouse, Right ou Top, a origem de destino e o ponto de alinhamento popup mudam se uma determinada borda da tela for encontrada. A borda da tela que faz com que a posição seja alterada depende do PlacementMode valor.

A ilustração a seguir demonstra que, quando Placement está Bottom e Popup encontra a borda inferior da tela, a origem do destino é o canto superior esquerdo da área de destino e o ponto de alinhamento do pop-up é o canto inferior esquerdo do Popup.

A ilustração a seguir demonstra que, quando Placement está Left e a Popup encontra a borda esquerda da tela, a origem do destino é o canto superior direito da área de destino, e o ponto de alinhamento do pop-up é o canto superior esquerdo do Popup.

A ilustração a seguir demonstra que quando Placement está Right e a Popup encontra a borda direita da tela, a origem do destino é o canto superior esquerdo da área de destino e o ponto de alinhamento do pop-up é o canto superior direito do Popup.

A ilustração a seguir demonstra que quando Placement está Top e a Popup encontra a borda superior da tela, a origem do alvo é o canto inferior esquerdo da área de destino, e o ponto de alinhamento do pop-up é o canto superior esquerdo do Popup.

A ilustração a seguir demonstra que quando Placement está Mouse e Popup atinge a borda inferior da tela, a origem do destino é o canto superior esquerdo da área de destino (os contornos do ponteiro do mouse) e o ponto de alinhamento pop-up é o canto inferior esquerdo do Popup.

Personalizando o posicionamento pop-up

Você pode personalizar a origem alvo e o ponto de alinhamento do pop-up definindo a Placement propriedade como Custom. Em seguida, defina um CustomPopupPlacementCallback delegado que retorna um conjunto de possíveis pontos de posicionamento e eixos primários (em ordem de preferência) para o Popup. O ponto que mostra a maior parte do Popup é selecionado. A posição da Popup será ajustada automaticamente se Popup estiver oculta pela borda da tela. Para obter um exemplo, consulte Especificar uma posição pop-up personalizada.

Consulte também

• Exemplo de posicionamento de pop-up