Pop-up

O Popup controlo permite exibir conteúdo numa janela separada que flutua sobre a janela atual da aplicação em relação a um elemento designado ou coordenada de ecrã.

A ilustração a seguir mostra um controle Popup posicionado em relação a um Button que é seu pai:

Um controlo popup posicionado em relação a um controlo de botão.

A tabela seguinte lista tarefas comuns para trabalhar com o controlo Popup:

Title Description
Animar um pop-up Aprenda a animar um pop-up usando storyboards e animações.
Comportamento de Colocação de Popups Aprenda sobre os diferentes modos de colocação e como posicionar um pop-up em relação a elementos ou coordenadas do ecrã.
Especifique uma Posição Popup Personalizada Aprenda a definir uma lógica de colocação personalizada para posicionamento preciso dos popups.

O que é um Popup?

Um Popup controlo mostra o conteúdo numa janela separada em relação a um elemento ou ponto no ecrã. Quando o Popup é visível, a IsOpen propriedade é definida como true.

Observação

A Popup não se abre automaticamente quando o cursor passa sobre o objeto pai. Se quiser que Popup abra automaticamente, use a classe ToolTip ou ToolTipService. Para mais informações, consulte a Dica de Ferramenta.

Criar um pop-up

O exemplo seguinte define um Popup controlo como o elemento filho de um ToggleButton controlo. Como a ToggleButton pode ter apenas um elemento filho, este exemplo coloca o texto para os ToggleButton e os Popup controlos num StackPanel. A propriedade IsOpen do pop-up utiliza a ligação de dados para se sincronizar com a propriedade IsChecked do botão. Quando seleciona o botão, o pop-up abre ou fecha automaticamente. O conteúdo é exibido numa janela separada que flutua sobre a janela da aplicação perto do botão.

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

Controlos que implementam um Popup

Podes integrar Popup controlos noutros controlos. Os seguintes controlos implementam um pop-up para usos específicos:

  • ToolTip. Utiliza um popup para mostrar ajuda contextual quando os utilizadores passam o rato por cima ou focam um elemento. Para mais informações, consulte a Dica de Ferramenta.

  • ContextMenu. Utiliza um pop-up para mostrar opções de comandos para um elemento, normalmente quando os utilizadores clicam com o botão direito. Para mais informações, consulte o MenuContextual.

  • ComboBox. Usa um pop-up para mostrar ou esconder a lista suspensa de itens selecionáveis. Para mais informações, consulte ComboBox.

Estilos e modelos

O Popup controlo oferece propriedades de estilo XAML que pode usar para personalizar a sua aparência. O controlo não define um template padrão com partes do template ou estados visuais, mas podes personalizar o seu comportamento. Para mais informações, consulte a secção de comportamento e aparência do Popup .

Propriedade de conteúdo

Este controlo utiliza a Child propriedade como sua propriedade de conteúdo. A Child propriedade representa o único elemento filho que a janela pop-up apresenta.

Partes

Este controlo não define nenhuma parte do modelo.

Estados visuais

Este controlo não define quaisquer estados visuais.

O Popup controlo oferece funcionalidades que pode usar para personalizar o seu comportamento e aparência. Por exemplo, podes definir o comportamento de abrir e fechar, animação, opacidade e efeitos bitmap, e Popup tamanho e posição.

Comportamento aberto e fechado

Um Popup controlo apresenta o seu conteúdo quando a IsOpen propriedade é definida para true. Por defeito, Popup mantém-se aberto até que a IsOpen propriedade seja definida para false. No entanto, pode alterar o comportamento padrão definindo a StaysOpen propriedade para false. Quando defines esta propriedade para false, a Popup janela de conteúdo tem captura do rato. Perde a captura do rato Popup e a janela fecha-se quando um evento de rato ocorre fora da janela Popup.

Os eventos Opened e Closed são gerados quando a janela de conteúdo Popup abre ou fecha.

Animação

O controlo Popup tem suporte incorporado para as animações tipicamente associadas a comportamentos como aparecer gradualmente (fade-in) e deslizar para dentro (slide-in). Pode ativar estas animações definindo a propriedade PopupAnimation como um valor de enumeração PopupAnimation. Para Popup que as animações funcionem corretamente, tens de definir a AllowsTransparency propriedade para true.

Podes também aplicar animações como Storyboard no controlo Popup.

Opacidade e efeitos de bitmap

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

O conteúdo de um Popup não herda efeitos bitmap, como DropShadowBitmapEffect, que são aplicados diretamente ao controlo Popup ou a qualquer outro elemento na janela pai. Para que efeitos bitmap apareçam no conteúdo de um Popup, deve definir o efeito bitmap diretamente no seu conteúdo. Por exemplo, se o filho de a Popup for um StackPanel, defina o efeito bitmap no StackPanel.

Por defeito, a Popup ajusta-se automaticamente ao seu conteúdo. Quando ocorre autodimensionamento, alguns efeitos bitmap podem estar ocultos porque o tamanho padrão da área do ecrã definido para o Popup conteúdo não fornece espaço suficiente para os efeitos bitmap serem exibidos.

Popup O conteúdo também pode ficar obscurecido quando defines um RenderTransform no conteúdo. Neste cenário, algum conteúdo pode estar oculto se o conteúdo do transformado Popup se estender para além da área do original Popup. Se um efeito ou transformação de bitmap requerer mais espaço, pode definir uma margem em volta do conteúdo Popup para oferecer mais espaço para o controlo.

Definição da posição do pop-up

Pode posicionar um pop-up definindo as propriedades PlacementTarget, PlacementRectangle, Placement, HorizontalOffset e VerticalOffsetProperty. Para mais informações, consulte Comportamento de Colocação de Popups. Quando apresenta um Popup no ecrã, este não se reposiciona se o elemento pai for reposicionado.

Personalização do posicionamento do popup

** A colocação do controlo Popup pode ser personalizada especificando um conjunto de coordenadas relativas ao local de PlacementTarget onde queres que o Popup apareça.

Para personalizar a colocação, defina a Placement propriedade para Custom. Depois, define-se um CustomPopupPlacementCallback delegado que devolve um conjunto de possíveis pontos de colocação e eixos primários (por ordem de preferência) para o Popup. O ponto que mostra a maior parte do Popup é automaticamente selecionado. Como exemplo, veja Especificar uma Posição Personalizada do Popup.

Um Popup controlo não tem a sua própria árvore visual. Devolve um tamanho de 0 (zero) quando chama o método MeasureOverride. No entanto, quando defines a IsOpen propriedade para true, o controlo cria uma nova janela com a sua própria árvore visual. A nova janela contém o Child conteúdo do Popup. A largura e altura da nova janela não podem ser superiores a 75 por cento da largura ou altura do ecrã.

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

Consulte também

  • Last updated on