Drag-and-Drop Através 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. 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!

Etiquetado ,

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: