Windows Dev Center

Idioma: HTML | XAML

Animando sequências de arrastar e soltar (XAML)

Use animações de arrastar e soltar quando os usuários movem objetos com os dedos ou dispositivos de entrada, como um mouse ou uma caneta. As ações comuns de arrastar e soltar incluem mover um único item em uma lista e soltar um item sobre outro.

Observação  Use as animações de arrastar e soltar somente quando o usuário estiver movendo o objeto. Para mover o objeto em outros casos, use animações de reposição.

Este conjunto de animações consiste nas seguintes APIs:

O suporte de arrastar padrão está disponível em ListView e em GridView para XAML. As animações de arrastar e soltar serão inseridas para suporte de itens se você usá-las na sua interface do usuário e você não precisará fazer nada para obter essas animações. Porém, essas animações serão úteis se você estender o recurso de arrastar e soltar para outros controles, particularmente para os seus próprios controles personalizados.

Início de arraste

Cada sequência de animação de arrastar e soltar começa com um início de arraste (DragItemThemeAnimation), mostrado quando o usuário começa a arrastar um objeto.

A animação modifica a aparência da origem do arraste (o objeto sendo arrastado) e de um ou mais objetos afetados. Um objeto afetado é um objeto que poderia mudar de posição em resposta a uma sequência de arrastar e soltar. Por exemplo, ao reordenar uma lista, todos os itens da lista que não sejam a origem do arraste são objetos afetados porque a posição deles na lista pode mudar. Os itens afetados são animados para mostrar ao usuário como esses itens mudariam de posição em resposta à ação atual. Observe que nem todas as origens de arraste têm objetos afetados.

As imagens a seguir mostram a relação entre a origem de arraste e os objetos afetados na animação de início de arraste. A primeira imagem mostra o objeto de arraste e seus objetos adjacentes antes de o usuário começar a arrastar o objeto.

Quatro objetos do mesmo tamanho, um rotulado como origem de arraste

Quando o usuário seleciona o objeto e começa a arrastá-lo, o objeto arrastado fica maior e os objetos afetados ficam menores.

Quatro objetos, com a origem de arraste em tamanho maior e os outros três objetos afetados em tamanho um pouco menor

A imagem a seguir mostra o caso em que os objetos adjacentes não são afetados.

Quatro objetos, com a origem de arraste em tamanho maior e os outros três inalterados em comparação com o tamanho inicial

Término de arraste

Cada sequência de animação de arrastar e soltar acaba com a animação de término de arraste (DropTargetItemThemeAnimation), mostrada quando o usuário solta um objeto arrastado. A animação de término de arraste só é usada depois que a animação de início de arraste é usada primeiro.

A animação de término de arraste insere a origem de arraste (o objeto que está sendo arrastado) na sua posição final. Ao mesmo tempo, ela também remove as mudanças visuais na origem de arraste e os itens afetados que foram aplicados pela animação de início de arraste. Os objetos afetados em uma chamada a DropTargetItemThemeAnimation sempre são os mesmos usados na chamada a DragItemThemeAnimation.

As imagens a seguir mostram a relação entre a origem de arraste e seus objetos afetados na animação de término de arraste. A primeira imagem mostra um objeto antes de o usuário soltá-lo em um conjunto de objetos afetados. A origem de arraste é mostrada em tamanho maior do que o normal e é deslocada da lista. Os objetos afetados são mostrados em tamanho menor do que o normal.

Quatro objetos, com a origem de arraste em tamanho maior e deslocados do plano dos outros três objetos afetados, com tamanho um pouco menor

Esta imagem mostra o caso em que o objeto solto não afeta outros objetos. A origem de arraste está maior novamente e deslocada dos outros objetos, mas eles são mostrados em tamanho normal.

Quatro objetos, com a origem de arraste em tamanho maior e deslocados dos outros três objetos, que estão inalterados em comparação com o tamanho inicial

Depois que o usuário solta a origem de arraste, todos os objetos voltam ao tamanho normal, reposicionados se necessário.

Quatro objetos do mesmo tamanho, um rotulado como origem de arraste

Arraste intermediário na entrada

Use a animação de arraste intermediário na entrada (DragOverThemeAnimation) quando o usuário arrasta um objeto (origem do arraste) no meio de dois outros objetos entre os quais ele pode ser solto. Essa animação mostra ao usuário os objetos afetados que se separarão para dar espaço à origem de arraste se o usuário optar por soltar a origem de arraste nessa posição.

As imagens a seguir mostram o movimento dos objetos afetados em resposta à origem de arraste. A primeira imagem mostra os objetos afetados antes de a origem de arraste disparar a animação de arraste intermediário na entrada.

Objeto de origem de arraste sobrepondo dois objetos afetados que são mostrados em suas posições originais

Na imagem a seguir, a animação de arraste intermediário na entrada fez com que fossem separados os dois objetos em cada um dos lados da origem de arraste.

Objeto de origem de arraste sobrepondo dois objetos afetados que foram separados para mostrar o local de soltar

Animações baseadas em arrastar e soltar no comportamento de controle do Windows Runtime padrão

Manipulação de eventos para arrastar e soltar personalizado

Há um suporte de evento de entrada de elemento base para arrastar e soltar, e você precisará manipular esses eventos para definir um comportamento de arrastar e soltar em um controle personalizado. Para saber mais, veja UIElement.Drop.

Outros recursos

Baixe o exemplo de conceitos básicos de XAML ListView e GridView e exemplo de interativa e personalização de XAML ListView e GridView; execute os exemplos para experimentar as animações de ListView e GridView.

Veja Diretrizes e lista de verificação para animações de arrastar e soltar 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
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation
UIElement.Drop event
ListViewItem
GridViewItem

 

 

Mostrar:
© 2015 Microsoft