Idioma: HTML | XAML

Animando transições de conteúdo e entrada (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)

Applies to Windows and Windows Phone

Use animações de transição de conteúdo para mudar o conteúdo de uma área da tela, sem modificar o contêiner ou o plano de fundo. O conteúdo novo que chega à tela desliza a partir de um deslocamento e aparece gradualmente (fade in). Caso haja um conteúdo para ser substituído, o conteúdo antigo desaparecerá gradualmente (fade out) à medida que o novo conteúdo é recebido. Você pode usar essa técnica no caso de navegação em tela dividida, em que o usuário vê uma lista e um modo de exibição detalhado. Animações de transição de conteúdo também trazem conteúdo na exibição que é carregada depois do restante de uma página, quando o usuário faz transições entre páginas.

Esta animação é executada pela classe ContentThemeTransition.

A biblioteca de animação XAML não tem um conceito de uma animação que se aplica à página inteira quando a página é carregada, mas ela tem uma transição separada (EntranceThemeTransition) que pode se aplicar ao conteúdo quando a página que contém o conteúdo é carregada pela primeira vez e essa parte tem o conteúdo renderizado. Em outras palavras, não há um equivalente direto para a enterPage, mas aplicar EntranceThemeTransition ao conteúdo dentro de uma página aborda o mesmo cenário e ativa a mesma condição. No XAML, um elemento de conteúdo pode ter um ContentThemeTransition e um EntranceThemeTransition definidos como parte do mesma TransitionCollection aplicada à propriedade Transition. Dessa forma, quando o conteúdo for carregado pela primeira vez, ele terá um feedback visual diferente do que quando for alterado subsequentemente na página, mas a página continuará igual.

Animações de conteúdo e entrada no comportamento de controle do Windows Runtime padrão

Para o conteúdo que permanece no lugar, mas onde pode haver mudanças feitas pelo usuário ou por dados, você também deve aplicar as animações AddDeleteThemeTransition e ReorderThemeTransition onde aplicar ContentThemeTransition.

Observação  A partir do Windows 8.1, as transições de tema e as transições de estado visual podem ser desabilitadas pelo sistema, para fazer jus à configuração da Central de Facilidade de Acesso que permite a um usuário desligar as animações desnecessárias (quando possível) em aplicativos do Windows.

Outros recursos

O exemplo de animações de personalidade XAML mostra como usar o ContentThemeTransition aplicado à propriedade ChildrenTransitions de um Grid. O exemplo mostra uma exibição de detalhes mestre dos dados, onde o detalhe é exibido em uma célula da grade do lado direito, e a animação é aplicada quando um novo item é selecionado entre os itens do lado esquerdo da grade. (Este é o cenário 2 do exemplo.)

Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de transição de página e Diretrizes e lista de verificação para animações de transição de conteúdo.

Tópicos relacionados

Animando sua interface do usuário
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
Exemplo de animações de personalidade XAML
Animando adições e exclusões de lista
Adicionando controles ListView e GridView
ContentThemeTransition
EntranceThemeTransition

 

 

Mostrar:
© 2014 Microsoft