WP7 Drag & Drop Example

Source / XAP can be downloaded from WP7 Drag & Drop project on CodePlex

Silverlight on WP7 does not support drag and drop – at least not fully. It supports drag but not drop. In Silverlight and WPF, there are drop events that can be handled. That however is not the case on WP7.

FrameworkElement class does not support AllowDrop property to be set on WP7.1 (I couldnt start the app if i set AllowDrop to true). I see a documentation conflict between online and offline versions of msdn.
Irrespective of this, the following events are not supported in WP7.1

DragEnter

DragLeave

DragOver

Drop

 To achieve drag and drop, lets start a project – i have called it DragDrop.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <Canvas Grid.Row="0" x:Name="cDest" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue"/>

    <!--ContentPanel - place additional content here-->
    <Canvas Grid.Row="1" x:Name="cSource" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="SkyBlue">
    </Canvas>
</Grid>

so our xaml will look like this

now lets add an ellipse to cSource canvas in the xaml

<Ellipse x:Name="ball" Width="100" Height="100" Fill="White" Canvas.Left="180" Canvas.Top="150">
</Ellipse>

now save the code and open the solution using Expression Blend 4.
Click on Assets and then expand Behaviours. You will see a list – find MouseDragElementBehaviour and drop it on to the ellipse. Save and close expression.

now reload (it should already prompt you) the project in visual studio and you will see the the xaml looks like this

<Ellipse x:Name="ball" Width="100" Height="100" Fill="White" Canvas.Left="180" Canvas.Top="150" ManipulationCompleted="ball_ManipulationCompleted">                
    <i:Interaction.Behaviors>
        <el:MouseDragElementBehavior/>
    </i:Interaction.Behaviors>
</Ellipse>      

if you press F5 and run the code, you can drag the ellipse freely on the page. However to explicit accept the drop, lets handle ManipulationCompleted event for ellipse. This is what the code-behind looks like in c#

private void ball_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    Canvas source = null;
    Canvas dest = null;
    double top = 0;

    if(this.cSource.Children.Contains(ball))
    {
        source = cSource;
        dest = cDest;
    }
    else
    {
        source = cDest;
        dest = cSource;
        top = 480;
    }

    Rect rectDest = UserControlBounds(dest, top);
    
    BehaviorCollection behaviours = Interaction.GetBehaviors(ball);

    if (behaviours.Count > 0 && behaviours[0] is MouseDragElementBehavior)
    {
        MouseDragElementBehavior dragBehaviour = behaviours[0] as MouseDragElementBehavior;

        Rect temp = new Rect(dragBehaviour.X, dragBehaviour.Y, ball.ActualWidth, ball.ActualHeight);

        temp.Intersect(rectDest);

        if (temp != Rect.Empty)
        {
            //// intersection so make it a child.
            source.Children.Remove(ball);

            ball.RenderTransform = new MatrixTransform();
            dest.Children.Add(ball);
        }
    }
}

private Rect UserControlBounds(FrameworkElement element, double top)
{
    return new Rect(element.Margin.Left, top, element.ActualWidth, element.ActualHeight);
}

I will explain what i have done. I create two Rect instances and check for intersect. if there is an intersect, i move the ball from one canvas to the other and i create a new instance of MatrixTransform for the ball (as that is what is being used by MouseDragElementBehaviour to change / move ball around.

About these ads

5 thoughts on “WP7 Drag & Drop Example

  1. Pingback: Drag and Drop in WP7 « Invoke IT Limited

  2. thanks,you realized the way about how to drag and drop one to another on the premise that you know the destination and source,but sometimes we don’t know,that is, we can get the source and destination,only when the user presses one and drag that on to another.how can we do that?by the way,it still transfers the data.

  3. Hi,
    I have tried this code in C# for Windows Phone 8 it worked fine, but when used in VB it generates
    an error for ‘MouseDragElementBehavior ‘ at line:
    ” If behaviours.Count > 0 And behaviours(0) Is MouseDragElementBehavior Then”
    Error message is as below:
    ” ‘MouseDragElementBehavior’ is a type and cannot be used as an expression.”

    And also how can we use BUTTON control instead of Ellipse, I tried to use button
    but it is not dragging at all.

    Thanks.

  4. Good day! This is my first visit to your blog!
    We are a collection of volunteers and starting a new project in a community in the same niche.

    Your blog provided us valuable information to work on. You
    have done a extraordinary job!

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