Behaviors em Blend

No post anterior mostramos os behaviors em Blend e apresentamos os dois tipos de behaviors: Actions e Behaviors.

Ali, mostramos como criar uma Action, que atua sobre um elemento Target, fazendo uma ação sobre ele. Neste post, iremos mostrar os Behaviors e como podemos criar um behavior para ser usado (e reutilizado) no Blend.

Um behavior atua sobre um elemento associado e executa uma determinada ação, que não precisa ser sobre outro elemento, pode ser inclusive sobre ele mesmo. Aqui iremos mostrar como criar um behavior para movimentar elementos de uma listbox arrastando e soltando-os na nova posição.

Antes de iniciar o desenvolvimento do behavior, devemos saber como fazer o Drag & Drop em WPF. Para que um componente possa suportar Drag & Drop, devemos configurar sua propriedade AllowDrop para True. Em seguida, devemos manipular dois eventos: DragOver, que é ativado quando algo está sendo arrastado sobre o elemento e Drop, quando algo é solto sobre o elemento.

No evento DragOver devemos dizer qual é o cursor que deve ser apresentado quando há algo sendo arrastado sobre o elemento. Usamos o segundo parâmetro do manipulador de eventos, do tipo DragEventArgs, configurando a propriedade Effects com um código semelhante a este:

void ListboxDragOver(object sender, DragEventArgs e)
{
    e.Effects = DragDropEffects.Move;
}

Este código faz que o cursor de movimentação seja mostrado. No evento Drop devemos concluir a ação. Com esta pequena introdução, podemos criar nosso behavior. Desta vez, iremos iniciar nosso projeto no Blend. Crie um novo projeto WPF, do tipo WPF Application

Em seguida, vá para o menu Project e selecione Add New Item, escolhendo a opção Behavior. Dê o nome de DragListItemBehavior

O Blend cria um código semelhante ao seguinte:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Interactivity;
//using Microsoft.Expression.Interactivity.Core;

namespace WpfApplication5
{
  public class DragListItemBehavior : Behavior<DependencyObject>
  {
    public DragListItemBehavior()
    {
      // Insert code required on object creation below this point.

      //
      // The line of code below sets up the relationship between the command and the function
      // to call. Uncomment the below line and add a reference to Microsoft.Expression.Interactions
      // if you choose to use the commented out version of MyFunction and MyCommand instead of
      // creating your own implementation.
      //
      // The documentation will provide you with an example of a simple command implementation
      // you can use instead of using ActionCommand and referencing the Interactions assembly.
      //
      //this.MyCommand = new ActionCommand(this.MyFunction);
    }

    protected override void OnAttached()
    {
      base.OnAttached();

      // Insert code that you would want run when the Behavior is attached to an object.
    }

    protected override void OnDetaching()
    {
      base.OnDetaching();

      // Insert code that you would want run when the Behavior is removed from an object.
    }

    /*
    public ICommand MyCommand
    {
      get;
      private set;
    }

    private void MyFunction()
    {
      // Insert code that defines what the behavior will do when invoked.
    }
    */
  }
}

Devemos sobrescrever dois métodos, OnAttached e OnDetaching. No método OnAttached iremos fazer o processo de inicialização do nosso behavior: conectar manipuladores, configurar propriedades, etc. No método OnDetaching fazemos a limpeza do processo. Agora que já temos nosso projeto criado, podemos editar seu código no Visual Studio. No painel Projects, clique com o botão direito do mouse sobre a solução e selecione Edit in Visual Studio. O projeto é aberto no Visual Studio.

Abra o arquivo do behavior para editá-lo. Queremos que o behavior só atue sobre ListBoxes. Para isto iremos alterar seu tipo:

public class DragListItemBehavior : Behavior<ListBox>

Em seguida, devemos colocar, no método OnAttached, o código de inicialização, onde iremos configurar as propriedades e conectar os manipuladores:

