Drag-and-Drop Através de AllowDrop (pt-BR)

Drag-and-Drop Através de AllowDrop (pt-BR)

Nota: [artigo originalmente publicado em: http://evenancio.wordpress.com/2011/11/11/drag-and-drop-atraves-de-allowdrop/]

Uma das propriedades mais incríveis que foram introduzidas no Silverlight foi a propriedade AllowDrop. A mesma permite que você adicione suporte a Drag-and-Drop em seus controles. Para quem não sabe, Drag-and-Drop é a possibilidade de você pegar algum arquivo do seu computador e arrastar para dentro de outro local. Por exemplo, você pode ir no seu computador, selecionar um arquivo XML e arrastar para o Visual Studio que prontamente ele abrirá o seu arquivo.

Com Drag-And-Drop no Silverlight, você consegue fazer upload de arquivos ou mesmo exibir fotos e vídeos que estão em seu computador sob demanda de uma maneira bem simples. Imagine que você monte uma aplicação que leia um vídeo de sua máquina e que guarde o mesmo num drive nas nuvens (como o SkyDrive). Através da propriedade AllowDrop isto é facilmente realizável.

Por ser parte da classe UIElement isto significa que TODOS os controles visuais nativos (controls/user controls) herdam esta propriedade, assim como os eventos que controlam esta feature, que são os seguintes:

DragEnter: Ocorre no exato momento que o arquivo que está sendo arrastado alcança a fronteira onde ele pode ser solto para que o evento Drop seja acionado.

DragLeave: Ocorre quando você deixa a área onde o arquivo poderia ser solto para acionar o evento Drop.

DragOver: Ocorre enquanto você está dentro da área onde o arquivo pode ser solto.

Drop: Ocorre no momento que você solta o arquivo dentro da área do objeto a qual você habilitou o AllowDrop. Este é, certamente, o evento mais importante, visto que é aqui que fazemos a manipulação dos arquivos.

Não há mais o que dizer, o negócio é simples mesmo! Vamos ver um exemplo na prática!

<Grid x:Name="LayoutRoot" Background="AliceBlue" Height="600" Width="600">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition />
    </Grid.RowDefinitions>
 
    <TextBlock x:Name="TituloTextBlock" 
                Text="Arraste o seu arquivo aqui" 
                FontSize="20" AllowDrop="True" 
                DragLeave="NomeArquivoStackPanel_DragLeave" 
                DragOver="NomeArquivoStackPanel_DragOver" 
                Drop="NomeArquivoStackPanel_Drop"/>
        
    <TextBox x:Name="ConteudoArquivoTextBox" Grid.Row="1" 
                AcceptsReturn="True" VerticalScrollBarVisibility="Auto" 
                HorizontalScrollBarVisibility="Auto" />                      
</Grid>

Observe que nós habilitamos o AllowDrop no primeiro TextBlock, a qual está escrito “Arraste o seu arquivo aqui”. Também adicionamos, para efeitos ilustrativos, três eventos: um para o DragLeave, um para o DragOver e outro para o Drop.

O arquivo arrastado para dentro deste TextBlock irá ser exibido no TextBox logo abaixo. Vamos ver como isto é codificado?

private void NomeArquivoStackPanel_DragLeave(object sender, DragEventArgs e) {
    TituloTextBlock.Text = "Arraste o seu arquivo para o painél a esquerda";
}

private void NomeArquivoStackPanel_DragOver(object sender, DragEventArgs e) {
    TituloTextBlock.Text = "Pode soltar o arquivo.";
}

private void NomeArquivoStackPanel_Drop(object sender, DragEventArgs e) {
    TituloTextBlock.Text = "Exibição do arquivo.";

    var sb = new StringBuilder();
    var conteudo = string.Empty;

    if (e.Data == null)
        return;

    var arquivos = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

    foreach (var fi in arquivos) {
        using (var sr = fi.OpenText()) {                   
            sb.Append(string.Concat(sr.ReadToEnd(), "\n"));                   
        }              
    }

    ConteudoArquivoTextBox.Text = sb.ToString();
}

O que importa mesmo, neste nosso cenário, é o que ocorre no evento Drop. Nós declaramos um StringBuilder, obtemos os dados dos arquivos (caso você arraste mais de um) e, por fim, inserimos no TextBox destinado para este proposito!

Muito legal e muito simples, não? Agora você já sabe como criar aplicativos como o SkyDrive

Este artigo foi originalmente escrito por:

Evandro Venancio
evandro.venancio@gmail.com 
@evenancio 
http://evenancio.wordpress.com
Siverlight / Windows Phone Developer - Brazil/SP
MCP / MCTS

Leave a Comment
  • Please add 1 and 7 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
Page 1 of 1 (1 items)