Compartilhar via

Visão geral do pop-up

  • Artigo

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

O que é um pop-up?

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

Observação

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

Criar um pop-up

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

<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 criar Popup controles em outros controles. Os controles a seguir implementam o Popup controle para usos específicos:

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

Comportamento de abertura e fechamento

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

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

Animação

O Popup controle 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 PopupAnimation propriedade como um PopupAnimation valor de enumeração. Para Popup que as animações funcionem corretamente, você deve definir a AllowsTransparency propriedade como true.

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

Efeitos de bitmap e opacidade

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

O conteúdo de um Popup não herda efeitos de bitmap, como DropShadowBitmapEffect, que você define diretamente no Popup controle ou em qualquer outro elemento na janela pai. 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 for um PopupStackPanel, defina o efeito de bitmap no StackPanel.

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

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

Definindo a posição de pop-up

Você pode posicionar um pop-up definindo as PlacementTargetpropriedades , , , HorizontalOffsetPlacementRectanglePlacemente .VerticalOffsetProperty Para 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 do pop-up

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

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

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

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

Confira também