Arrastar e soltar

Arrastar e soltar é uma maneira intuitiva de transferir dados dentro de um aplicativo ou entre aplicativos na área de trabalho do Windows. Arrastar e soltar permite que o usuário transfira dados entre aplicativos ou dentro de um aplicativo usando um gesto padrão (pressionar e mover com o dedo ou pressionar e mover com um mouse ou uma caneta).

APIs importantes: propriedade CanDrag, propriedade AllowDrop

A fonte de arrastar, que é o aplicativo ou a área onde o gesto de arrastar é acionado, fornece os dados a serem transferidos preenchendo um objeto de pacote de dados que pode conter formatos de dados padrão, incluindo texto, RTF, HTML, bitmaps, itens de armazenamento ou formatos de dados personalizados. A fonte também indica o tipo de operações que suporta: copiar, mover ou vincular. Quando o ponteiro é liberado, ocorre a queda. O alvo de soltura, que é a aplicação ou área sob o ponteiro, processa o pacote de dados e devolve o tipo de operação que executou.

Durante o arrastamento e soltura, a interface de arrastamento fornece uma indicação visual do tipo de operação em curso. Esse feedback visual é inicialmente fornecido pela fonte, mas pode ser alterado pelos alvos à medida que o ponteiro se move sobre eles.

O recurso de arrastar e soltar moderno está disponível em todos os dispositivos compatíveis com UWP. Ele permite a transferência de dados entre ou dentro de qualquer tipo de aplicativo, incluindo aplicativos clássicos do Windows, embora este artigo se concentre na API XAML para arrastar e soltar modernos. Uma vez implementado, o arrastar e soltar funciona perfeitamente em todas as direções, incluindo de aplicação para aplicação, de aplicação para área de trabalho e de área de trabalho para aplicação.

Aqui está uma visão geral do que você precisa fazer para habilitar o recurso de arrastar e soltar em seu aplicativo:

1. Habilite o arrasto em um elemento definindo sua propriedade CanDrag como true.
2. Crie o pacote de dados. O sistema lida automaticamente com imagens e texto, mas para outros conteúdos, deverá manipular os eventos DragStarting e DropCompleted e usá-los para construir o seu próprio pacote de dados.
3. Habilite a operação de arrastar e soltar definindo a propriedade AllowDrop como true em todos os elementos que podem receber conteúdo arrastado.
4. Manipule o evento DragOver para informar ao sistema que tipo de operações de arrasto podem ser recebidas pelo elemento.
5. Processe o evento Drop para receber o conteúdo descartado.

Ativar arrastamento

Para habilitar o arrasto em um elemento, defina sua propriedade CanDrag como true. Isso torna o elemento — e os elementos que ele contém, no caso de coleções como ListView — arrastáveis.

Seja específico sobre o que é arrastável. Os usuários não vão querer arrastar tudo em seu aplicativo, apenas alguns itens, como imagens ou texto.

Veja como definir CanDrag.

<Image x:Name="Image" CanDrag="True" Margin="10,292,10,0" Height="338"/>

Você não precisa fazer nenhum outro trabalho para permitir o arrastamento, a menos que queira personalizar a interface do usuário (que será abordada mais adiante neste artigo). O ato de soltar requer mais alguns passos.

Construir um pacote de dados

Na maioria dos casos, o sistema construirá um pacote de dados para você. O sistema lida automaticamente com:

• Imagens
• Texto

Para outros conteúdos, você precisará manipular os eventos DragStarting e DropCompleted e usá-los para construir o seu próprio DataPackage.

Ativar queda

A marcação a seguir mostra como a propriedade AllowDrop pode ser usada para especificar que uma área do aplicativo é um destino de soltar válido para um item arrastado (a área especificada não deve ter um plano de fundo nulo, deve ser capaz de receber entrada de ponteiro e o item não pode ser descartado em nenhum lugar diferente da área especificada).

<Grid AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"
      Background="LightBlue" Margin="10,10,10,353">
    <TextBlock>Drop anywhere in the blue area</TextBlock>
</Grid>

Manipular o evento DragOver

