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.