protected override void OnAttached()
{
  base.OnAttached();

    AssociatedObject.AllowDrop = true;
    AssociatedObject.PreviewMouseLeftButtonDown += ListboxPreviewMouseLeftButtonDown;
    AssociatedObject.DragOver += ListboxDragOver;
    AssociatedObject.Drop += ListboxDrop;
}

Note que conectamos os eventos DragOver e Drop, mas também usamos o evento PreviewMouseLeftButtonDown. Isto é necessário por que iremos iniciar a ação de Drag & Drop quando o usuário clica num item da Listbox. O behavior tem uma propriedade AssociatedObject, que é o objeto associado ao behavior. Como definimos que esse é um Behavior, o AssociatedObject é uma Listbox. No método OnDetaching iremos fazer a limpeza:

protected override void OnDetaching()
{
  base.OnDetaching();

    AssociatedObject.PreviewMouseLeftButtonDown -= ListboxPreviewMouseLeftButtonDown;
    AssociatedObject.DragOver -= ListboxDragOver;
    AssociatedObject.Drop -= ListboxDrop;
}

Podemos então criar o código para fazer o Drag & Drop nos manipuladores dos eventos. No evento PreviewMouseLeftButtonDown obtemos o item que foi clicado e iniciamos o processo de Drag & Drop:

private object dragItem;

private void ListboxPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var parent = (ListBox)sender;
    dragItem = GetDataFromListBox(parent, e.GetPosition(parent));

    if (dragItem != null)
        DragDrop.DoDragDrop(parent, dragItem, DragDropEffects.Move);
}

O método GetDataFromListBox procura na árvore de elementos e retorna o item que foi clicado:

private object GetDataFromListBox(ListBox source, Point point)
{
    var element = source.InputHitTest(point) as UIElement;
    if (element == null) return null;
    object data = DependencyProperty.UnsetValue;
    while (data == DependencyProperty.UnsetValue)
    {
        data = source.ItemContainerGenerator.ItemFromContainer(element);
        if (data == DependencyProperty.UnsetValue)
            element = VisualTreeHelper.GetParent(element) as UIElement;
        if (element == source)
            return null;
    }
    return data != DependencyProperty.UnsetValue ? data : null;
}

No evento DragOver iremos configurar o cursor. Se o Drag & Drop é da própria Listbox, deixamos arrastar, senão configuramos o cursor para None:

private void ListboxDragOver(object sender, DragEventArgs e)
{
    e.Effects = e.Source == sender ? DragDropEffects.Move : DragDropEffects.None;
}

Finalmente, no evento Drop fazemos a movimentação do item arrastado:

private void ListboxDrop(object sender, DragEventArgs e)
{
    var parent = (ListBox)sender;
    var dropItem = GetDataFromListBox(parent, e.GetPosition(parent));
    var dragItemIndex = parent.Items.IndexOf(dragItem);
    var dropItemIndex = dropItem == null ? parent.Items.Count - 1 : parent.Items.IndexOf(dropItem);
    if (dragItemIndex != dropItemIndex)
    {
        parent.Items.RemoveAt(dragItemIndex);
        parent.Items.Insert(dropItemIndex, dragItem);
    }
}

Verificamos onde o item arrastado foi solto e, se for numa posição diferente da atual, movemos o item para uma nova posição. Nosso behavior está pronto. Compile o projeto e abra o Blend para recarregá-lo. Nosso behavior está lá e pode ser usado.

Coloque uma Listbox na janela e coloque alguns itens nela. Arraste um DragListItemBehavior para a Listbox. Execute o programa. Você pode ver que podemos arrastar os itens da Listbox para movê-los de lugar. Este behavior é reutilizável e pode ser usado em qualquer Listbox, mesmo por aqueles que não tem conhecimento de C#. Como você pode ver, um behavior pode modificar o comportamento de outros componentes, estendendo-os e trazendo novos comportamentos, sem que seja necessário criar um controle derivado.