O evento DragOver é acionado quando um usuário arrasta um item sobre a sua aplicação, mas ainda não o soltou. Neste manipulador, você precisa especificar que tipo de operações seu aplicativo suporta usando a propriedade AcceptedOperation. A cópia é a mais comum.

private void Grid_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
}

Processar o evento Drop

O evento Drop ocorre quando o usuário libera itens em uma área de descarte válida. Processe-os usando a propriedade DataView.

Para simplificar, no exemplo abaixo, vamos supor que o usuário soltou uma única foto e acessá-la diretamente. Na realidade, os usuários podem soltar vários itens de formatos variados simultaneamente. Seu aplicativo deve lidar com essa possibilidade, verificando quais tipos de arquivos foram descartados e quantos existem, e processar cada um de acordo. Você também deve considerar notificar o usuário se ele estiver tentando fazer algo que seu aplicativo não suporta.

private async void Grid_Drop(object sender, DragEventArgs e)
{
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
    {
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
        {
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;
        }
    }
}

Personalizar a interface do usuário

O sistema fornece uma interface de utilizador padrão para arrastar e soltar. No entanto, você também pode optar por personalizar várias partes da interface do usuário definindo legendas e glifos personalizados ou optando por não mostrar uma interface do usuário. Para personalizar a interface do utilizador, use a propriedade DragEventArgs.DragUIOverride.

private void Grid_DragOverCustomized(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
    e.DragUIOverride.Caption = "Custom text here"; // Sets custom UI text
    // Sets a custom glyph
    e.DragUIOverride.SetContentFromBitmapImage(
        new BitmapImage(
            new Uri("ms-appx:///Assets/CustomImage.png", UriKind.RelativeOrAbsolute)));
    e.DragUIOverride.IsCaptionVisible = true; // Sets if the caption is visible
    e.DragUIOverride.IsContentVisible = true; // Sets if the dragged content is visible
    e.DragUIOverride.IsGlyphVisible = true; // Sets if the glyph is visibile
}

Abrir um menu de contexto num item que pode arrastar com o toque

Ao usar o toque, arrastar um UIElement e abrir o seu menu de contexto partilham gestos de toque semelhantes; cada um começa com um pressionar e segurar. Veja como o sistema desambigua entre as duas ações para elementos em seu aplicativo que suportam ambos:

• Se um usuário pressionar e segurar um item e começar a arrastá-lo dentro de 500 milissegundos, o item será arrastado e o menu de contexto não será mostrado.
• Se o usuário pressionar e segurar, mas não arrastar dentro de 500 milissegundos, o menu de contexto será aberto.
• Depois que o menu de contexto estiver aberto, se o usuário tentar arrastar o item (sem levantar o dedo), o menu de contexto será descartado e o arrasto será iniciado.

Designar um item em um ListView ou GridView como uma pasta

Você pode especificar um ListViewItem ou GridViewItem como uma pasta. Isso é particularmente útil para cenários TreeView e File Explorer. Para fazer isso, defina explicitamente a propriedade AllowDrop como True nesse item.

O sistema mostrará automaticamente as animações apropriadas para mover para uma pasta em contraste com um item que não é uma pasta. O código do aplicativo deve continuar a manipular o evento Drop no item de pasta (bem como no item que não é pasta) para atualizar a fonte de dados e adicionar o item descartado à pasta de destino.

Habilitar a reordenação de arrastar e soltar em ListViews

ListViewsuporte à reordenação baseada em arrasto pronta para uso, usando uma API muito semelhante à CanDrop API descrita neste artigo. No mínimo, você adiciona as propriedades AllowDrop e CanReorderItems.

Consulte ListViewBase.CanReorderItems para obter mais informações.

Implementando o recurso de arrastar e soltar personalizado

A classe UIElement faz a maior parte do trabalho de implementação de arrastar e soltar para você. Mas se desejar, você pode implementar sua própria versão usando as APIs abaixo.

Consulte também

• Comunicação entre aplicativos
• PermitirSoltar
• CanDrag
• arrastar sobre
• OperaçãoAceite
• Vista de Dados
• DragUIOverride
• Queda
• IsDragSource
• Início da Arrastagem
• EntregaConcluída