Extended Drag and Drop Behavior


Hey All!

I decided to play around and make a new drag and drop behavior.  I wanted one that would allow me to specify (in XAML or the Misc. bucket of the Properties panel in Blend) if the object would fade out, and how much or shrink or grow when dragged.  So, I made one called ExtendedDragDropBehavior.  You can download the sample HERE or see it in action HERE.  You can add a reference or just copy ExtendedDragDropBehavior.cs to your project.  Just make sure that your project has a reference to System.Windows.Interactivity.

Again, here is the link: windowspresentationfoundation.com/Downloads/DragDropBehaviorSample.zip

I will post a tutorial on how I made it soon.

Enjoy, Victor

PS: David Kelly will be presenting this behavior on Geekspeak soon.  Stay tuned for details.

 

UPDATE: Andrew Whiddett has suggested some changes that make this a much better Drag/Drop Behavior.  The new improved version can be found here: http://windowspresentationfoundation.com/Downloads/ExtendedDragDropBehavior.cs

Victor

Advertisements
    • Andrew Whiddett
    • July 9th, 2009

    Nice job victor,

    I do have a couple of suggestions:-

    (1) Might be wise to capture/release the mouse on fe_MouseLeftButtonDown/up:

    i.e.

    void fe_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
    draggedElement = sender as FrameworkElement;
    draggedElement.CaptureMouse();
    _lastMousePosition = e.GetPosition(DragCanvas);
    if (Fade < 1.0)
    {
    ChangeFEOpacity(Fade);
    }
    if (ChangeSize != 1)
    {
    ChangeFESize(ChangeSize);
    }
    }

    void fe_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
    if (draggedElement != null)
    {
    draggedElement.ReleaseMouseCapture();
    }
    draggedElement = null;
    ChangeFEOpacity(1);
    ChangeFESize(1);
    }

    Also it would be nice to invoke the action on the release, i.e.

    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Interactivity;

    namespace DragDropBehaviorSample
    {
    public class ExtendedDragDropBehavior : TargetedTriggerAction
    {
    #region Fade (DependencyProperty)

    public Double Fade
    {
    get
    {
    return (Double)GetValue(FadeProperty);
    }
    set
    {
    SetValue(FadeProperty, value);
    }
    }
    public static readonly DependencyProperty FadeProperty =
    DependencyProperty.Register(“fade”, typeof(Double), typeof(ExtendedDragDropBehavior),
    new PropertyMetadata(1.0));

    #endregion Fade (DependencyProperty)

    #region ChangeSize (DependencyProperty)

    public Double ChangeSize
    {
    get
    {
    return (Double)GetValue(ChangeSizeProperty);
    }
    set
    {
    SetValue(ChangeSizeProperty, value);
    }
    }
    public static readonly DependencyProperty ChangeSizeProperty =
    DependencyProperty.Register(“ChangeSize”, typeof(Double), typeof(ExtendedDragDropBehavior),
    new PropertyMetadata(1.0));

    #endregion ChangeSize (DependencyProperty)

    private FrameworkElement _DragCanvas;
    public FrameworkElement DragCanvas
    {
    get
    {
    return _DragCanvas;
    }
    set
    {
    _DragCanvas = value;
    }
    }
    private FrameworkElement fe;
    private UIElement draggedElement = null;
    private Point _newPosition = new Point(0, 0);
    private Point _lastMousePosition;
    private Int32 _zIndex = 100;

    protected override void Invoke(object parameter)
    {
    fe = this.AssociatedObject as FrameworkElement;
    fe.MouseLeftButtonDown += new MouseButtonEventHandler(fe_MouseLeftButtonDown);
    fe.MouseLeftButtonUp += new MouseButtonEventHandler(fe_MouseLeftButtonUp);
    fe.MouseMove += new MouseEventHandler(fe_MouseMove);
    fe.MouseLeave += new MouseEventHandler(fe_MouseLeave);
    fe.MouseEnter += new MouseEventHandler(fe_MouseEnter);
    }

    void fe_MouseEnter(object sender, MouseEventArgs e)
    {
    _zIndex += 1;
    Canvas.SetZIndex(fe, _zIndex);
    }

    void fe_MouseLeave(object sender, MouseEventArgs e)
    {
    _zIndex += 1;
    Canvas.SetZIndex(fe, _zIndex);
    DragOperationComplete();
    }

    void fe_MouseMove(object sender, MouseEventArgs e)
    {
    if (draggedElement != null)
    {
    _zIndex += 1;
    Canvas.SetZIndex(fe, _zIndex);
    _newPosition = e.GetPosition(DragCanvas);
    double OffsetX = _newPosition.X – _lastMousePosition.X;
    double OffsetY = _newPosition.Y – _lastMousePosition.Y;
    Canvas.SetTop(draggedElement, Canvas.GetTop(draggedElement) + OffsetY);
    Canvas.SetLeft(draggedElement, Canvas.GetLeft(draggedElement) + OffsetX);
    _lastMousePosition = _newPosition;
    }
    }

    void fe_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
    draggedElement = sender as FrameworkElement;
    draggedElement.CaptureMouse();
    _lastMousePosition = e.GetPosition(DragCanvas);
    if (Fade < 1.0)
    {
    ChangeFEOpacity(Fade);
    }
    if (ChangeSize != 1)
    {
    ChangeFESize(ChangeSize);
    }
    }

    private void ChangeFESize(double ChangeSize)
    {
    ScaleTransform scale = new ScaleTransform()
    {

    ScaleX = ChangeSize,
    ScaleY = ChangeSize
    };
    fe.RenderTransformOrigin = new Point(.5, .5);
    fe.RenderTransform = scale;
    }

    void fe_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
    DragOperationComplete();
    }

    void DragOperationComplete()
    {
    if (draggedElement != null)
    {
    draggedElement.ReleaseMouseCapture();

    this.Invoke(draggedElement);
    }
    draggedElement = null;
    ChangeFEOpacity(1);
    ChangeFESize(1);
    }

    private void ChangeFEOpacity(Double newOpacity)
    {
    fe.Opacity = newOpacity;
    }
    }
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: