Wpf drag and drop application

Question

i am new to WPF and i am trying to develop drag and drop functionality in my application. I have two user controls Window1 and Window2.

How do I enable drag and drop on any of this user controls by clicking only in the orange area. Only orange area of the user control should be drag and drop enabled. Gray area should not be drag and drop enabled. I mean if we want to drag user control then we have to click in the orange area and gray area will also be dragged with it. If we click on gray area then user control should not move.

Please check the image below which will help in understanding the question.

https://www.dropbox.com/sh/wj9mcbyi9wpcxgq/AAAb9r_aWxKm2Eah3PrT__5sa?dl=0

Thanks in advance.

Answer 1

If you want to do it yourself then you can use my implementation here: https://stackoverflow.com/a/17014906/145757

Otherwise you can check the Blend SDK which includes the MouseDragElementBehavior.

Answer 2

Thanks a lot @Pragmateek for your help, it worked like a charm. Below is my code implemented.

I've a user control UCDragme, it has a dedicated orange drag area TBDragme.

<UserControl x:Class="NSR3.UCDragme"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="500" d:DesignWidth="300">
    <Grid Background="Gray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Background="Orange" x:Name="TBDragme" Text="Dragme" />
        <TextBlock Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Background="AliceBlue" Margin="20" Text="No drag"></TextBlock>
   </Grid>
</UserControl>

Main window Home:

<Window x:Class="NSR3.Home"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Home"
    xmlns:nsr="clr-namespace:NSR3">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Canvas x:Name="panel">
        </Canvas>
        <Button Content="Add" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

drag-and-drop engine in the Home window code-behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace NSR3
{
/// <summary>
/// Interaction logic for Home.xaml
/// </summary>
public partial class Home : Window
{
    UCDragme box;
    public Home()
    {
        InitializeComponent();

        box = new UCDragme();

        TextBlock tb = (TextBlock)box.FindName("TBDragme");

        tb.MouseLeftButtonDown += box_MouseLeftButtonDown;
        tb.MouseLeftButtonUp += box_MouseLeftButtonUp;
        tb.MouseMove += box_MouseMove;

        panel.Children.Add(box);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        box = new UCDragme();

        TextBlock tb=(TextBlock)box.FindName("TBDragme");

        tb.MouseLeftButtonDown += box_MouseLeftButtonDown;
        tb.MouseLeftButtonUp += box_MouseLeftButtonUp;
        tb.MouseMove += box_MouseMove;

        panel.Children.Add(box);
    }

    private TextBlock draggedBox;
    private Point clickPosition;

    private void box_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        draggedBox = sender as TextBlock;
        clickPosition = e.GetPosition(draggedBox);
        draggedBox.CaptureMouse();
    }

    private void box_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        draggedBox.ReleaseMouseCapture();
        draggedBox = null;
        //box = null;
    }

    private void box_MouseMove(object sender, MouseEventArgs e)
    {
        if (draggedBox != null)
        {
            Point currentPosition = e.GetPosition(panel);

            box.RenderTransform = draggedBox.RenderTransform as TranslateTransform ?? new TranslateTransform();

            TranslateTransform transform = box.RenderTransform as TranslateTransform;

            transform.X = currentPosition.X - clickPosition.X - draggedBox.Margin.Left;
            transform.Y = currentPosition.Y - clickPosition.Y - draggedBox.Margin.Right;
        }
    }

}
}