Idioma: HTML | XAML

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

Applies to Windows and Windows Phone

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