Windows Dev Center

Idioma: HTML | XAML

Animando alterações em itens de lista (XAML)

Use animações de lista para mostrar as alterações em uma coleção de itens semelhantes. Isso inclui adicionar e excluir animações. Estas animações proporcionam uma transição visual suave para a entrada ou saída dos novos itens, tornando o processo óbvio para o usuário. Durante uma animação de "adição", os itens existentes deslizam para fora do caminho para abrir espaço para o novo item. Então, o novo item desaparece no espaço, sendo subindo como normalmente. Uma animação de exclusão faz o contrário.

A animação para adicionar ou excluir é AddDeleteThemeTransition. A animação para itens sendo reposicionados em uma lista é ReorderThemeTransition. Geralmente, você coloca o AddDeleteThemeTransition e o ReorderThemeTransition no mesmo conjunto de animação.

Animações de adição/exclusão de lista

Use animações de lista para mostrar a inserção ou exclusão de itens em uma coleção de itens semelhantes. Essas animações são diferentes das animações de adição/exclusão da lista de pesquisa, pois as animações de pesquisa são relativamente mais rápidas para acomodarem resultados de pesquisa de filtragem enquanto o usuário insere o termo de pesquisa.

Também há um ReorderThemeTransition separado que você aplica se um item mudar de posição em uma lista. Isso é animado de forma diferente do que excluir um item e adicioná-lo em um novo local com as animações de adição/exclusão associadas.

Animações de adição/exclusão de lista de pesquisa

Se você trabalhar em JavaScript, poderá usar animações separadas especificamente projetadas para adicionar ou excluir itens em uma lista de itens de pesquisa. C#, C++ e Microsoft Visual Basic não fornecem essas outras animações. Em vez disso, use AddDeleteThemeTransition para listas de pesquisa e de não pesquisa.

Animações de lista no comportamento de controle do Windows Runtime padrão

Outros recursos

Veja Diretrizes e lista de verificação para animações de adição e exclusão para obter as práticas recomendadas de design no uso dessas animações.

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
Adicionando controles ListView e GridView
AddDeleteThemeTransition
ReorderThemeTransition
ListView
GridView
ListViewItem
GridViewItem

 

 

Mostrar:
© 2015 Microsoft