Implementando Drag and Drop em aplicações Silverlight

Neste artigo, mostrarei uma das maneiras de deixar o usuário manipular a interface de sua aplicação Silverlight: o recurso Drag and Drop (arrastar e soltar).

por Lucas Defacio

Introdução

O termo RIA (Rich Interface Application) está se tornando muito usado entre desenvolvedores. Construir uma aplicação que seja rica e possua uma interação com o usuário não é tão complicado quanto parece. Para isto, é necessário alinhar informações úteis (para o público alvo) com uma interface que seja atraente. Quando damos ao usuário o poder de manipular a interface de nossa aplicação, é criado um vínculo “Humano-Computador” muito forte.

Neste artigo, mostrarei uma das maneiras de deixar o usuário manipular a interface de sua aplicação Silverlight: o recurso Drag and Drop (arrastar e soltar).

Construindo o layout

Em nossa aplicação Silverlight, iremos criar um objeto do tipo Rectangle e atribuir a propriedade x:Name como MyRectangle. Dentro deste objeto, devemos adicionar as propriedades RenderTransform e TranslateTransform como apresentado no Quadro 1.

<Grid x:Name="LayoutRoot" Background="White">

       <Rectangle x:Name="MyRectangle" Width="100" Height="100"    

        Fill="Gray" VerticalAlignment="Top" HorizontalAlignment="Left">

          <Rectangle.RenderTransform>

                <TranslateTransform       

                x:Name="MyRectangleTranslateTransform" X="0" Y="0" />

            </Rectangle.RenderTransform>

        </Rectangle>

    </Grid>

Quadro 1: Layout de nossa aplicação Silverlight.

Programando os eventos do mouse

Com o layout criado, criaremos os métodos que serão chamados pelos eventos do mouse, conforme o Quadro 2.

public Page()

        {

            InitializeComponent();

            MyRectangle.MouseLeftButtonDown +=

                new MouseButtonEventHandler(MyRectangle_MouseLeftButtonDown);

            MyRectangle.MouseLeftButtonUp +=

                new MouseButtonEventHandler(MyRectangle_MouseLeftButtonUp);

            MyRectangle.MouseMove +=

                new MouseEventHandler(MyRectangle_MouseMove);

        }

        void MyRectangle_MouseMove(object sender, MouseEventArgs e)

        {

           

        }

        void MyRectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

        }

        void MyRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

           

        }

Quadro 2: Criando os métodos chamados por eventos do mouse.

Agora, criaremos uma variável do tipo Boolean e uma do tipo Point (Quadro 3).  Com nosso Boolean identificaremos se o usuário está com o botão esquerdo do mouse clicado sobre o nosso objeto. Com o Point vamos armazenar a posição do mouse.

        private Boolean blnStatusMouse = false;

        private Point ClickPosition;

Quadro 3: Criando as variáveis do tipo Boolean e Point.

No método MyRectangle_MouseLeftButtonDown, capturamos a posição clicada do mouse relativa ao nosso objeto e armazenamos em nossa variável Point. Com o método CaptureMouse() capturamos a posição atual do mouse. Por último, atribuiremos o valor de nosso Boolean como true. O código está representado no Quadro 4.

        void MyRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            ClickPosition = e.GetPosition(sender as UIElement);

            MyRectangle.CaptureMouse();

            blnStatusMouse = true;

        }

Quadro 4: Método MyRectanlge_MouseLeftButtonDown.

No método MyRectangle_MouseLeftButtonUp, atribuimos o valor do Boolean como false e utilizamos o método ReleaseMouseCapture() para deixar de capturar a posição do mouse. O Quadro 5 demonstra este método.

        void MyRectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            MyRectangle.ReleaseMouseCapture();

            blnStatusMouse = false;

        }

Quadro 5: Método MyRectangle_MouseLeftButtonUp.

Por último, no método MyRectangle_MouseMove verificamos o valor de nosso Boolean. Caso seja true, movimentamos nosso objeto. Para isto, atribuimos a posição do nosso retângulo menos a posição armazenada em nosso Point em nossa propriedade MyRectangleTranslateTransform (children de nosso retângulo). Faremos este procimento para o eixo X e Y. O código está representado no Quadro 6.

        void MyRectangle_MouseMove(object sender, MouseEventArgs e)

        {

            if (blnStatusMouse)

            {

                this.MyRectangleTranslateTransform.X =  

                e.GetPosition(this).X - ClickPosition.X;

               

               this.MyRectangleTranslateTransform.Y =

               e.GetPosition(this).Y - ClickPosition.Y;

            }

        }

Quadro 6: Método MyRectangle_MouseMove.

A Figura 1 apresenta o resultado deste artigo.

Figura 1: Resultado de nossa aplicação.

Conclusão
Quando permitimos que o usuário manipule a interface de nossa aplicação, conseguimos criar uma interação Humano-Computador muito interessante. O recurso Drag and Drop pode diferenciar a sua aplicação das do seus concorrentes. Isto é muito valioso em um cenário muito concorrido como o que vivenciamos na atual Web.