Animando interface do usuário pop-up (aplicativos da Windows Store que usam C#/VB/C++ e XAML)

Use animações pop-up para mostrar e ocultar a interface do usuário pop-up, que inclui menus de contexto e submenus. Os elementos pop-up são contêineres que aparecem sobre o conteúdo do aplicativo e desaparecem quando o usuário toca ou clica fora do elemento pop-up. Essas animações geralmente são usadas em controles personalizados; se você usar elementos Popup, Flyout e MenuFlyout no seu XAML, elas já terão animações inseridas e você não precisará adicionar qualquer comportamento aqui.

As animações relevantes para o comportamento pop-up são: PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition.

As animações pop-up incluem uma translação, que é um movimento vertical partindo de uma posição inicial para a posição final à medida que o elemento pop-up faz fade in ou fade out. A distância e a direção da translação são especificadas pelo aplicativo. Na maioria dos casos, a translação deve ser de 50 pixels, movendo-se em uma direção para cima. No entanto, quando o elemento pop-up é exibido abaixo do elemento de interface do usuário que disparou o pop-up, a conversão deve ter 50 pixels, movimentando-se para baixo. Por exemplo, essa conversão para baixo seria usada com um submenu disparado de uma barra de navegação ou de um cabeçalho de aplicativo. O objetivo é oferecer ao usuário um link visual entre o elemento pop-up e seu elemento de disparo.

Animações de pop-up no comportamento de controle do Windows Runtime padrão

O código padrão para Popup, Flyout e MenuFlyout não usa as animações, esses tipos têm suas próprias animações inseridas que existem fora dos modelos e estilos. Popup tem uma ChildTransitions propriedade que começa como null e, se você desejar, poderá adicionar PopupThemeTransition. O motivo pelo qual você poderá fazer isso é para ajustar FromHorizontalOffset ou FromVerticalOffset.

Outros recursos

O o modelo de animações de personalidade XAML exibe como usar PopInThemeAnimation e PopOutThemeAnimation definidos em um Storyboard e invocado explicitamente. (Este é o cenário 1 do exemplo.)

Consulte Diretrizes e lista de verificação para animações de interface do usuário pop-up para ver as práticas recomendadas de design no uso dessas animações.

Tópicos relacionados

Animando sua interface do usuário
Animando interface do usuário de borda
Guia de início rápido: animando sua interface do usuário
Exemplo de animações de personalidade XAML
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.