Visão geral de Pop-up

Artigo
08/25/2010

O controle Popup fornece uma maneira para exibir conteúdo em uma janela separada que flutua sobre a janela atual do aplicativo relativa a um elemento designado ou coordenada de tela. Este tópico apresenta o controle Popup e fornece informações sobre seu uso.

Este tópico contém as seguintes seções.

O que é um pop-up?
Criando um pop-up
Controles que implementam um pop-up
Aparência e comportamento de Pop-up
Definindo a posição de pop-ups
Pop-up e a árvore visual
Tópicos relacionados

O que é um pop-up?

Um controle Popup exibe o conteúdo em uma janela separada em relação a um elemento ou ponto na tela. Quando Popup é visível, a propriedade IsOpen é definida como true.

Observação:
A Popup não em em aberto automaticamente quando o ponteiro do mouse se move sobre seu objeto pai. Se você quiser que um Popup abra automaticamente, use a classe ToolTip ou ToolTipService. Para obter mais informações, consulte ToolTip Overview.

Criando um pop-up

O exemplo a seguir mostra como definir um controle Popup que é o elemento filho de um controle Button. Como um Button pode ter apenas uma elemento filho, este exemplo coloca o texto para o Button e os controles Popup em um StackPanel. O conteúdo de Popup aparece em um controle TextBlock, que exibe seu texto em uma janela separada que flutua sobre a janela do aplicativo próxima ao controle Button relacionado.

<Button HorizontalAlignment="Left" Click="DisplayPopup" 
        Width="150" Margin="20,10,0,0">
  <StackPanel>
    <TextBlock>Display Your Popup Text</TextBlock>
    <Popup Name="myPopup">
      <TextBlock Name="myPopupText" 
                 Background="LightBlue" 
                 Foreground="Blue">
        Popup Text
      </TextBlock>
    </Popup>
  </StackPanel>
</Button>

<Button Name="ButtonForPopup" HorizontalAlignment="Left" 
        Click="CreatePopup"  
        Width="150" Margin="20,10,0,0">
  <StackPanel Name="aStackPanel">
    <TextBlock>Create Popup</TextBlock>
  </StackPanel>
</Button>

Controles que implementam um pop-up

Você pode criar controles Popup em outros controles. Os seguintes controles implementam o controle Popup para usos específicos:

ToolTip. Se desejar criar uma dica de ferramenta para um elemento, use o ToolTip e ToolTipService classes. Para obter mais informações, consulte ToolTip Overview.
ContextMenu. Se desejar criar um menu de contexto de um elemento, use o ContextMenu controle. Para obter mais informações, consulte Visão Geral do ContextMenu.
ComboBox. Se desejar criar um controle de seleção que tem uma caixa de listagem suspensa que pode ser mostrada ou oculto, use o ComboBox controle.
Expander. Se desejar criar um controle que exibe um cabeçalho de uma área recolhível que exibe o conteúdo, use o Expander controle. Para obter mais informações, consulte Visão Feral do Expander.

Aparência e comportamento de Pop-up

O controle Popup fornece funcionalidade que permite que você personalize sua aparência e comportamento. Por exemplo, você pode definir o comportamento de abertura e fechamento, animação, efeitos de opacidade e bitmap e tamanho e posição Popup.

Comportamento de Abertura e Fechamento

Um controle Popup exibe seu conteúdo quando a propriedade IsOpen é definida como true. Por padrão, Popup permanece aberta até a propriedade IsOpen ser definida como false. No entanto, você pode alterar o comportamento padrão, definindo a propriedade StaysOpen como false. Quando você definir essa propriedade como false, a janela de conteúdo Popup tem captura do mouse. O Popup perde captura de mouse e a janela fecha quando ocorre um evento do mouse para fora da janela Popup.

Os eventos Opened e Closed são gerados quando a janela de conteúdo Popup é aberta ou fechada.

Animation

The Popup controle possui suporte interno para animações que estão normalmente associadas com comportamentos como fade in e no slide. Você pode ativar essas animações, definindo o PopupAnimation propriedade para um PopupAnimation valor de enumeração. Para animações Popup funcionarem corretamente, você deve definir a propriedade AllowsTransparency como true.

Você também pode aplicar as animações, como Storyboard para o controle Popup. Para um exemplo, consulte Exemplo de Popup animado.

feitos de Opacidade e bitmap

A propriedade Opacity de um controle Popup não tem efeito no seu conteúdo. Por padrão, a janela de conteúdo Popup é opaca. Para criar um Popup transparente, defina a propriedade AllowsTransparency como true.

O conteúdo de um Popup não herda efeitos de bitmap, tais como DropShadowBitmapEffect, que você define diretamente no controle Popup ou em qualquer outro elemento na janela pai. Para efeitos de bitmap serem exibidos no conteúdo de um Popup, você deve definir o efeito de bitmap diretamente em seu conteúdo. Por exemplo, se o filho de um Popup é um StackPanel, defina o efeito de bitmap na StackPanel.

Tamanho de pop-up

Por padrão, um Popup é dimensionada automaticamente para o seu conteúdo. Quando ocorre dimensionamento automático, alguns efeitos de BITMAP podem estar ocultos porque o tamanho padrão da área da tela que está definido para o conteúdo Popup não fornece espaço suficiente para os efeitos de bitmap serem exibidos.

Conteúdo Popup também podem ficar obscuros quando você define um RenderTransform no conteúdo. Nesse cenário, alguns conteúdos podem estar ocultos se o conteúdo do Popup transformado ultrapassa a área de Popup original. Se um efeito de bitmap ou transformação requer mais espaço, você pode definir uma margem ao redor do conteúdo Popup para fornecer mais área para o controle. Para obter mais informações, que incluem um exemplo, consulte Exemplo de Popup animado.

Definindo a posição de pop-ups

Você pode posicionar um pop-up, definindo as propriedades PlacementTarget, PlacementRectangle, Placement, HorizontalOffset e VerticalOffsetProperty. Para obter mais informações, consulte Popup Placement Behavior. Quando Popup é exibida na tela, ele não reposiciona a si próprio se pai está reposicionado.

Você pode personalizar o posicionamento de um controle Popup especificando um conjunto de coordenadas que são relativas ao PlacementTarget onde você deseja que Popup seja exibido.

Para personalizar o posicionamento, defina a propriedade Placement como Custom. Then define a CustomPopupPlacementCallback delegate that returns a set of possible placement points and primary axes (in order of preference) for the Popup. O ponto que mostra a maior parte do Popup é automaticamente selecionada. Para um exemplo, consulte Como: Specify a Custom Popup Position.

Pop-up e a árvore visual

Um controle Popup não tem sua própria visual tree; em vez disso, retorna um tamanho de 0 (zero) quando o método MeasureOverride para Popup é chamado. No entanto, quando você define a propriedade IsOpen de Popup como true,uma nova janela com sua própria árvore visual é criada. A nova janela conterá o conteúdo Child de Popup. A largura e altura da nova janela não podem ser maior do que 75 por cento da largura ou altura da tela.

O controle Popup mantém uma referência ao seu conteúdo Child como um filho lógico. Quando a nova janela é criada, o conteúdo de Popup se torna um filho visual da janela e mantém o filho lógico de Popup. Por outro lado, Popup mantém o pai lógico do seu conteúdo Child.