January 2015 – Code musings in C#

WPF Behaviors: adding mouse-event adorners

This is part 3 of the WPF drag & drop exploration. Part 2 can be found here.

Let’s recap what we have right now. We have a sample application that allow us to freely drag items across an area. Now, since there might be multiple items stacking on top of each other, we want the user to be sure which item will be moved. For that, we want to add a visual indication on the item. This kind of stuff is called an adorner in WPF.

Now, you will see many samples of code-driven adorners implementation. But we don’t want to break the MVVM pattern, and to do that, we want the adorner to be implemented in the view.

So we’ll create an Adorner that allows us to use a DataTemplate. For that, I’ll just copy some existing code :

public class TemplateAdorner : Adorner
{
    private readonly FrameworkElement frameworkElementAdorner;

    public TemplateAdorner(UIElement adornedElement, FrameworkElement frameworkElementAdorner) : base(adornedElement)
    {
        this.frameworkElementAdorner = frameworkElementAdorner;
        this.AddVisualChild(frameworkElementAdorner);
        this.AddLogicalChild(frameworkElementAdorner);
    }

    protected override int VisualChildrenCount { get { return 1; } }

    protected override Size ArrangeOverride(Size finalSize)
    {
        this.frameworkElementAdorner.Arrange(new Rect(new Point(0, 0), finalSize));
        return finalSize;
    }

    protected override Visual GetVisualChild(int index) { return this.frameworkElementAdorner; }

    protected override Size MeasureOverride(Size constraint)
    {
        this.frameworkElementAdorner.Width = constraint.Width;
        this.frameworkElementAdorner.Height = constraint.Height;

        return constraint;
    }
}

public class TemplateAdorner : Adorner

{

private readonly FrameworkElement frameworkElementAdorner;

public TemplateAdorner(UIElement adornedElement, FrameworkElement frameworkElementAdorner) : base(adornedElement)

{

this.frameworkElementAdorner = frameworkElementAdorner;

this.AddVisualChild(frameworkElementAdorner);

this.AddLogicalChild(frameworkElementAdorner);

}

protected override int VisualChildrenCount { get { return 1; } }

protected override Size ArrangeOverride(Size finalSize)

{

this.frameworkElementAdorner.Arrange(new Rect(new Point(0, 0), finalSize));

return finalSize;

}

protected override Visual GetVisualChild(int index) { return this.frameworkElementAdorner; }

protected override Size MeasureOverride(Size constraint)

{

this.frameworkElementAdorner.Width = constraint.Width;

this.frameworkElementAdorner.Height = constraint.Height;

return constraint;

}

We can now use this adorner in the behavior.

public class DragOnCanvasBehavior : Behavior<DependencyObject>
{
    // the mouse over adorner template property
    public static readonly DependencyProperty MouseOverAdornerTemplateProperty =
        DependencyProperty.Register(
            "MouseOverAdornerTemplate",
            typeof(DataTemplate),
            typeof(DragOnCanvasBehavior),
            new PropertyMetadata(new PropertyChangedCallback((d, o) =>
            {
                if (((DragOnCanvasBehavior)d).mouseOverAdornerControl != null)
                {
                    ((DragOnCanvasBehavior)d).mouseOverAdornerControl.ContentTemplate = (DataTemplate)o.NewValue;
                }
            })));
    
    // the template
    public DataTemplate MouseOverAdornerTemplate
    {
        get { return (DataTemplate)this.GetValue(MouseOverAdornerTemplateProperty); }
        set { this.SetValue(MouseOverAdornerTemplateProperty, value); }
    }

    // stores the adorner instance
    private TemplateAdorner mouseOverAdorner;

    // stores the visual control
    private ContentControl mouseOverAdornerControl;

    // whether the adorner is initialized
    private bool mouseOverAdornerInitialized = false;

    // whether the adorner is shown
    private bool mouseOverAdornerShown = false;

    // the commands to hide/show the adorner
    public ICommand HideMouseOverAdorner { get; private set; }
    public ICommand ShowMouseOverAdorner { get; private set; }

    // binds the commands with the methods
    public DragOnCanvasBehavior()
    {
        // [...]

        this.ShowMouseOverAdorner = new RelayCommand((o) =>
        {
            this.OnShowMouseOverAdorner();
        });

        this.HideMouseOverAdorner = new RelayCommand((o) =>
        {
            this.OnHideMouseOverAdorner();
        });
    }

    // shows the adorner
    private void OnShowMouseOverAdorner()
    {
        if (this.mouseOverAdornerShown)
        {
            return;
        }

        this.InitializeAdorner(this.MouseOverAdornerTemplate, ref this.mouseOverAdornerControl, ref this.mouseOverAdorner, ref this.mouseOverAdornerInitialized);

        this.mouseOverAdornerControl.Visibility = Visibility.Visible;
        this.mouseOverAdornerShown = true;
    }

