Partilhar via

Visão geral do pop-up

  • Artigo

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

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 o Popup estiver visível, a propriedade IsOpen será definida como true.

Observação

Um Popup não abre automaticamente quando o ponteiro do mouse se move sobre o objeto pai. Se quiser que um Popup seja aberto automaticamente, use a classe ToolTip ou ToolTipService. Para obter mais informações, consulte Visão Geral da Dica de Ferramenta.

Criando um pop-up

O exemplo a seguir mostra como definir um controle Popup que é o elemento filho de um controle ToggleButton. Como um ToggleButton pode ter apenas um elemento filho, este exemplo coloca os textos dos controlos ToggleButton e Popup num StackPanel. O conteúdo do Popup é exibido em uma janela separada que flutua sobre a janela do aplicativo perto do controle de ToggleButton relacionado.

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

Controles que implementam um pop-up

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

  • ToolTip. Se você quiser criar uma dica de ferramenta para um elemento, use as classes ToolTip e ToolTipService. Para mais informações, consulte Visão geral da dica de ferramenta.

  • ContextMenu. Se você quiser criar um menu de contexto para um elemento, use o controle ContextMenu. Para obter mais informações, consulte Visão geral do ContextMenu.

  • ComboBox. Se você quiser criar um controle de seleção que tenha uma caixa de listagem suspensa que pode ser mostrada ou ocultada, use o controle ComboBox.

  • Expander. Se você quiser criar um controle que exibe um cabeçalho com uma área recolhível que exibe conteúdo, use o controle Expander. Para mais informações, consulte a Visão Geral do Expander .

O controle Popup fornece funcionalidade que permite personalizar seu comportamento e aparência. Por exemplo, você pode definir o comportamento de abrir e fechar, animação, opacidade e efeitos de bitmap e Popup tamanho e posição.

Comportamento de abrir e fechar

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

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

Animação

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

Você também pode aplicar animações como Storyboard ao controle Popup.

Efeitos de opacidade e mapa de bits

A propriedade Opacity para um controlo Popup não tem efeito sobre o respetivo conteúdo. Por padrão, a janela de conteúdo Popup é opaca. Para criar um Popuptransparente, defina a propriedade AllowsTransparency como true.

O conteúdo de um Popup não herda efeitos de bitmap, como DropShadowBitmapEffect, que se definem diretamente no controlo Popup ou em qualquer outro elemento da janela principal. Para que os efeitos de bitmap apareçam 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 for um StackPanel, aplique o efeito de bitmap no StackPanel.

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

Popup conteúdo também pode ser obscurecido quando defines um RenderTransform no conteúdo. Nesse cenário, algum conteúdo pode ser oculto se o conteúdo do Popup transformado se estende além da área do Popuporiginal. Se um efeito de bitmap ou transformação exigir mais espaço, você pode definir uma margem ao redor do conteúdo Popup para fornecer mais área para o controle.

Definindo a posição do pop-up

Você pode posicionar um pop-up definindo as propriedades PlacementTarget, PlacementRectangle, Placement, HorizontalOffsete VerticalOffsetProperty. Para obter mais informações, consulte Comportamento de posicionamento de pop-up. Quando Popup é exibido na tela, ele não se reposiciona se seu pai for reposicionado.

Personalizando o posicionamento de pop-ups

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

Para personalizar o posicionamento, defina a propriedade Placement como Custom. Em seguida, defina um CustomPopupPlacementCallback delegado que retorne 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 automaticamente. Para um exemplo, veja Especificar uma posição pop-up personalizada.

Um controle Popup não tem sua própria árvore visual; Em vez disso, ele 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 contém o conteúdo Child de Popup. A largura e a altura da nova janela não podem ser maiores do que 75% 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 passa a ser filho visual da janela e continua a ser o filho lógico de Popup. Por outro lado, Popup continua a ser o pai lógico do seu conteúdo Child.

Ver também