    // hides the adorner
    private void OnHideMouseOverAdorner()
    {
        this.mouseOverAdornerControl.Visibility = Visibility.Collapsed;
        this.mouseOverAdornerShown = false;
    }

    // initializes an adorner (we'll need to reuse this later on)
    private void InitializeAdorner(DataTemplate template, ref ContentControl control, ref TemplateAdorner adorner, ref bool initialized)
    {
        if (initialized)
        {
            return;
        }

        if (template != null)
        {
            AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(this.AssociatedObject as UIElement);

            if (adornerLayer == null)
            {
                throw new NullReferenceException(string.Format("No adorner found in attached object: {0}", this.AssociatedObject));
            }

            control = new ContentControl();
            adornerLayer.Add(adorner = new TemplateAdorner(this.AssociatedObject as UIElement, control));
            control.Content = template.LoadContent();

            Binding bindingMargin = new Binding("AdornerMargin");
            bindingMargin.Source = this;
            BindingOperations.SetBinding(adorner, ContentControl.MarginProperty, bindingMargin);
        }

        var dataContext = (this.AssociatedObject as FrameworkElement).DataContext;
        if (control.DataContext == null)
        {
            control.DataContext = dataContext;
        }

        control.Visibility = Visibility.Collapsed;

        initialized = true;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

public class DragOnCanvasBehavior : Behavior<DependencyObject>

{

// the mouse over adorner template property

public static readonly DependencyProperty MouseOverAdornerTemplateProperty =

DependencyProperty.Register(

"MouseOverAdornerTemplate",

typeof(DataTemplate),

typeof(DragOnCanvasBehavior),

new PropertyMetadata(new PropertyChangedCallback((d, o) =>

{

if (((DragOnCanvasBehavior)d).mouseOverAdornerControl != null)

{

((DragOnCanvasBehavior)d).mouseOverAdornerControl.ContentTemplate = (DataTemplate)o.NewValue;

}

})));

// the template

public DataTemplate MouseOverAdornerTemplate

{

get { return (DataTemplate)this.GetValue(MouseOverAdornerTemplateProperty); }

set { this.SetValue(MouseOverAdornerTemplateProperty, value); }

}

// stores the adorner instance

private TemplateAdorner mouseOverAdorner;

// stores the visual control

private ContentControl mouseOverAdornerControl;

// whether the adorner is initialized

private bool mouseOverAdornerInitialized = false;

// whether the adorner is shown

private bool mouseOverAdornerShown = false;

// the commands to hide/show the adorner

public ICommand HideMouseOverAdorner { get; private set; }

public ICommand ShowMouseOverAdorner { get; private set; }

// binds the commands with the methods

public DragOnCanvasBehavior()

{

// [...]

this.ShowMouseOverAdorner = new RelayCommand((o) =>

{

this.OnShowMouseOverAdorner();

});

this.HideMouseOverAdorner = new RelayCommand((o) =>

{

this.OnHideMouseOverAdorner();

});

}

// shows the adorner

private void OnShowMouseOverAdorner()

{

if (this.mouseOverAdornerShown)

{

return;

}

this.InitializeAdorner(this.MouseOverAdornerTemplate, ref this.mouseOverAdornerControl, ref this.mouseOverAdorner, ref this.mouseOverAdornerInitialized);

this.mouseOverAdornerControl.Visibility = Visibility.Visible;

this.mouseOverAdornerShown = true;

}

// hides the adorner

private void OnHideMouseOverAdorner()

{

this.mouseOverAdornerControl.Visibility = Visibility.Collapsed;

this.mouseOverAdornerShown = false;

}

// initializes an adorner (we'll need to reuse this later on)

private void InitializeAdorner(DataTemplate template, ref ContentControl control, ref TemplateAdorner adorner, ref bool initialized)

{

if (initialized)

{

return;

}

if (template != null)

{

AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(this.AssociatedObject as UIElement);

if (adornerLayer == null)

{

throw new NullReferenceException(string.Format("No adorner found in attached object: {0}", this.AssociatedObject));

}

control = new ContentControl();

adornerLayer.Add(adorner = new TemplateAdorner(this.AssociatedObject as UIElement, control));

control.Content = template.LoadContent();

Binding bindingMargin = new Binding("AdornerMargin");

bindingMargin.Source = this;

BindingOperations.SetBinding(adorner, ContentControl.MarginProperty, bindingMargin);

}

var dataContext = (this.AssociatedObject as FrameworkElement).DataContext;

if (control.DataContext == null)

{

control.DataContext = dataContext;

}

control.Visibility = Visibility.Collapsed;

initialized = true;

}

Now, we just need to create the adorner’s DataTemplate, and wire up the events. We just have to add an AdornerDecorator in the controls tree, otherwise the adorner may get a random behavior (it would be attached to the window), or not work at all.

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <AdornerDecorator>
            <Border
                x:Name="DraggableBorder">
                <!-- contents -->

                <i:Interaction.Behaviors>
                    <behaviors:DragOnCanvasBehavior
                        DraggableItem="{Binding}">
                        <behaviors:DragOnCanvasBehavior.MouseOverAdornerTemplate>
                            <DataTemplate>
                                <Border
                                    DataContext="DraggableBorder"
                                    BorderBrush="Black"
                                    BorderThickness="3"
                                    Width="{Binding Path=Width}"
                                    Height="{Binding Path=Height}"></Border>
                            </DataTemplate>
                        </behaviors:DragOnCanvasBehavior.MouseOverAdornerTemplate>

                        <i:Interaction.Triggers>
                            <!-- Dragging events -->

                            <i:EventTrigger EventName="MouseEnter">
                                <i:InvokeCommandAction CommandName="ShowMouseOverAdorner" />
                            </i:EventTrigger>
                            <i:EventTrigger EventName="MouseLeave">
                                <i:InvokeCommandAction CommandName="HideMouseOverAdorner" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </behaviors:DragOnCanvasBehavior>
                </i:Interaction.Behaviors>
            </Border>
        </AdornerDecorator>
    </DataTemplate>
</ItemsControl.ItemTemplate>

<ItemsControl.ItemTemplate>

<Border

x:Name="DraggableBorder">

<i:Interaction.Behaviors>

<behaviors:DragOnCanvasBehavior

DraggableItem="{Binding}">

<behaviors:DragOnCanvasBehavior.MouseOverAdornerTemplate>

<Border

DataContext="DraggableBorder"

BorderBrush="Black"

BorderThickness="3"

Width="{Binding Path=Width}"

Height="{Binding Path=Height}"></Border>

</DataTemplate>

</behaviors:DragOnCanvasBehavior.MouseOverAdornerTemplate>

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseEnter">

<i:InvokeCommandAction CommandName="ShowMouseOverAdorner" />

</i:EventTrigger>

<i:EventTrigger EventName="MouseLeave">

<i:InvokeCommandAction CommandName="HideMouseOverAdorner" />

</i:EventTrigger>

</i:Interaction.Triggers>

</behaviors:DragOnCanvasBehavior>

</i:Interaction.Behaviors>

</Border>

</AdornerDecorator>

</DataTemplate>

</ItemsControl.ItemTemplate>

Note that from the adorner’s DataTemplate, we set the DataContext property, so that we can bind the adorner’s properties directly to the ones of the item view model.

Now, on mouse-over, a black border will appear, and will disappear when the mouse leaves. There are a few problems with this method: most notably, the adorner flickers when the mouse stays over it. But we’ll try to tackle them later on.

WPF Behaviors: switching to Windows.Interactivity.Behavior

This is part 2 of the WPF drag & drop exploration. Part 1 can be found here. Among other things, this CodeProject sample helped me much.

Yesterday I created a WPF behavior following WPF conventions for custom dependency properties. While trying to add an adorner to my item (more on that later), I noticed many samples were using System.Windows.Interactivity.Behavior<T>, which I thought was Blend-related, but apparently is not. Because it is much more concise to write and provides useful overridable methods, I decided to switch to it instead.
In addition, with the previous code, I had a problem when defining multiple dependency properties on my behavior, so I needed to find a way to solve this also.

The first thing is of course to inherit from Behavior<T>. You will find it in the System.Windows.Interactivity namespace, which is not included in .Net. You can grab it through the Blend SDK, in a Nuget package, or it’s included in MVVM frameworks like Caliburn.Micro or MVVM Light.

using System.Windows.Interactivity;

public class DragOnCanvasBehavior : Behavior<DependencyObject>
{
}

using System.Windows.Interactivity;

public class DragOnCanvasBehavior : Behavior<DependencyObject>

{

}

Then, we can remove the Getxxx and Setxxx methods, and replace them with an actual property (that does the same thing). We can also access the behavior instance from the dependency property variable, so we don’t need the instance singleton anymore. We will, however, need to attach the mouse events to the draggable item through ICommands. Since there are no standard ICommand implementation that we can use, we must create one ourselves. I have copied a “standard” implementation from CodeProject, and you will find many similar implementations if you do a quick Google search:

public class RelayCommand : ICommand
{
    private readonly Predicate<object> canExecute;
    private readonly Action<object> execute;

    public RelayCommand(Action<object> execute) : this(execute, DefaultCanExecute)
    {
    }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute");
        }

        if (canExecute == null)
        {
            throw new ArgumentNullException("canExecute");
        }

        this.execute = execute;
        this.canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged
    {
        add
        {
            CommandManager.RequerySuggested += value;
        }
        remove
        {
            CommandManager.RequerySuggested -= value;
        }
    }

    public bool CanExecute(object parameter)
    {
        return this.canExecute != null && this.canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        this.execute(parameter);
    }

    private static bool DefaultCanExecute(object parameter)
    {
        return true;
    }
}

public class RelayCommand : ICommand

{

private readonly Predicate<object> canExecute;

private readonly Action<object> execute;

public RelayCommand(Action<object> execute) : this(execute, DefaultCanExecute)

{

}

public RelayCommand(Action<object> execute, Predicate<object> canExecute)

{

if (execute == null)

{

throw new ArgumentNullException("execute");

}

if (canExecute == null)

{

throw new ArgumentNullException("canExecute");

}

this.execute = execute;

this.canExecute = canExecute;

}

public event EventHandler CanExecuteChanged

{

add

{

CommandManager.RequerySuggested += value;

}

remove

{

CommandManager.RequerySuggested -= value;

}

public bool CanExecute(object parameter)

{

return this.canExecute != null && this.canExecute(parameter);

}

public void Execute(object parameter)

{

this.execute(parameter);

}

private static bool DefaultCanExecute(object parameter)

{

return true;

}

This command will be the bridge between the view and the other layers of the application.

Now, on to inheriting from Behavior<T>. You will notice that I have changed a few names here and there, because they weren’t reflecting the reality of the application anymore: IDragDropHandler becomes IDraggable ; the DropHandler property becomes DraggableItem. I also have replaced the mouse event names with descriptive names (OnStartDrag instead of “mouse button down”), especially since we will now be able to bind these handlers to any event.

public class DragOnCanvasBehavior : Behavior<DependencyObject>
{
    // this registers the DraggableItem property on the behavior
    public static readonly DependencyProperty DraggableItemProperty =
        DependencyProperty.RegisterAttached(
            "DraggableItem",
            typeof(IDraggable),
            typeof(DragOnCanvasBehavior),
            new PropertyMetadata(new PropertyChangedCallback((d, e) =>
            {
                ((DragOnCanvasBehavior)d).draggable = (IDraggable)e.NewValue;
            })));

    // stores the draggable item instance for further access
    private IDraggable draggable;

    // replaces the Getxxx and Setxxx methods
    public IDraggable DraggableItem
    {
        get
        {
            return (IDraggable)this.GetValue(DraggableItemProperty);
        }
        set
        {
            this.SetValue(DraggableItemProperty, value);
        }
    }

    // define the commands available to the view
    public ICommand Dragging { get; private set; }
    public ICommand StartDrag { get; private set; }
    public ICommand StopDrag { get; private set; }

    // defines what the available commands will do
    public DragOnCanvasBehavior()
    {
        this.StartDrag = new RelayCommand((o) =>
        {
            this.OnStartDrag();
        });

        this.StopDrag = new RelayCommand((o) =>
        {
            this.OnStopDrag();
        });

        this.Dragging = new RelayCommand((o) =>
        {
            this.OnDragging();
        });
    }

    // actually handle the events
    private void OnDragging() {}
    private void OnStartDrag() {}
    private void OnStopDrag() {}
}

public class DragOnCanvasBehavior : Behavior<DependencyObject>

{

// this registers the DraggableItem property on the behavior

public static readonly DependencyProperty DraggableItemProperty =

DependencyProperty.RegisterAttached(

"DraggableItem",

typeof(IDraggable),

typeof(DragOnCanvasBehavior),

new PropertyMetadata(new PropertyChangedCallback((d, e) =>

{

((DragOnCanvasBehavior)d).draggable = (IDraggable)e.NewValue;

})));

// stores the draggable item instance for further access

private IDraggable draggable;

// replaces the Getxxx and Setxxx methods

public IDraggable DraggableItem

{

get

{

return (IDraggable)this.GetValue(DraggableItemProperty);

}

set

{

this.SetValue(DraggableItemProperty, value);

}

// define the commands available to the view

public ICommand Dragging { get; private set; }

public ICommand StartDrag { get; private set; }

public ICommand StopDrag { get; private set; }

// defines what the available commands will do

public DragOnCanvasBehavior()

{

this.StartDrag = new RelayCommand((o) =>

{

this.OnStartDrag();

});

this.StopDrag = new RelayCommand((o) =>

{

this.OnStopDrag();

});

this.Dragging = new RelayCommand((o) =>

{

this.OnDragging();

});

}

// actually handle the events

private void OnDragging() {}

private void OnStartDrag() {}

private void OnStopDrag() {}

}

You will notice that we don’t attach the commands to any particular item event anymore. This is because it’s handled by the view. It kind of makes sense, because a different device may have a different method of dragging. The rest of the view can be found in part 1.

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border>
            <!-- contents -->

            <i:Interaction.Behaviors>
                <behaviors:DragOnCanvasBehavior DraggableItem="{Binding}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
                            <i:InvokeCommandAction CommandName="StartDrag" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="PreviewMouseLeftButtonUp">
                            <i:InvokeCommandAction CommandName="StopDrag" />
                        </i:EventTrigger>
                        <i:EventTrigger EventName="PreviewMouseMove">
                            <i:InvokeCommandAction CommandName="Dragging" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </behaviors:DragOnCanvasBehavior>
            </i:Interaction.Behaviors>
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>

<ItemsControl.ItemTemplate>

<i:Interaction.Behaviors>

<behaviors:DragOnCanvasBehavior DraggableItem="{Binding}">

<i:Interaction.Triggers>

<i:EventTrigger EventName="PreviewMouseLeftButtonDown">

<i:InvokeCommandAction CommandName="StartDrag" />

</i:EventTrigger>

<i:EventTrigger EventName="PreviewMouseLeftButtonUp">

<i:InvokeCommandAction CommandName="StopDrag" />

</i:EventTrigger>

<i:EventTrigger EventName="PreviewMouseMove">

<i:InvokeCommandAction CommandName="Dragging" />

</i:EventTrigger>

</i:Interaction.Triggers>

</behaviors:DragOnCanvasBehavior>

</i:Interaction.Behaviors>

</Border>

</DataTemplate>

</ItemsControl.ItemTemplate>

The events handlers are also similar to the ones in part 1. The only difference is that they access the item through Behavior<T> properties. For instance :

private void OnStartDrag()
{
    // use Mouse.GetPosition() to get the mouse coordinates
    this.mouseStartPosition = Mouse.GetPosition(Application.Current.MainWindow);

    // cast this.AssociatedObject to get the item control
    ((UIElement)this.AssociatedObject).CaptureMouse();
}

private void OnStartDrag()

{

// use Mouse.GetPosition() to get the mouse coordinates

this.mouseStartPosition = Mouse.GetPosition(Application.Current.MainWindow);

// cast this.AssociatedObject to get the item control

((UIElement)this.AssociatedObject).CaptureMouse();

}

That’s it! Your behavior event handlers are now linked through the view, which means better testing, and better flexibility.

WPF Drag&drop items in a canvas: communicate between behavior and ViewModel

The source code of the sample application is available at GitHub. It has been strongly inspired by Gong WPF DragDrop and has started life as a copy of another “WPF behavior lab”.

The final goal of the application is to allow a user to freely drag an item in a canvas, and that the items “snap” among themselves, so that the user can align them easily. I’m taking it as an opportunity to learn more about WPF.

The first thing I had to learn was how to create and use custom behaviors. They allow to bind elements from the View into the ViewModel using custom properties.
In “pure” WPF (Blend has different behavior conventions), a behavior is a regular class, with a few conventions to declare a custom property. It is called a Dependency Property. It’s pretty easy to bind a simple value (boolean, integer…), examples are plentiful.

Now, in the view, I want to say “when the user moves this item, this method should be run”, because I want not only the item to move, but also the container to compare the item’s new position to its neighbors. A custom property can be anything a variable can be, but not a method. So, to circumvent this, the behavior must be aware of the ViewModel, but obviously we don’t want to strongly link the behavior with the ViewModel.

The ViewModel will have to implement an interface
The View will be bound to this ViewModel through {Binding}
The Behavior will use this interface’s methods to send messages to the ViewModel

public class DragOnCanvasBehavior
{
    // This declares a "DropHandler" property that we will be able to use in the view
    // The name (xxxProperty) and variable modifiers (public static reaonly) must follow the proper conventions
    public static readonly DependencyProperty DropHandlerProperty =
        DependencyProperty.RegisterAttached(
            "DropHandler",
            typeof(IDragDropHandler),
            typeof(DragOnCanvasBehavior),
            new PropertyMetadata(OnDropHandlerChanged));

    // This will actually "link" to the ViewModel, which should implement IDragDropHandler
    private IDragDropHandler DropHandler { get; set; }

    // This is a convention-required method (Getxxx)
    // It will retrieve the property's value
    public static IDragDropHandler GetDropHandler(UIElement target)
    {
        return (IDragDropHandler)target.GetValue(DropHandlerProperty);
    }

    // This is a convention-required method (Setxxx)
    // It will set the property's value
    public static void SetDropHandler(UIElement target, IDragDropHandler value)
    {
        target.SetValue(DropHandlerProperty, value);
    }

    // This called using the callback of the xxxProperty (overload of DependencyProperty.RegisterAttached)
    // It will be run when the value is changed (meaning that Setxxx might be run multiple times with the same value)
    private static void OnDropHandlerChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        // cast the usable elements
        UIElement element = (UIElement)sender;
        IDragDropHandler handler = (IDragDropHandler)(e.NewValue);

        // we can now use the elements.
        // for instance, we can assign handlers to the UIElement:
        element.MouseLeftButtonDown += Whatever;
    }
}

public class DragOnCanvasBehavior

{

// This declares a "DropHandler" property that we will be able to use in the view

// The name (xxxProperty) and variable modifiers (public static reaonly) must follow the proper conventions

public static readonly DependencyProperty DropHandlerProperty =

DependencyProperty.RegisterAttached(

"DropHandler",

typeof(IDragDropHandler),

typeof(DragOnCanvasBehavior),

new PropertyMetadata(OnDropHandlerChanged));

// This will actually "link" to the ViewModel, which should implement IDragDropHandler

private IDragDropHandler DropHandler { get; set; }

// This is a convention-required method (Getxxx)

// It will retrieve the property's value

public static IDragDropHandler GetDropHandler(UIElement target)

{

return (IDragDropHandler)target.GetValue(DropHandlerProperty);

}

// This is a convention-required method (Setxxx)

// It will set the property's value

public static void SetDropHandler(UIElement target, IDragDropHandler value)

{

target.SetValue(DropHandlerProperty, value);

}

// This called using the callback of the xxxProperty (overload of DependencyProperty.RegisterAttached)

// It will be run when the value is changed (meaning that Setxxx might be run multiple times with the same value)

private static void OnDropHandlerChanged(object sender, DependencyPropertyChangedEventArgs e)

{

// cast the usable elements

UIElement element = (UIElement)sender;

IDragDropHandler handler = (IDragDropHandler)(e.NewValue);

// we can now use the elements.

// for instance, we can assign handlers to the UIElement:

element.MouseLeftButtonDown += Whatever;

}

The IDragDropHandler interface is very simple. The Moved method will notify the ViewModel that the item has been moved, and the Dropped method that the mouse button has been released.

public interface IDragDropHandler
{
    void Dropped();
    void Moved(double x, double y);
}

public interface IDragDropHandler

{

void Dropped();

void Moved(double x, double y);

}

Now, the behavior will use these methods. To do that, we need to create mouse click and move handlers and assign them to the UIElement. Because the OnxxxChanged method is static, but the click/move handlers are not, we need a way to “memorize” the handlers. We’ll do that through a singleton instance:

public class DragOnCanvasBehavior
{
    // we'll use this singleton instance of the behavior to access the DropHandler and the mouse events
    private static DragOnCanvasBehavior Instance = new DragOnCanvasBehavior();

    // initialize the instance and attach events to the element
    private static void OnDropHandlerChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        UIElement element = (UIElement)sender;
        IDragDropHandler handler = (IDragDropHandler)(e.NewValue);

        // re-initialize the singleton (otherwise different items will have the same behavior)
        Instance = new DragOnCanvasBehavior();
        // attach the handler to the singleton
        Instance.DropHandler = handler;

        // attach or detach the handler to the element
        // remember that the handler can be removed at run-time, so we need handle null values
        if (Instance.DropHandler != null)
        {
            element.MouseLeftButtonDown += Instance.ElementOnMouseLeftButtonDown;
            element.MouseLeftButtonUp += Instance.ElementOnMouseLeftButtonUp;
            element.MouseMove += Instance.ElementOnMouseMove;
        }
        else
        {
            element.MouseLeftButtonDown -= Instance.ElementOnMouseLeftButtonDown;
            element.MouseLeftButtonUp -= Instance.ElementOnMouseLeftButtonUp;
            element.MouseMove -= Instance.ElementOnMouseMove;
        }
    }

    // when the user starts dragging
    private void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)
    {
        // save the mouse position on button down
        // we only want a diff of the mouse position so we don't care much about which element we use as reference
        this.mouseStartPosition = this.GetMousePositionFromMainWindow(mouseButtonEventArgs);
        ((UIElement)sender).CaptureMouse();
    }

    // when the user stops dragging
    private void ElementOnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)
    {
        UIElement element = (UIElement)sender;
        element.ReleaseMouseCapture();

        // Send a message to the viewmodel that the mouse button has been released
        if (this.DropHandler != null)
        {
            this.DropHandler.Dropped();
        }
    }

    // while the user is dragging
    private void ElementOnMouseMove(object sender, MouseEventArgs mouseEventArgs)
    {
        // don't do anything if no button is clicked (or there is no handler)
        if (!((UIElement)sender).IsMouseCaptured || this.DropHandler == null)
        {
            return;
        }

        // calculate element movement
        Point mouseNewPos = this.GetMousePositionFromMainWindow(mouseEventArgs);
        Vector movement = (mouseNewPos - this.mouseStartPosition);

        // make sure the mouse has moved since last time we were here
        // (the MouseMove is run in loop while the button is clicked, even if the mouse isn't moving)
        if (movement.Length > 0)
        {
            // save current mouse position
            this.mouseStartPosition = mouseNewPos;
            
            // save the element movement
            Point elementNewPos = this.elementPosition + movement; 
            this.elementPosition = elementNewPos;

            // notify the viewmodel that the element has been moved
            this.DropHandler.Moved(elementNewPos.X, elementNewPos.Y);
        }
    }

    // get the mouse position relative to the main window
    private Point GetMousePositionFromMainWindow(MouseEventArgs mouseEventArgs)
    {
        Window mainWindow = Application.Current.MainWindow;
        return mouseEventArgs.GetPosition(mainWindow);
    }
}

public class DragOnCanvasBehavior

{

// we'll use this singleton instance of the behavior to access the DropHandler and the mouse events

private static DragOnCanvasBehavior Instance = new DragOnCanvasBehavior();

// initialize the instance and attach events to the element

private static void OnDropHandlerChanged(object sender, DependencyPropertyChangedEventArgs e)

{

UIElement element = (UIElement)sender;

IDragDropHandler handler = (IDragDropHandler)(e.NewValue);

// re-initialize the singleton (otherwise different items will have the same behavior)

Instance = new DragOnCanvasBehavior();

// attach the handler to the singleton

Instance.DropHandler = handler;

// attach or detach the handler to the element

// remember that the handler can be removed at run-time, so we need handle null values

if (Instance.DropHandler != null)

{

element.MouseLeftButtonDown += Instance.ElementOnMouseLeftButtonDown;

element.MouseLeftButtonUp += Instance.ElementOnMouseLeftButtonUp;

element.MouseMove += Instance.ElementOnMouseMove;

}

else

{

element.MouseLeftButtonDown -= Instance.ElementOnMouseLeftButtonDown;

element.MouseLeftButtonUp -= Instance.ElementOnMouseLeftButtonUp;

element.MouseMove -= Instance.ElementOnMouseMove;

}

// when the user starts dragging

private void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)

{

// save the mouse position on button down

// we only want a diff of the mouse position so we don't care much about which element we use as reference

this.mouseStartPosition = this.GetMousePositionFromMainWindow(mouseButtonEventArgs);

((UIElement)sender).CaptureMouse();

}

// when the user stops dragging

private void ElementOnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)

{

UIElement element = (UIElement)sender;

element.ReleaseMouseCapture();

// Send a message to the viewmodel that the mouse button has been released

if (this.DropHandler != null)

{

this.DropHandler.Dropped();

}

// while the user is dragging

private void ElementOnMouseMove(object sender, MouseEventArgs mouseEventArgs)

{

// don't do anything if no button is clicked (or there is no handler)

if (!((UIElement)sender).IsMouseCaptured || this.DropHandler == null)

{

return;

}

// calculate element movement

Point mouseNewPos = this.GetMousePositionFromMainWindow(mouseEventArgs);

Vector movement = (mouseNewPos - this.mouseStartPosition);

// make sure the mouse has moved since last time we were here

// (the MouseMove is run in loop while the button is clicked, even if the mouse isn't moving)

if (movement.Length > 0)

{

// save current mouse position

this.mouseStartPosition = mouseNewPos;

// save the element movement

Point elementNewPos = this.elementPosition + movement;

this.elementPosition = elementNewPos;

// notify the viewmodel that the element has been moved

this.DropHandler.Moved(elementNewPos.X, elementNewPos.Y);

}

// get the mouse position relative to the main window

private Point GetMousePositionFromMainWindow(MouseEventArgs mouseEventArgs)

{

Window mainWindow = Application.Current.MainWindow;

return mouseEventArgs.GetPosition(mainWindow);

}

Now, the behavior is notifying the ViewModel that it is being moved. Let’s handle the movement:

// I'm using Fody.PropertyChanged to implement INotifyProperyChanged
// I'm also using Caliburn.Micro as MVVM framwork

[ImplementPropertyChanged]
public class ItemViewModel : PropertyChangedBase, IDragDropHandler
{
    private readonly IEventAggregator events;

    public ItemViewModel(IEventAggregator events)
    {
        this.events = events;
        this.events.Subscribe(this);

        this.Width = 100;
        this.Height = 100;
        this.X = 0;
        this.Y = 0;
    }

    public int Height { get; set; }
    public int Width { get; set; }
    public double X { get; set; }
    public double Y { get; set; }

    public void Dropped()
    {
      // TODO: do something (probably publish an event)
    }

    public void Moved(double x, double y)
    {
        this.X = x;
        this.Y = y;

        // Notify the container that the item is moved, so that it can calculate snapping
        this.events.PublishOnUIThread(new ItemMovedEvent(this.X, this.Y, this.Width, this.Height, this.ID));
    }
}

// I'm using Fody.PropertyChanged to implement INotifyProperyChanged

// I'm also using Caliburn.Micro as MVVM framwork

[ImplementPropertyChanged]

public class ItemViewModel : PropertyChangedBase, IDragDropHandler

{

private readonly IEventAggregator events;

public ItemViewModel(IEventAggregator events)

{

this.events = events;

this.events.Subscribe(this);

this.Width = 100;

this.Height = 100;

this.X = 0;

this.Y = 0;

}

public int Height { get; set; }

public int Width { get; set; }

public double X { get; set; }

public double Y { get; set; }

public void Dropped()

{

// TODO: do something (probably publish an event)

}

public void Moved(double x, double y)

{

this.X = x;

this.Y = y;

// Notify the container that the item is moved, so that it can calculate snapping

this.events.PublishOnUIThread(new ItemMovedEvent(this.X, this.Y, this.Width, this.Height, this.ID));

}

Now that we have a ViewModel that know when it’s being moved, let’s actually allow the user to move it. First, let’s write a container for the items:

[ImplementPropertyChanged]
public class MainViewModel : PropertyChangedBase, IHandle<ItemMovedEvent>
{
    private readonly IEventAggregator events;

    public MainViewModel(IEventAggregator events)
    {
        this.events = events;
        this.events.Subscribe(this);

        this.Items = new BindableCollection<ItemViewModel>();
    }

    // the items displayed on the canvas
    public BindableCollection<ItemViewModel> Items { get; set; }

    // adds an item to the collection
    public void AddItem()
    {
        this.Items.Add(new ItemViewModel(this.events));
    }

    // fired when an item has been moved
    public void Handle(ItemMovedEvent message)
    {
        // TODO: handle snapping to other elements
    }
}

[ImplementPropertyChanged]

public class MainViewModel : PropertyChangedBase, IHandle<ItemMovedEvent>

{

private readonly IEventAggregator events;

public MainViewModel(IEventAggregator events)

{

this.events = events;

this.events.Subscribe(this);

this.Items = new BindableCollection<ItemViewModel>();

}

// the items displayed on the canvas

public BindableCollection<ItemViewModel> Items { get; set; }

// adds an item to the collection

public void AddItem()

{

this.Items.Add(new ItemViewModel(this.events));

}

// fired when an item has been moved

public void Handle(ItemMovedEvent message)

{

// TODO: handle snapping to other elements

}

Then the view (I’m removing things like styling for brevity). Note that it follows Caliburn.Micro conventions on naming (among other things), so it automatically binds some things, like the ItemsControl items through its name.

<UserControl xmlns:cal="http://www.caliburnproject.org"
             xmlns:behaviors="clr-namespace:DragSnap.Behaviors">
    <Grid>
        <Button
            Content="Add an item to the canvas"
            cal:Message.Attach="[Event Click] = [Action AddItem()]" />

        <ItemsControl x:Name="Items">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <!-- This is what actually moves the items in the canvas -->
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                    <Setter Property="Width" Value="{Binding Path=Width}" />
                    <Setter Property="Height" Value="{Binding Path=Height}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <!-- The {Binding} binds the property's value to the ViewModel itself -->
                    <Border behaviors:DragOnCanvasBehavior.DropHandler="{Binding}">
                        <!-- Whatever content you want -->
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

<UserControl xmlns:cal="http://www.caliburnproject.org"

xmlns:behaviors="clr-namespace:DragSnap.Behaviors">

<Grid>

<Button

Content="Add an item to the canvas"

cal:Message.Attach="[Event Click] = [Action AddItem()]" />

<ItemsControl.ItemsPanel>

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

<ItemsControl.ItemContainerStyle>

</Style>

</ItemsControl.ItemContainerStyle>

<ItemsControl.ItemTemplate>

</Border>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</Grid>

</UserControl>

To summarize:

The behavior is attached to the item’s viewmodel from the view
The behavior memorizes the item instance through the IDragDropHandler interface, and assigns mouse events to the item
The mouse events call the IDragDropHandler methods
The item’s viewmodel implements these methods and handles coordinates changes itself (which are visually updated through binding in the view)
The item viewmodel notifies the container viewmodel of its coordinates changes through Caliburn.Micro events